Intro to React & Components

Learning Objectives

Students Will Be Able To:
Explain the Use Case of React
Explain What Components Are
Explain How React Renders a User Interface
Compose a UI Using Components
Use React DevTools

Road Map

What is React?
Why Use React?
Creating a React App
Components
How a React App is Loaded and Renders
Designing User Interfaces Using Components
Let's Define a Component
Practice Exercise: Define Another Component
Install and Open React Developer Tools
References

Videos

1. What is React?

An open-source JavaScript library used to build and render user interfaces in the browser.
It was open-sourced in May of 2013.
Created by Jordan Walke, a Facebook engineer.
Now being used by companies such as Netflix, Imgur, Airbnb, Walmart, and many more.
React Native, a separate library, can be used to develop native iOS and Android mobile apps.

2. Why Use React?

React is the most popular (by far) front-end library for building highly dynamic user interfaces used in today's modern single-page applications.

👀 A single-page application (SPA) updates its UI "in-place" vs. the traditional multi-page web apps we've built thus far where the browser replaces the entire web page each time the user interacts with it.

Most importantly, you want to learn to use React because...

3. Creating a React App

`npx create-react-app <app name>`

The React team has developed a wonderful script for generating React apps.

The following command will create a skeleton React app within a new directory:

npx create-react-app <app name>

tip

👀 npx is a "package runner" and comes with npm versions 5.2.0 and later and is now the recommended approach to running create-react-app. Be aware that you will find many React tutorials that show installing and running create-react-app without using npx.

However, before you start creating a bunch of React apps, note that each bare-bones React app consumes approximately 270MB of disk space! This is due to the sheer number of Node modules a React project requires due to its dependency on build tools, its development server, etc.

Although using
npx create-react-app <app name>
is a great way to start an actual React project, we can save our disk space when learning and experimenting by using the most excellent code playground, CodeSandbox...

CodeSandbox Starting React App

You'll want to set up a new account and create a new React sandbox...

CodeSandbox itself is a React app and uses the underlying editor of VS Code - so put those shortcut keys you've learned to work!

We can manage the project's files in the left-pane, edit code another pane, and see the live output in a pane or in its own browser tab (which is excellent for debugging).

Let's rename our sandbox to something like "React To-Do" by editing the temporary name:

caution

👀 It's possible to lose work in CodeSandbox if files are not saved. You may want to access File/Preferences, search for "autosave" and select your preferred option.

React Apps Are 100% JavaScript

Despite its purpose being to render User Interfaces, React applications are written entirely using 100% JavaScript.

Sure, a React app uses CSS for styling rendered elements, but there's no HTML anywhere in a React app.

But what about that HTML-looking code you ask...

Live Editor

function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

Result

Well, that's not HTML, it's JSX!

JSX is fundamental to React and we'll cover it in detail in the next lesson.

Let's start a React Fundamentals Chart study guide that we can add to as the lessons unfold...

React Fundamental	Summary
React	A JS library for building dynamic UIs using components
JSX	A syntax extension to JS that looks like HTML and makes defining UIs more intuitive vs. pure JS

Let's make some changes by editing the JSX as follows:

Live Editor

function App() {
  return (
    <div className="App">
      <h1>React To-Do</h1>
      <ul>
        <li>Learn React</li>
        <li>Learn the MERN-Stack</li>
      </ul>
    </div>
  );
}

Result

Modern JavaScript

CodeSandbox's starting React app uses modern JavaScript.

As React developers, we frequently use the latest features of JavaScript such as the spread syntax, destructuring assignment, etc.

For example, note the use of import at the top of index.js. Similar to how we used require in Node, import allows us to access the functionality that is exported by other JavaScript files (modules).

The newer JavaScript Module syntax was introduced with ES2015 and they're really cool. However, you're probably wondering if they're so cool, why haven't we used them yet. The answer is that their use, until recently, required tooling known as a "module bundler", the most popular being webpack, used by React projects created using CRA.

❓ Review Questions - React (1 min)

(1) What is the purpose of the React library?

To render highly dynamic user interfaces using components

(2) True or False: React uses HTML to define user interfaces.

False. It may look like HTML, but it's a similar markup language known as JSX.

4. Components

What Are Components?

Components are the building block of User Interfaces and are fundamental to today's front-end libraries/frameworks, including React, Angular & Vue.

Let's contrast the two different kinds of components in React:

User-defined components that we as developers define
Built-in components that are part of the React library

User-Defined Components

We code user-defined components and use them to compose the application's user interface.

In the "React To-Do" sandbox, there is a single user-defined component, <App>, that's defined and exported in the App.js module:

Live Editor

function App() {
  return (
    <div className="App">
      <h1>React To-Do</h1>
      <ul>
        <li>Learn React</li>
        <li>Learn the MERN-Stack</li>
      </ul>
    </div>
  );
}

