Skip to content
This repository has been archived by the owner on Jun 12, 2020. It is now read-only.

Latest commit

聽

History

History
794 lines (598 loc) 路 38.2 KB

chapter1.md

File metadata and controls

794 lines (598 loc) 路 38.2 KB
Raw

Introduction to React

This chapter is an introduction to React, a JavaScript library for rendering interfaces in single-page and mobile applications, where I explain why developers should consider adding the React library to their toolbelts. We will dive into the React ecosystem, creating your first React application from scratch with no configuration. Along the way, we will introduce JSX, the syntax for React, and ReactDOM, so you have an understanding of React's practical uses in modern web applications.

Hi, my name is React.

Single page applications (SPA) have become increasingly popular in recent years, as frameworks like Angular, Ember, and Backbone allow JavaScript developers to build modern web applications using techniques beyond vanilla JavaScript and jQuery. The three mentioned are among the first SPAs, each coming into its own between 2010 and 2011, but there are many more options for single-page development. The first generation of SPA frameworks arrived at the enterprise level, so their frameworks are more rigid. React, on the other hand, remains an innovative library that has been adopted by many technological leaders like Airbnb, Netflix, and Facebook.

React was released by Facebook's web development team in 2013 as a view library, which makes it the 'V' in the MVC (model view controller). As a view, it allows you to render components as viewable elements in a browser, while its ecosystem lets us build single page applications. While the first generation of frameworks tried to solve many things at once, React is only used to build your view layer; specifically, it is a library wherein the view is a hierarchy of composable components. If you haven't heard about MVC before, don't bother about it, because it's just there to put React historically into context for people who come from other programming languages.

In React, the focus remains on the view layer until more aspects are introduced to the application. These are the building blocks for an SPA, which are essential to build a mature application. They come with two advantages:

  • You can learn the building blocks one at a time without having to understand them altogether. In contrast, an SPA framework gives you every building block from the start. This book focuses on React as the first building block. More building blocks will eventually follow.

  • All building blocks are interchangeable, which makes the ecosystem around React highly innovative. Multiple solutions can compete with each other, and you can choose the most appealing solution for any given challenge.

React is one of the best choices for building modern web applications. Again, it only delivers the view layer, but the surrounding ecosystem makes up an entirely flexible and interchangeable framework. React has a slim API, a robust and evolving ecosystem, and a great community.

Exercises

If you'd like to know more about why I chose React, or to find a more in-depth look at the topics mentioned above, these articles grant a deeper perspective:

Requirements

To follow this book, you should be familiar with the basics of web development, i.e how to use HTML, CSS, and JavaScript. It also makes sense to understand how APIs work, as they will be covered thoroughly. Also, I encourage you to join the official Slack Group to be a part of a growing React community where you can learn from and help others.

Editor and Terminal

For the lessons, you will need a text editor or an IDE and terminal (command line tool). I have provided a setup guide if you need additional help. Optionally, we recommend you keep your projects in GitHub while conducting the exercises in this book. There is a short guide on how to use these tools. Github has excellent version control, so you can see what changes were made if you make a mistake or just want a more direct way to follow along.

Node and NPM

Finally, you will need an installation of node and npm. Both are used to manage libraries you will need along the way. In this book, you will install external node packages via npm (node package manager). These node packages can be libraries or whole frameworks.

You can verify your versions of node and npm on the command line. If you don't get any output in the terminal, you need to install node and npm first. These are my versions at the time of writing this book:

{title="Command Line",lang="text"}

node --version
*v10.11.0
npm --version
*v6.9.0

The additional content of this section is a crash course in node and npm. It is not exhaustive, but it will cover all of the necessary tools. If you are familiar with both of them, you can skip this section.

The node package manager (npm) installs external node packages from the command line. These packages can be a set of utility functions, libraries, or whole frameworks, and they are the dependencies of your application. You can either install these packages to your global node package folder, or to your local project folder.

Global node packages are accessible from everywhere in the terminal, and only need to be installed to the global directory once. Install a global package by typing the following into a terminal:

{title="Command Line",lang="text"}

npm install -g <package>

The -g flag tells npm to install the package globally. Local packages are used in your application by default. For our purposes, we will install React to the local directory terminal by typing:

{title="Command Line",lang="text"}

npm install react

