React Introduction

Introduction

This section aims to provide you with all you need to know to get started with React, to feel the power of a frontend framework, and to help you create highly scalable React applications. Before we jump into it, one question must be answered.

Learning Outcomes

By the end of this lesson, you should be able to:

• Understand the benefits of learning React
• Explain what JSX is
• Explain what a React component is
• Explain the difference between a functional and class component
• Explain how you would structure your application into components
• Explain what create-react-app does

Why React?

React is one of the most powerful, widely used frontend frameworks.

The landscape for frontend frameworks has been changing a lot over the last few years, so it is understandable to be worried about choosing the “wrong” one. This article shows the recent development of frontend frameworks well. Once you start diving deeper into a framework, you will begin to love it. It makes your code easily scalable, more readable, and possibly a thousand times more efficient (just our modest estimation).

Just to name a few reasons on why to learn React.js:

• Reusability of components
• Well supported due to its popularity
• React is not opinionated, which means that it won’t force you to follow any specific design patterns, project organizational structure, or logic. It’s all up to you.
• Smaller learning curve, especially when you already have a good grasp of JavaScript and HTML from our previous lessons.

If you need more convincing, the recent 2022 StackOverflow Developer Survey should be reason enough to get excited about learning React. Still unsure? Check out this article.

Convinced and excited? Great, because it’s going to change your life! Let’s dive right into it.

Components

Applications built with React are made with (reusable) components. Components are your “building blocks.” To gain confidence using React, you should learn to divide your application or project into these separate components. The following picture gives you an idea of how to do that with a very basic app.

For example, this simple website could be divided into the following components:

• App, which represents your main application and will be the parent of all other components. This would be the larger box surrounding the smaller ones.
• Navbar, which will be the navigation bar.
• MainArticle, which will be the component that renders your main content.
• NewsletterForm, which is a simple form that lets a user input their email to receive the weekly newsletter.

In React, each component is defined in an ES6 (ECMAScript 2015) module. ES6 introduced the import statement which allows you to import code from one module into another module. This allows us to write each component in a separate file and import all components into the parent component like so:

import ExampleComponent from "./components/ExampleComponent"

In our case, that parent would be App.js.

In the beginning, it might be a little bit difficult to figure out the best component structure, especially when state and props come into play. This topic will be discussed in the following sections. For now, don’t worry too much about the component structure. Understanding of best practices comes with experience. React components, in general, usually have parent and/or child components. This system of structuring your applications helps to keep your code organized and makes it easy to keep track of your components’ relationships with each other.

To give you an example of a basic component, see the following code:

import React, { Component } from 'react'

class App extends Component {
    constructor() {
        super()
    }

    {/* Javascript functions can be written here */}

    render() {
        return (
            <div className="App">
            Hello World!
            </div>
        )
    }
}

export default App

Does the code look foreign? Don’t worry, it isn’t as complicated as it looks. Let’s walk through it step by step.

import React, { Component } from 'react';

With the above import statement, we are importing React and Component from the React library, which allows us to create a class component. If you are wondering why we have to wrap Component into curly brackets and not React, this is due to the way they are exported from the react module. Default exports are imported without curly brackets; everything else must be wrapped in curly brackets. Don’t worry about this too much as we will get plenty of exposure to import and export statements soon.

class App extends Component {
    {/* Some logic we haven't yet talked about. */}
}

Secondly, we are declaring the class component, App. We do this by extending the React class Component, which we imported at the top of the file. In doing this, we are essentially “Reactifying” our App component by giving it all of the fun methods and properties every React component should have. One thing to notice is that React components, like all classes and object constructors, should always be declared with a capital letter at the beginning (PascalCase). This is a naming convention used by most developers and recommended by the React core team at Facebook.

constructor() {
    super()
}

Next is the constructor. A constructor is not obligatory in a class component, but you will most likely encounter one because it becomes important when concepts like inheritance and state are involved. It is included here so you can get used to seeing it. You will usually see developers passing props as an argument to the constructor and also to the super() call, which must be called in any React constructor. Props will be discussed further in the next lesson. The idea here is to simply expose you to some terminology that we will be using in the future.

{
  /* Some logic we haven't yet talked about. */
}