Result

danger

👀 User-defined components must be named using UpperCamelCasing.

A component may be defined using a JS function or class. Since the introduction of "React hooks" in version 16.8, the trend has been to code components exclusively using functions.

Our user-defined components typically render other user-defined components and/or React's built-in components...

React Elements

React Elements are components built into React.

A React Element exists for each HTML element we're familiar with and thus, are easily recognizable in the JSX.

tip

👀 React Elements will always be named using lowercase.

👉 You Do - Identify the React Elements within the JSX of the "React To-Do" sandbox so far (1 min)

Don't peek!

There are the following React Elements (components):

A single <div> component
A single <h1> component
A single <ul> containing two <li> components

When a React Element is rendered, its corresponding HTML element will be created in the page (DOM).

Using Chrome DevTools, open the output of the sandbox in its own tab and observe the HTML elements created by the <App> component's JSX:

Yep, each React Element in the JSX results in its corresponding HTML element being rendered in the DOM!

info

👀 User-defined components themselves, e.g., <App> do not render an HTML element in the DOM - after all, a browser wouldn't know what the heck an <App> HTML element is.

HTML/Component Hierarchy

In a React app, the tree-like hierarchy of the HTML elements in the browser document is a result of a hierarchy of components being rendered.

At the top of that component hierarchy is, by convention, a user-defined component named <App>.

Let's see how the <App> component is rendered for the first time when the React app loads...

5. How a React App is Loaded and Renders

Here's what happens when a user browses to a web app that uses React for its front-end UI:

When React renders a Function Component, it simply runs that function and renders what the function returns.

Similarly, a Class Component's render method is invoked, and like a Function Component, React renders what the render method returns.

High-Performance Rendering of Components

Rendering happens frequently in a React app (whenever state changes), but thanks to React's ingenious design, it's very fast and efficient because React does not render components directly into the browser's DOM and manipulating the DOM is relatively CPU intensive.

Instead, React:

Renders all React Element components into a Virtual DOM.
After all components have been rendered, React compares the current Virtual DOM to the previous Virtual DOM and computes what is called the "diff".
React uses the "diff" to make only the necessary changes to the actual DOM in the browser.

Time to add to our React Fundamentals chart...

React Fundamental	Summary
...	...
Components	A user interface is defined by a hierarchy of components
User-Defined Component	May be defined as a function or class but must be named using UpperCamelCasing May hold and manage application state May contain or utilize application logic such as fetching data, implementing the win/loss logic of a game, etc.
React Elements	React's built-in components, such as `<div>`, that render their corresponding HTML element into the DOM Are always named using lowercase
`root.render()` method	Renders the React app's top-level component for the first time when the app's JS is loaded in the browser
When a Component's State is Updated	The component is re-rendered All children components are also rendered, and so on until there are no more components to render

❓ Review Questions - Components (2 mins)

(1) True or False: User-defined components must be named in lowercase.

False. They are named using UpperCamelCasing.

(2) True or False: A Function Component is a component that is written as a JS function and returns its user interface as JSX.

True

(3) True or False: When a component is rendered, all of its children are also rendered.

True

(4) After a React app is rendered for the first time by the root.render() method, components re-render when ________ is updated.

State

(5) True or False: A div tag placed inside of jsx(react component) is an html div element?

False. A div tag, or really any traditional html tag(<p>, <li>, <span> .etc), placed inside of jsx is in fact a react component meant to represent its respective html element in react's virtual DOM.

function MyComponent() {
  return (
    <div>
      This div tag not an html div element, but a react component meant to
      represent an html div element in react's virtual DOM
    </div>
  );
}

6. Designing User Interfaces Using Components

To develop a React application, we compose the UI using a hierarchy of components.

For example, take the following wireframe/app:

The above could be broken into the following components:

❓ Which top of the component-hierarchy component is missing from the above diagram?

<App>

❓ What are the names of the two components being rendered by the "missing" <App> component?

<Network> and <Predictions>

We must get used to thinking about our UI in terms of components. This "Component Thought" requires us to:

Break the UI into several smaller components to make the code more manageable.
Compose (combine) these components into other components.
Compose page-level components that render according to which client-side route is active.

7. Let's Define a Component

Let's refactor "React To-Do" so that the <App> component renders a <ToDoList> component instead of the <ul> and its contents...

Define a `ToDoList.jsx` Module

Click on the src folder in the sandbox and use its GUI to create a new file named ToDoList.jsx.

Modules should be named the same as the component, i.e., using UpperCamelCasing.

tip

👀 By using .jsx as the module's extension, we'll get better code completion and a cool React icon by the filename.

Note: Importing the React Library is No Longer Necessary

Prior to React version 17+, we used to have to import React at the top of every component module like this:

