From 37249aaae6cf6ed6555f47838b96a507d5b34b8f Mon Sep 17 00:00:00 2001 From: Jackson Kearl Date: Thu, 8 Aug 2019 14:53:58 -0700 Subject: [PATCH] Use function components to reflect changes in CRA --- .prettierrc | 1 + README.md | 226 ++++++++++++++++++++++++++-------------------------- src/App.js | 129 +++++++++++++++--------------- 3 files changed, 175 insertions(+), 181 deletions(-) create mode 100644 .prettierrc diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..de42012 --- /dev/null +++ b/.prettierrc @@ -0,0 +1 @@ +{ "singleQuote": true, "trailingComma": "all", "jsxSingleQuote": true } diff --git a/README.md b/README.md index 2885226..b820ba2 100644 --- a/README.md +++ b/README.md @@ -36,10 +36,10 @@ We like a clean house. Let's first remove the modules and components we are not Remove these files: -* `src/App.css` -* `src/App.test.js` -* `src/index.css` -* `src/logo.svg` +- `src/App.css` +- `src/App.test.js` +- `src/index.css` +- `src/logo.svg` Inside `src/index.js`, remove the import of `index.css`. @@ -56,27 +56,25 @@ import React, { Component } from 'react'; - import logo from './logo.svg'; - import './App.css'; -class App extends Component { - render() { - return ( -
-
-- logo -

- Edit src/App.js and save to reload. -

- - Learn React - -
-
- ); - } +function App() { + return ( +
+
+- logo +

+ Edit src/App.js and save to reload. +

+ + Learn React + +
+
+ ); } export default App; @@ -97,7 +95,7 @@ npm install grommet grommet-icons styled-components --save You can now add the import of the `Grommet` component. ```diff -import React, { Component } from 'react'; +import React from 'react'; + import { Grommet } from 'grommet'; ``` @@ -136,6 +134,7 @@ in the future by using a `theme`. Let's now remove `plain` from Grommet and add a custom font-family, font-size, and line-height. Below the `import` statements, let's add an initial theme declaration: + ```javascript const theme = { global: { @@ -147,7 +146,9 @@ const theme = { }, }; ``` + And modify the Grommet tag with our new theme: + ```javascript ``` @@ -205,29 +206,25 @@ Let's create an AppBar component and replace the `header` tag with it. + /> +); -class App extends Component { - render() { - return ( - --
--

-- Edit src/App.js and save to reload. --

-- -- Learn React -- --
-+ -+ Hello Grommet! -+ - - ); - } +function App() { + return +-
+-

+- Edit src/App.js and save to reload. +-

+- +- Learn React +- +-
++ ++ Hello Grommet! ++ + } ``` @@ -253,7 +250,7 @@ const theme = { ``` The AppBar now has a different color. You can create colors with any name; `brand` was just an example. -Another great Grommet feature is the ability to easily declare context-aware colors which automatically adapt to light and dark themes. That is, any color can have two variations: `dark` and `light`. For example, use a light text color in a dark background, +Another great Grommet feature is the ability to easily declare context-aware colors which automatically adapt to light and dark themes. That is, any color can have two variations: `dark` and `light`. For example, use a light text color in a dark background, and vice-versa. We have created this [codesandbox](https://codesandbox.io/s/213mry1mnj) with more details on color usage. ## Improving the AppBar @@ -315,59 +312,59 @@ We are extending Grommet to take the full viewport height and width. We add a Bo Everything is so static here. Let's add some state. We are going to hide the sidebar initially and show it only when we click the notifications icon inside the AppBar. +To start, we'll import the `useState` [React Hook](https://reactjs.org/docs/hooks-state.html). + ```diff -class App extends Component { -+ state = { -+ showSidebar: false, -+ } - render() { -+ const { showSidebar } = this.state; - return ( - - - - My App --