The installed package will automatically appear in a folder called node_modules/ and will be listed in the package.json file next to your other dependencies.

To initialize the node_modules/ folder and the package.json file for your project, use the following npm command. Then, you can install new local packages via npm:

{title="Command Line",lang="text"}

npm init -y

The -y flag initializes all the defaults in your package.json. After initializing your npm project, you are ready to install new packages via npm install <package>.

The package.json file allows you to share your project with other developers without sharing all the node packages. It will contain references to all node packages used in your project, called dependencies. Other users can copy a project without the dependencies using the references in package.json, where the references make it easy to install all packages using npm install. A npm install script will take all the dependencies listed in the package.json file and install them in the node_modules/ folder.

Finally, there's one more command to cover about npm:

{title="Command Line",lang="text"}

npm install --save-dev <package>

The --save-dev flag indicates that the node package is only used in the development environment, meaning it won't be used in when the application is deployed to a the server or used in production. It is useful for testing an application using a node package, but want to exclude it from your production environment.

Some of you may want to use other package managers to work with node packages in your applications. Yarn is a dependency manager that works similar to npm. It has its own list of commands, but you still have access to the same npm registry. Yarn was created to solve issues npm couldn't, but both tools have evolved to the point where either will suffice today.

Exercises:

  • Set up a throw away npm project using the terminal:
    • Create a new folder with mkdir <folder_name>
    • Navigate into the folder with cd <folder_name>
    • Execute npm init -y or npm init
    • Install a local package like React with npm install react
    • Check the package.json file and the node_modules/ folder
    • Attempt to uninstall and reinstall the react node package
  • Read about npm
  • Read about yarn package manager

Installation

There are many approaches to getting started with a React application. The first we'll explore is a CDN, short for content delivery network. Don't worry too much about CDNs now, because you will not use them in this book, but it makes sense to explain them briefly. Many companies use CDNs to host files publicly for their consumers. Some of these files are libraries like React, since the bundled React library is just a react.js JavaScript file.

To get started with React by using a CDN, find the <script> tag in your web page HTML that points to a CDN url. You will need two libraries: react and react-dom.

{title="Code Playground",lang="javascript"}

<script
  crossorigin
  src="https://unpkg.com/react@16/umd/react.development.js"
></script>

<script
  crossorigin
  src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"
></script>

You can also get React into your application by initializing it as node project. With a package.json file, you can install react and react-dom from the command line. However, the folder must be initialized as a npm project using npm init -y with a package.json file. You can install multiple node packages with npm:

{title="Command Line",lang="text"}

npm install react react-dom

This approach is often used to add React to an existing application managed with npm.

You may also have to deal with Babel to make your application aware of JSX (the React syntax) and JavaScript ES6. Babel transpiles your code--that is, it converts it to vanilla JavaScript--so most modern browsers can interpret JavaScript ES6 and JSX. Because of this difficult setup, Facebook introduced create-react-app as a zero-configuration React solution. The next section will show you how to setup your application using this bootstrapping tool.

Exercises:

Zero-Configuration Setup

In the Road to learn React, we will be using create-react-app to bootstrap your application. It's an opinionated yet zero-configuration starter kit for React introduced by Facebook in 2016, recommended for beginners by 96% of React users. In create-react-app the tooling and configuration evolve in the background, while the focus is on the application implementation.

To get started, install the package to your global node packages, which keeps it available on the command line to bootstrap new React applications:

{title="Command Line",lang="text"}

npm install -g create-react-app

You can check the version of create-react-app to verify a successful installation on your command line:

{title="Command Line",lang="text"}

create-react-app --version
*v2.0.2

Now you are ready to bootstrap your first React application. The example will be referred to as hackernews, but you may choose any name you like. First, navigate into the folder:

{title="Command Line",lang="text"}

create-react-app hackernews
cd hackernews

Now you can open the application in your editor. The following folder structure, or a variation of it depending on the create-react-app version, should be presented to you:

{title="Folder Structure",lang="text"}

hackernews/
  README.md
  node_modules/
  package.json
  .gitignore
  public/
    favicon.ico
    index.html
    manifest.json
  src/
    App.css
    App.js
    App.test.js
    index.css
    index.js
    logo.svg
    serviceWorker.js