This syntax may look weird at first, but it is nothing more than a simple comment. In React, you write comments within curly brackets and /* */. There are sections of React components where the comments we are used to (denoted by //) are permissible. For now, we’ll leave that as an exercise for you.

render() {
    return (
        <div className="App">
        Hello World!
        </div>
    )
}

The most unfamiliar code is likely the render() function, which returns something that looks like HTML, but is actually JSX. JSX is an HTML-like syntax that is “transpiled” (or converted) into JavaScript so a browser is able to process it. One of the primary characteristics and features of React is the ability to combine JavaScript and JSX. One thing you should know about JSX is that you can’t use some JavaScript protected words as html attributes anymore, such as class, onchange, or for. Instead of class you will need to use className, instead of onchange you write onChange, and instead of for, you must use … wait for it … htmlFor. All attributes in JSX are written in camelCase and some have their names changed completely to avoid the transpiler getting too confused about whether you’re assigning a label for an input, or instantiating a for loop. You should be fairly familiar with the camelCase naming convention from the naming of variables in JavaScript.

The render() function you see is the most used React “lifecycle” function (more on that in an upcoming section). The only thing you should know for now is that every React class component needs a render function, which returns one top-level JSX element. When you want to return elements nested within one another, they need to be wrapped in a single parent element. For example:

// BAD - will throw an error!
render() {
    return (
        <h1>Hello world</h1>
        <h2>Welcome to my React page!</h2>
    )
}

// GOOD
render() {
    return (
        <div>
            <h1>Hello world</h1>
            <h2>Welcome to my React page!</h2>
        </div>
    )
}

Finally, to be able to reuse this App component we created in other files of our project, we have to export the component. In our example, we export the component as the file’s default export:

export default App;

If you have multiple components in one file, you could export each component separately by adding the export keyword before the declaration of the component, or you could export them all at once using this syntax:

export { ComponentA, ComponentB, ComponentC };

However, when you import them, they will each need to be wrapped in curly braces. If you export a component as a default, you can import it without the curly braces. If you export multiple components, you have to import them inside of curly brackets.

If you’re confused about this, take a minute to read up a little bit on ES6 imports and exports.

So far, so good! We have already learned a lot about components in React. Using class components is one of two ways of defining components in React. The other, more modern, approach is to define the component as a function (like a factory function).

A basic functional component looks something like this:

import React from 'react';

function App() {
  return <div className="App">Hello World!</div>;
}

// OR (arrow-function syntax)

const App = () => {
  return <div className="App">Hello World!</div>;
};

// OR (implicit return)

const App = () => <div className="App">Hello World!</div>;

export default App;

As you can see, there are a few differences between functional and class components. With functional components:

1. We don’t have to import and extend “Component” from React.
2. We don’t need a constructor.
3. We don’t need the render function, instead we put the return statement right at the end of the function body.

There are more differences which we will encounter when discussing props, state, and lifecycle methods, but it’s enough for you to understand this much for now.

For further understanding of React components, this short article provides a great overview.

For further understanding of the difference between functional and class based components, read this article. They discuss concepts like state and lifecycle methods, which we haven’t talked about yet, so don’t spend too much time getting hung up or trying to memorize the differences. However, it may be helpful to bookmark this page because it will prove useful later on in the course when we do learn about them. Rest assured, we will expand on the question of “which type of component should I use?” later.

Create-react-app

Developers at Facebook came up with a great tool called create-react-app, which sets up a complete React application for you. By running one command, it does all the necessary setup and configuration for you to immediately start working on your project.

If you want to see all the things we have discussed in action, go ahead and run npx create-react-app my-first-react-app in your terminal, cd into the project by typing cd my-first-react-app, and then open it in your text editor of choice. If you want, you can view the project in the browser via the command npm start.

Index.js and App.js

Two of the most important files create-react-app includes for you are index.js and App.js. index.js is the “entry point” of your application by default. Open up your index.js file and check out this:

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

In short, this line of code tells React to render the App component into the DOM, and more specifically, into the element with the id “root”. Every create-react-app project has a root div, which is visible in the index.html file in your public directory. If you decide to name your main application component something other than App.js, make sure to change its name in index.js as well.

If you want to get a better understanding of how create-react-app works and which files it creates for you, make sure to check out this article and watch this video to really understand the file system create-react-app sets up for you.You can also look at more aspects of your application’s performance by learning about ReportWebVitals here.

React Developer Tools

React Developer Tools is an extension to the browser developer tools which allows you to inspect React components that build the page. It helps you to check and edit the React component tree as well as props, state, and hooks for each component. This article will show you how to install React Developer Tools and some basic debugging you can do with it. And here is the link to React Developer Tools Chrome Extension.

Assignment

Additional Resources

This section contains helpful links to other content. It isn’t required, so consider it supplemental.

• This video series really provides it all. Watch it for a greater understanding of the most important React concepts.
• This video shows you how to set up a React application without using create-react-app.
• This video by Kent C Dodds explains how React works under the hood.

Knowledge Check

This section contains questions for you to check your understanding of this lesson. If you’re having trouble answering the questions below on your own, review the material above to find the answer.

• Why should you learn React?
• What is JSX?
• What is a React Component?
• What is the difference between a functional and a class component?
• How should you structure your application into components?
• What does create-react-app do?
• Instead of the DOM tree, what is displayed when you inspect an element using the Components tab provided by React Developer Tools