Tools

• Prettier
• ESLint
• browserslist
• React Dev Tools

Prettier

Your code is always consistent, as is the code from the rest of your team. No more bikeshedding!

See it in action

Lets install it either locally npm i -D prettier or run it with npx prettier.

Add the plugin for your IDE VS Code , JetBrains

Prettier is heavily opinionated. Luckily there are a lot of options to customize it to your liking

Add a prettier.config.js file to your project

                    
                        module.exports = {
                            singleQuote: true,
                            trailingComma: 'all',
                            quoteProps: 'consistent',
                          }
                    
                

Add a npm script to the package.json.

                    
                        "scripts": {
                            "pretty": "prettier --write \"src/**/*.{js,json,
                                yml,yaml,css,scss,ts,tsx,md}\"",
                        },
                    
                

ESLint

Enforce some code styles which pertain more to usage.

Run npm i -D eslint eslint-config-prettier to install it.

                    
                        "scripts": {
                            "lint": "eslint \"src/**/*.{js,ts,tsx}\" --quiet",
                        },
                    
                

And again add the plugin for your IDE: VS Code

ESLint has a ton of (predefined) rules, ranging from very loos to super strict (airbnb).

Create React App comes with some predefined rules.

browserslist

Dev Tools

React has wonderful dev tools that the core team maintains.

They're available for both Chromium-based browsers and Firefox

• Explore React app like a DOM tree
• Modify state and props on the fly
• Tease out performance problems
• Programmatically manipulate components

Routing

with React Router

Reads state from the URL and syncs back to it.

And as always it's components all the way (and some hooks).

Basics Components

• BrowserRouter
• Switch
• Route
• Redirect
• Link

Putting it all together

                    
                        const App = () => (
                          <Router>
                            <Header />
                            <Switch>
                              <Route exact path="/register">
                                  <Register />
                              </Route>
                              <Route exact path="/quiz"">
                                  <PokeQuiz />
                              </Route>
                              <Redirect from="/" to="register" />
                            </Switch>
                          </Router>
                        );
                    
                

Navigate between pages

                    
                        const Header = () => (
                          <div>
                            <Link to="/">Register</Link>
                            <Link to="/quiz">Quiz</Link>
                          </div>
                        );
                    
                

Hooks

• useHistory

  gives you access to the history instance that you may use to navigate.

• useLocation

  think about it like a useState that returns a new location whenever the URL changes.

• useParams

  returns an object of key/value pairs of URL parameters.

Asynchronous API Requests

The useEffect hook

By using this Hook, you tell React that your functional component needs to perform some side effects after render.

                    
                        useEffect(() => {
                            console.log("Hello everyone")
                        });
                    
                

When does the effect run?

                    
                        useEffect(() => {
                            console.log(`Hello ${name}`)
                        }, [name]);
                    
                

Effects with cleanup

                    
                        useEffect(() => {
                            console.log("Hello everyone")
                            return () => {
                                console.log("Goodbye")
                            }
                        }, []);
                    
                

Lets fetch some Pokemon

                    
                        const PokeQuiz = () => {
                            const [pokemonList, setPokemonList] = useState([]);
                            const URL = 'https://pokeapi.co/api/v2/pokemon?limit=50';
                          
                            useEffect(() => {
                              (async () => {
                                const response = await fetch(URL);
                                const pokemonList = response.json().results;
                                setPokemonList(pokemonList);
                              })();
                            }, []);
                          
                            return pokemonList.map(pokemon => 
{pokemon.name}
);
                        };
                    
                

Custom Hooks

Building your own Hooks lets you extract component logic into reusable functions.

Level up to Pokemaster

Enable hard mode with /quiz?level=pokemaster

                    
                        const useQuery = () =>
                            new URLSearchParams(useLocation().search);