This is a breakdown of the folders and files:

  • README.md: The .md extension indicates the file is a markdown file. Markdown is used as a lightweight markup language with plain text formatting syntax. Many source code projects come with a README.md file to give you initial instructions about the project. When pushing your project to a platform such as GitHub, the README.md file usually displays information about the content contained in the repository. Because you used create-react-app, your README.md should be the same as the official create-react-app GitHub repository.

  • node_modules/: This folder contains all node packages that have been installed via npm. Since you used create-react-app, there should already be a couple of node modules installed for you. You will rarely touch this folder, because node packages are generally installed and uninstalled with npm from the command line.

  • package.json: This file shows you a list of node package dependencies and other project configurations.

  • .gitignore: This file displays all files and folders that shouldn't be added to your git repository when using git; such files and folders should only be located in your local project. The node_modules/ folder is one example. It is enough to share the package.json file with others, so they can install dependencies on their end with npm install without your dependency folder.

  • public/: This folder holds development files, such as public/index.html. The index is displayed on localhost:3000 when developing your app. The boilerplate takes care of relating this index with all the scripts in src/.

  • build/ This folder is created when you build the project for production, as it holds all of the production files. When building your project for production, all the source code in the src/ and public/ folders are bundled and placed in the build folder.

  • manifest.json and serviceWorker.js: These files won't be used for this project, so you can ignore them for now.

In the beginning, everything you need is located in the src/ folder. The main focus lies on the src/App.js file which is used to implement React components. It will be used to implement your application, but later you might want to split up your components into multiple files, where each file maintains one or more components on its own.

Additionally, you will find a src/App.test.js file for your tests, and a src/index.js as an entry point to the React world. You will get to know both files intimately in a later chapter. There is also a src/index.css and a src/App.css file to style your general application and components, which comes with the default style when you open them. You will modify them later as well.

The create-react-app application is a npm project you can use to install and uninstall node packages. It comes with the following npm scripts for your command line:

{title="Command Line",lang="text"}

# Runs the application in http://localhost:3000
npm start

# Runs the tests
npm test

# Builds the application for production
npm run build

The scripts are defined in your package.json, and your basic React application is bootstrapped. The following exercises will finally allow you to run your bootstrapped application in a browser.

Exercises:

Introduction to JSX

Now we will get to know JSX, the syntax in React. As mentioned before, create-react-app has already bootstrapped a basic application for you, and all files come with their own default implementations. For now, the only file we will modify is the src/App.js file.

{title="src/App.js",lang="javascript"}

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
      </div>
    );
  }
}

export default App;

Don't worry if you're confused by the import/export statements and class declaration now. These are features of JavaScript ES6 we will revisit in a later chapter.

In the file you should see a React ES6 class component with the name App. This is a component declaration. After you have declared a component, you can use it as an element anywhere in your application. It will produce an instance of your component or, in other words, the component gets instantiated.

{title="Code Playground",lang="javascript"}

// component declaration
class App extends Component {
  ...
}

// component usage (also called instantiation for a class)
// creates an instance of the component
<App />

The returned element is specified in the render() method. The components you instantiated earlier are made up of elements, so it is important to understand the differences between a component, an instance of a component, and an element.

You should see where the App component is instantiated, else you couldn't see the rendered output in a browser. The App component is only the declaration, but not the usage. You can instantiate the component anywhere in your JSX with <App />. You will see later where this happens in this application.

The content in the render block may look similar to HTML, but it is actually JSX. JSX allows you to mix HTML and JavaScript. It is powerful, but it can be confusing when you are used to separating the two languages. It is a good idea to start by using basic HTML in your JSX. Open the App.js file and remove all unnecessary HTML code as shown:

{title="src/App.js",lang="javascript"}

import React, { Component } from 'react';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <h2>Welcome to the Road to learn React</h2>
      </div>
    );
  }
}

export default App;

Now, you only return HTML in your render() method without any JavaScript. Let's define the "Welcome to the Road to learn React" as a variable. A variable is set in JSX by curly braces.

{title="src/App.js",lang="javascript"}

import React, { Component } from 'react';
import './App.css';

class App extends Component {
  render() {
# leanpub-start-insert
    var helloWorld = 'Welcome to the Road to learn React';
# leanpub-end-insert
    return (
      <div className="App">
# leanpub-start-insert
        <h2>{helloWorld}</h2>
# leanpub-end-insert
      </div>
    );
  }
}

