React Essentials
02 App Setup

What are we building?

A Pokemon quiz!

TODO show a screenshot of the finished app

Topics we will definitely cover

  • Create a react app from scratch
  • Testing (unit & integration)
  • Strategies for managing state
  • How to style your components
  • Routing
  • Fetching data from an API

Further topics to choose from

Depending on our progress

  • Code Splitting
  • Redux / GraphQL
  • Suspense
  • Server Side Rendering
  • E2E Testing
  • Authentication

React CLI

                    
                        $ npx create-react-app --template typescript --use-npm

What is all this stuff?

.tsx? serviceWorker? setupTests?

JSX

                
                    const header = React.createElement(
                        'h1', {}, 'Hello World'
                    );
                
            
                
                    const header = <h1>Hello World</h1>

Babel transpiles exactly like this.

JSX

You can use any JS expression within curly braces

                    
                        const name = 'John Wayne';

                        const header = <h1>Hello, {name}</h1>

                        const math = <p>2 + 2 equals {2 + 2}</p>

                        const formatted = <h1>Hello, {formatName(name)}</h1>
JSX is basically JS + HTML

JSX

JSX is an expression too.

                    
                        function getGreeting(user) {
                            if (user) {
                                return <h1>Hello, {formatName(name)}</h1>
                            }
                            return <h1>Hello, stranger</h1>
                        }
                    
                
                    
                        <div className="header">
                            {getGreeting(user)}
                        </div>

JSX

JSX uses camelCase for DOM element properties, e.g. class becomes className

                    
                        regular HTML
                        <div class="header">hello, world!</div>
                    
                
                    
                        JSX
                        <div className="header">hello, world!</div>

TypeScript

We will be using TypeScript because we highly recommend using it in enterprise projects.

The CLI supports it out of the box.

NPM scripts

npm start

Starts the app with a live reload server. The build will fail if you have typescript errors.

npm run build

Creates a production ready build of your app and puts it in the build folder.

npm test

Runs your tests using jest and react-testing-library

npm run eject

You may have noticed that there is no webpack config visible. This is hidden from you when using the CLI (convention over configuration).

In most cases, this will be fine. If you need to make custom changes to the config, you can eject.

This cannot be undone and you lose CLI support.

We recommend starting & staying with the CLI until there is absolutely no way around ejecting.

Questions?