import React from "react";

However, this is no longer required and is being mentioned here because there's a lot of projects out there pre-version 17.

Stub up and export the Function Component

Let's stub up <ToDoList> as follows:

ToDoList.jsx
export default function ToDoList() {}

Note that you may also see components exported using another line of code like this:

ToDoList.jsx
function ToDoList() {}

export default ToDoList;

Cool. So ultimately, a Function Component must return its UI as JSX.

As planned, let's move the <ul> and its contents from App.js to our new component and return it:

Live Editor

// remember to export default
function ToDoList() {
  // Application logic, etc. goes here
  return (
    <ul>
      <li>Learn React</li>
      <li>Learn the MERN-Stack</li>
    </ul>
  );
}

Result

tip

👀 Saving the file (command/ctrl + s) in the sandbox will auto-format the code because "Prettier" is configured by default.

Update `<App>` to Render the `<ToDoList>` Component

Now let's import and render the <ToDoList> component in App.js:

App.jsx
// Default imports can be named anything
import ToDoList from "./ToDoList";

export default function App() {
  return (
    <div className="App">
      <h1>React To-Do</h1>
      <ToDoList />
    </div>
  );
}

caution

👀 If a component is empty (does not have any content), it must be self closed using /> or less commonly as <ToDoList></ToDoList>.

The app should now be rendering the same as before the <ToDoList> refactor:

Live Editor

function ToDoList() {
  return (
    <ul>
      <li>Learn React</li>
      <li>Learn the MERN-Stack</li>
    </ul>
  );
}

function App() {
  return (
    <div className="App">
      <h1>React To-Do</h1>
      <ToDoList />
    </div>
  );
}

// ignore the next line -> needed to show live editor
render(<App />);

Result

Navigate to the next page where you will complete and submit the following exercise...

8. 💪 Practice Exercise: Define and Render Another Component (10 mins)

Your turn to create and render another component:

Refactor "React To-Do" so that the <ToDoList> component renders two <ToDoListItem> components instead of the two <li> components.
Define the <ToDoListItem> component in its own JS module using the proper naming convention.
Simply have the <ToDoListItem> component render <li>To Do Item</li>. In the next lesson you will learn how to render data passed to the component.
Submit the link to your sandbox in the Assignment Submission's input box.

This is what you will see when finished:

9. Install and Open React Developer Tools

You may have noticed that CodeSandbox has a React DevTools tab used to troubleshoot components.

We definitely want to be able to do the same in Chrome!

Browse to the React Developer Tools extension and install it.

Now when DevTools are open, you'll find a Components option available on the far right (you may have to click the >> to see it):

Clicking it reveals an amazing tool for browsing the component hierarchy and inspecting the details of a component's state and props (yet to be discussed).

10. References

The Completed Fundamentals of React Chart

React Docs

Intro to React & Components

Learning Objectives​

Road Map​

Videos​

1. What is React?​

2. Why Use React?​

3. Creating a React App​

npx create-react-app <app name>​

CodeSandbox Starting React App​

React Apps Are 100% JavaScript​

Modern JavaScript​

❓ Review Questions - React (1 min)​

4. Components​

What Are Components?​

User-Defined Components​

React Elements​

👉 You Do - Identify the React Elements within the JSX of the "React To-Do" sandbox so far (1 min)​

HTML/Component Hierarchy​

5. How a React App is Loaded and Renders​

High-Performance Rendering of Components​

❓ Review Questions - Components (2 mins)​

6. Designing User Interfaces Using Components​

7. Let's Define a Component​

Define a ToDoList.jsx Module​

Note: Importing the React Library is No Longer Necessary​

Stub up and export the Function Component​

Update <App> to Render the <ToDoList> Component​

8. 💪 Practice Exercise: Define and Render Another Component (10 mins)​

9. Install and Open React Developer Tools​

10. References​

Learning Objectives

Road Map

Videos

1. What is React?

2. Why Use React?

3. Creating a React App

`npx create-react-app <app name>`

CodeSandbox Starting React App

React Apps Are 100% JavaScript

Modern JavaScript

❓ Review Questions - React (1 min)

4. Components

What Are Components?

User-Defined Components

React Elements

👉 You Do - Identify the React Elements within the JSX of the "React To-Do" sandbox so far (1 min)

HTML/Component Hierarchy

5. How a React App is Loaded and Renders

High-Performance Rendering of Components

❓ Review Questions - Components (2 mins)

6. Designing User Interfaces Using Components

7. Let's Define a Component

Define a `ToDoList.jsx` Module

Note: Importing the React Library is No Longer Necessary

Stub up and export the Function Component

Update `<App>` to Render the `<ToDoList>` Component

8. 💪 Practice Exercise: Define and Render Another Component (10 mins)

9. Install and Open React Developer Tools

10. References