export default App;

Start your application on the command line with npm start to verify the changes you've made.

You might have noticed the className attribute. It reflects the standard class attribute in HTML. JSX had replaced a handful of internal HTML attributes, but you can find all the supported HTML attributes in React's documentation, which all follow the camelCase convention. On your way to learn React, expect to run across more JSX specific attributes.

Exercises:

ES6 const and let

Notice that we declared the variable helloWorld with a var statement. JavaScript ES6 comes with two more ways to declare variables: const and let. In JavaScript ES6, you will rarely find var anymore. A variable declared with const cannot be re-assigned or re-declared, and cannot be changed or modified. Once the variable is assigned, you cannot change it:

{title="Code Playground",lang="javascript"}

// not allowed
const helloWorld = 'Welcome to the Road to learn React';
helloWorld = 'Bye Bye React';

Conversely, a variable declared with let can be modified:

{title="Code Playground",lang="javascript"}

// allowed
let helloWorld = 'Welcome to the Road to learn React';
helloWorld = 'Bye Bye React';

TIP: Declare variables with let if you think you'll want to re-assign it later on.

Note that a variable declared directly with const cannot be modified. However, when the variable is an array or object, the values it holds can get updated through indirect means:

{title="Code Playground",lang="javascript"}

// allowed
const helloWorld = {
  text: 'Welcome to the Road to learn React'
};
helloWorld.text = 'Bye Bye React';

There are varying opinions about when to use const and when to use let. I would recommend using const whenever possible to show the intent of keeping your data structures immutable, so you only have to worry about the values contained in objects and arrays. Immutability is embraced in the React ecosystem, so const should be your default choice when you define a variable, though it's not really about immutability, but about assigning variables only once. It shows the intent of not changing (re-assigning) the variable even though its content can be changed.

{title="src/App.js",lang="javascript"}

import React, { Component } from 'react';
import './App.css';

class App extends Component {
  render() {
# leanpub-start-insert
    const helloWorld = 'Welcome to the Road to learn React';
# leanpub-end-insert
    return (
      <div className="App">
        <h2>{helloWorld}</h2>
      </div>
    );
  }
}

export default App;

In your application, we will use const and let over var for the rest of the book.

Exercises:

ReactDOM

The App component is located in your entry point to the React world: the src/index.js file.

{title="src/index.js",lang="javascript"}

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

ReactDOM.render() uses a DOM node in your HTML to replace it with JSX. It's a way to integrate React in any foreign application easily, and you can use ReactDOM.render() multiple times across your application. You can use it to bootstrap simple JSX syntax, a React component, multiple React components, or an entire application. In a plain React application, you would only use it once to bootstrap the component tree.

ReactDOM.render() expects two arguments. The first argument is for rendering the JSX. The second argument specifies the place where the React application hooks into your HTML. It expects an element with an id='root', found in the public/index.html file.

{title="Code Playground",lang="javascript"}

ReactDOM.render(
  <h1>Hello React World</h1>,
  document.getElementById('root')
);

During implementation, ReactDOM.render() takes your App component, though it can also pass simple JSX. It doesn't require a component instance.

Exercises:

Hot Module Replacement

Hot Module Replacement can be used in the src/index.js file to improve your experience as a developer. By default, create-react-app will cause the browser to refresh the page whenever its source code is modified. Try it by changing the helloWorld variable in your src/App.js file, which should cause the browser to refresh the page. There is a better way of handling source code changes during development, however.

Hot Module Replacement (HMR) is a tool for reloading your application in the browser without the page refresh. You can activate it in create-react-app by adding the following configuration to your src/index.js file:

{title="src/index.js",lang="javascript"}

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

# leanpub-start-insert
if (module.hot) {
  module.hot.accept();
}
# leanpub-end-insert

Again, change the helloWorld variable in your src/App.js file. The browser shouldn't refresh, but the application will reload and show the correct output. HMR comes with multiple advantages:

Imagine you are debugging your code with console.log() statements. These statements will stay in your developer console, even though you changed your code, because the browser doesn't refresh the page anymore. In a growing application, page refreshes delay productivity; HMR removes this obstacle by eliminating the incremental time loss it takes for a browser to reload.

