Getting Started with React

So far, we have laid a solid foundation for understanding full stack web development using modern software stacks. Hopefully, you have already set up a React development environment on your local machine. If not, you can go back to Chapter 1, Getting Full Stack Ready with React and Flask, and revisit the Setting up a development environment with React section.

In this chapter, we’ll systematically start to introduce you to the world of React in a subtle way. You will learn a bunch of cool concepts and techniques that will help you develop intuitive user interfaces that enable users to interact with your web application. You will learn how to spring up your first React project without the hassle of a complex configuration and understand the basic directory structure required for every React project. Then, you’ll learn how to use ES6 features in React.

Components are the building blocks of any React application. In this chapter, you will...

Technical requirements

The complete code for this chapter is available on GitHub at: https://github.com/PacktPublishing/Full-Stack-Flask-and-React/tree/main/Chapter02.

Exploring a React project directory structure

In a moment, we’ll set up a React application project. There are many ways to create a React application. You could use the Create React App tool to generate a boilerplate application with no build configurations. This doesn’t require you to have complex configuration knowledge.

You can simply focus on the implementation of your application straight up. This is what we’ll be using in this book. And if you are open to exploring Vite (https://vitejs.dev/), it is another next-generation frontend tooling for rapid React application setup.

The other way of creating a React application requires knowledge of Webpack and Babel configurations. Now, without further delay, let’s dive into creating our React project application. You are expected to follow along.

Open your terminal and type the following command:

npx create-react-app frontend

You will get the following output:

Figure...

Arrow functions in React

Arrow functions provide a more concise and readable syntax for defining functions in JavaScript. Arrow functions have become a widely used feature in React development for obvious reasons: shorter syntax and implicit return. You will have a better understanding of what these mean in a moment.

In traditional JavaScript, you would have to define a regular function that adds two numbers together like this:

function addNumbers(a, b) {    return a + b;
}

Not bad, right? But arrow functions can make this even simpler and more elegant. Check this out:

const addNumbers = (a, b) => {    return a + b;
};

Pretty cool? The function keyword is replaced with a funky-looking arrow, =>, and you can omit the curly braces and the return statement if your function is just a one-liner:

const addNumbers = (a, b) => a + b;

Basically, you define arrow functions by following this syntax rule:

const functionName...

Understanding what destructuring is

Destructuring is simply a JavaScript expression that ensures you are able to extract multiple values from arrays or properties from objects into separate unique variables. Destructuring is one of the awesome JavaScript ES6 features used in React to manage data.

ES6 was a major milestone in the effort to improve standards in the JavaScript language. Destructuring takes extracting data from arrays and objects to a new concise level. Prior to ES6, you could declare and extract data from an array this way:

const speakers = ["John", "Walke", "Dan", "Sophie"];const firstspeakerName = speakers[0];
const secondspeakerName = speakers[1];
const thirdspeakerName = speakers[2];
const fourthspeakerName = speakers[3];
console.log(firstspeakerName); // "John"
console.log(secondspeakerName); // "Walke"
console.log(thirdspeakerName); // "Dan"
console.log(fourthspeakerName); // "Sophie...

Default and named exports

As mentioned earlier, ECMAScript 2015, also known as ES6, was a major milestone in the effort to improve standards in the JavaScript language. Among the new features added were modules and the ability to use import expressions. Modules allow us to better organize our code base into logical units. Basically, modules could be a function or related functions designed to perform specific tasks. They make code reusability across projects easier.

In React, we use a default export to make component functions, variables, classes, or objects available to other component files. Only one default export is allowed per file.

For instance, the following code makes it possible to import a file from the Speaker component:

import Speaker from './Speaker';

The following code makes it possible to export the file to another component file:

function App(){
    return (
    <div>  …  ...

What is a React component?

A component is the core building block of any React application. Sometimes, you could perceive React as a JavaScript coated with some chocolate. Chocolate is sweet I guess, and so is React. Seriously, building a UI with vanilla JavaScript can be cumbersome. You can struggle with the expensive DOM dilemma!

The thing is, when working with vanilla JavaScript to handle the Document Object Model (DOM), it can get pretty expensive – both in terms of time and effort. Frequent DOM manipulation is high in non-React applications, which ultimately results in the slowness of website elements update.

The virtual DOM solved this problem in React. The DOM only updates what was changed, not the entire DOM tree. However, if you remember how you use functions in plain JavaScript, writing components won’t be a challenge. A function in JavaScript is a code block designed essentially to perform certain tasks.

The same applies to React components, which...

What are props?

Props are arguments passed to React functions and class components. If that is too techy, let’s break it down a bit. Basically, you use props to pass data from one component to another component. So, props refer to objects that store the value of attributes. This is similar to HTML when you pass a value to an attribute of a tag.

In the React world, props are used to customize and configure components and are passed from parent to child down the component tree. This means the parent component can only pass information to the child component. This is a unidirectional data flow concept in React. In essence, props are read-only, meaning that the component receiving them cannot modify their values directly.

Passing data as props

Let’s take a look at an example where props are used in React components. As we have discussed, props are used in React to pass information from one component to another. In the following snippet, we will explain how data is...

React state

State is a built-in object in React that is used to hold information about components. It is what is responsible for the interactivity of components. In the React application, state changes. When there is a change in the component state, React re-renders the component.

This change also impacts how the component behaves and renders on the screen. There are factors that can make the state change – for instance, a response to a user’s action or system-generated events. Props and state are twin features of React. While props essentially pass information from a parent component to a child component, state alters components’ internal data.

Let’s take a look at a search use case for the implementation of state in components. Anytime a user types something into an HTML search input field, the user intends to see this typed information, which represents a new state, displayed somewhere else in the application.

The default state is the blank search...

Summary

In this chapter, we discussed some of the core concepts in React applications. We started with the basic anatomy of a React project structure as generated by the Create React App tool. Some of the purposes of the files and folders were explained. We discussed some of the ES6 features, such as using arrow functions, destructuring, and default and named exports.

We also defined components as a core building block of any React application. Two types of components were discussed: class and function components. In addition, we discussed props and how to pass information in props. The unidirectional information flow in React was clarified. Finally, we discussed state as a way React manages the internal data.

In the next chapter, we’ll dive deeper into React application development by discussing some of the hooks available in React. This will expose us to some of the advanced topics in React.