The most useful benefit of HMR is that you can keep the application state after the application reloads. For instance, assume you have a dialog or wizard in your application with multiple steps, and you are on step 3. Without HMR, you make changes to the source code and your browser refreshes the page. You would then have to open the dialog again and navigate from step 1 to step 3 each time. With HMR your dialog stays open at step 3, so you can debug from the exact point you're working on. With the time saved from page loads, this makes HMR an invaluable tool for React developers.

Exercises:

Complex JavaScript in JSX

So far, you have rendered a few primitive variables in your JSX. Now, we will render a list of items. The list will contain sample data in the beginning, but later we will learn how to fetch the data from an external API.

First you have to define the list of items:

{title="src/App.js",lang="javascript"}

import React, { Component } from 'react';
import './App.css';

# leanpub-start-insert
const list = [
  {
    title: 'React',
    url: 'https://reactjs.org/',
    author: 'Jordan Walke',
    num_comments: 3,
    points: 4,
    objectID: 0,
  },
  {
    title: 'Redux',
    url: 'https://redux.js.org/',
    author: 'Dan Abramov, Andrew Clark',
    num_comments: 2,
    points: 5,
    objectID: 1,
  },
];
# leanpub-end-insert

class App extends Component {
  ...
}

The sample data represents information we will fetch from an API later on. Items in this list each have a title, a url, and an author, as well an identifier, points (which indicate how popular an article is), and a count of comments.

Now you can use the built-in JavaScript map functionality in JSX, which iterates over a list of items to display them according to specific attributes. Again, we use curly braces to encapsulate the JavaScript expression in JSX:

{title="src/App.js",lang="javascript"}

class App extends Component {
  render() {
    return (
      <div className="App">
# leanpub-start-insert
        {list.map(function(item) {
          return <div>{item.title}</div>;
        })}
# leanpub-end-insert
      </div>
    );
  }
}

export default App;

Using JavaScript alongside HTML in JSX is very powerful. For a different task you may have used map to convert one list of items to another. This time, we used map to convert a list of items to HTML elements.

{title="Code Playground",lang="javascript"}

const array = [1, 4, 9, 16];

// pass a function to map
const newArray = array.map(function (x) { return x * 2; });

console.log(newArray);
// expected output: Array [2, 8, 18, 32]

So far, only the title is displayed for each item. Let's experiment with more of the item's properties:

{title="src/App.js",lang="javascript"}

class App extends Component {
  render() {
    return (
      <div className="App">
# leanpub-start-insert
        {list.map(function(item) {
          return (
            <div>
              <span>
                <a href={item.url}>{item.title}</a>
              </span>
              <span>{item.author}</span>
              <span>{item.num_comments}</span>
              <span>{item.points}</span>
            </div>
          );
        })}
# leanpub-end-insert
      </div>
    );
  }
}

export default App;

Note how the map function is inlined in your JSX. Each item property is displayed with a <span> tag, and the url property of the item is in the href attribute of the anchor tag.

React will display each item, but you can still do more to help React embrace its full potential. By assigning a key attribute to each list element, React can identify modified items when the list changes. These sample list items come with an identifier:

{title="src/App.js",lang="javascript"}

{list.map(function(item) {
  return (
# leanpub-start-insert
    <div key={item.objectID}>
# leanpub-end-insert
      <span>
        <a href={item.url}>{item.title}</a>
      </span>
      <span>{item.author}</span>
      <span>{item.num_comments}</span>
      <span>{item.points}</span>
    </div>
  );
})}

Make sure that the key attribute is a stable identifier. Avoid using the index of the item in the array, because the array index is not stable. If the list changes its order, for example, React will not be able to identify the items properly.

{title="src/App.js",lang="javascript"}

// don't do this
{list.map(function(item, key) {
  return (
    <div key={key}>
      ...
    </div>
  );
})}

Start your app in a browser, and you should see both items of the list displayed.

Exercises:

ES6 Arrow Functions

JavaScript ES6 introduced arrow functions expressions, which are shorter than a function expressions.

{title="Code Playground",lang="javascript"}

// function declaration
function () { ... }

// arrow function declaration
() => { ... }

You can remove the parentheses in an arrow function expression if it only has one argument, but you have to keep the parentheses if it gets multiple arguments:

{title="Code Playground",lang="javascript"}

// allowed
item => { ... }

// allowed
(item) => { ... }

// not allowed
item, key => { ... }

// allowed
(item, key) => { ... }

You can also write map functions more concisely with an ES6 arrow function:

{title="src/App.js",lang="javascript"}

# leanpub-start-insert
{list.map(item => {
# leanpub-end-insert
  return (
    <div key={item.objectID}>
      <span>
        <a href={item.url}>{item.title}</a>
      </span>
      <span>{item.author}</span>
      <span>{item.num_comments}</span>
      <span>{item.points}</span>
    </div>
  );
})}

You can remove the block body, the curly braces, with the ES6 arrow function. In a concise body, an implicit return is attached; thus, you can remove the return statement. This will happen often in this book, so be sure to understand the difference between a block body and a concise body when using arrow functions.

{title="src/App.js",lang="javascript"}

# leanpub-start-insert
{list.map(item =>
# leanpub-end-insert
  <div key={item.objectID}>
    <span>
      <a href={item.url}>{item.title}</a>
    </span>
    <span>{item.author}</span>
    <span>{item.num_comments}</span>
    <span>{item.points}</span>
  </div>
# leanpub-start-insert
)}
# leanpub-end-insert

Your JSX should look more concise and readable now, as it omits the function statement, the curly braces, and the return statement.

Exercises:

ES6 Classes

JavaScript ES6 introduced classes, which are commonly used in object-oriented programming languages. JavaScript, always flexible in its programming paradigms, allows functional programming and object-oriented programming to work side-by-side.

While React embraces functional programming, e.g. immutable data structures and function compositions, classes are used to declare ES6 class components. React mixes the good parts of both programming paradigms.

Consider the following Developer class to examine a JavaScript ES6 class without a component.

{title="Code Playground",lang="javascript"}

class Developer {
  constructor(firstname, lastname) {
    this.firstname = firstname;
    this.lastname = lastname;
  }

  getName() {
    return this.firstname + ' ' + this.lastname;
  }
}

A class has a constructor to make it instantiable. The constructor takes arguments and assigns them to the class instance. A class can also define functions. Because the function is associated with a class, it is called a method, or a class method.

The Developer class is the only class declaration we use here, as you can create multiple instances of a class by invoking it. It is similar to the ES6 class component, which has a declaration, but you have to use it somewhere else to instantiate it:

{title="Code Playground",lang="javascript"}

const robin = new Developer('Robin', 'Wieruch');
console.log(robin.getName());
// output: Robin Wieruch

React uses JavaScript ES6 classes for ES6 class components, which you have already used at least once so far:

{title="src/App.js",lang="javascript"}

import React, { Component } from 'react';

...

class App extends Component {
  render() {
    ...
  }
}

When you declare the App component it extends from another component. In object-oriented programming, the term "extends" refers to the principle of inheritance, which means that functionality can be passed from one class to another. The App class extends from the Component class, meaning it inherits functionality from the Component class. The Component class is used to extend a basic ES6 class to a ES6 component class. It has all the functionalities that a component in React needs. The render method is one function you have already used. You will learn about other component class methods as we move along.

The Component class encapsulates all the implementation details of a React component, which allows developers to use classes as components in React.

Methods exposed by a React Component are its public interface. One of these methods must be overridden, while the others don't need to be overridden. You will learn about these when we discuss lifecycle methods later. The render() method has to be overridden, because it defines the output of a React Component, so it must be defined. These are the basics of JavaScript ES6 classes, and how they are used in React to extend them to components.

Exercises:

{pagebreak}

Congratulations, you have learned to bootstrap your first React application! Let's recap:

  • React
    • Create-react-app bootstraps a React application
    • JSX mixes up HTML and JavaScript to define the output of React components in their render methods
    • Components, instances, and elements are different items in React
    • ReactDOM.render() is an entry point for a React application to hook React into the DOM
    • Built-in JavaScript functionalities can be used in JSX
    • Map can be used to render a list of items as HTML elements
  • ES6
    • Variable declarations with const and let can be used for specific use cases
    • Use const over let in React applications
    • Arrow functions can be used to keep your functions concise
    • Classes are used to define components in React by extending them

Now that you've completed the first chapter, it's advisable to experiment with the source code you have written so far and see what changes you can make on your own. You can find the source code in the official repository.