A Beginner's Guide: Essentials of React

React is one of the most widely used JavaScript libraries in developing User Interfaces (UI). React offers several features and benefits that make it stand out in the software development industry. To be a Good React Developer, it is important to know the essentials of React.

The goal of this article is to educate on the fundamentals of React. We shall be looking at the following important topics:

• What is React?
• Evolution of React.
• Structure of React.
• Feature of React.
• Benefits of React.

Ready to learn? Let's get started.

What is React?

React is a JavaScript library used in developing interactive user interfaces. React can also be used to develop Single Page Applications (SPAs), hence, increasing app performance.

Initially developed to serve as a frontend JavaScript library, React has over the years evolved and can now be used to develop server-side rendering as well as mobile applications. For instance, React Native is used to develop iOS and Android mobile apps.

Evolution of React

Jordan Walke—a software engineer at Facebook now known as Meta—developed React. Jordan Walke initially created a prototype called 'FaxJS'. FaxJS was first deployed to Facebook News Feed in 2011. In 2012, Facebook acquired Instagram and later on, deployed FaxJS to Instagram.

On May 2013, React was officially launched and it became open-source at the JSConf in the US. Maintained by Facebook (now Meta), React is used to create interactive web interfaces.

On February 2015, at the React Conference, Facebook announced the creation of React Native, which later became open-source in March 2015. React Native is used in developing iOS and Android applications.

On April 18, 2017, Facebook announced a new set of algorithms for rendering known as React Fiber. This innovation improves on the former algorithms known as 'Stack'. The Stack was slow in rendering dynamic changes. Meanwhile, with Fibers, the structure of the page is broken into segments that make it easy to maintain and update independently.

Structure of React

In this section, we shall be looking at the structural composition of React. We'll follow the officially recommended process of creating React app ready for development. Let's get started.

The official doc of React recommended using Create React App when learning React or creating a new single-page app. Example:

 C:\Users\Username\Desktop\project_folder>npx create-react-app my-app

After you've created your react app, your project should look like the below file structure.

my-app/
    node_modules/
    public/
        favicon.ico
        index.html
    src/
        App.css
        App.js
        App.test.js
        index.css
        index.js
        logo.svg
    .gitignore
    package.json
    README.md

Now, let's explore the above files and folders and know their uses.

node_modules folder

This folder contains all packages and dependencies that your project required. As you install these dependencies and packages, they are downloaded and copied into the node_modules folder. Note that it is recommended not to commit this folder to your version-controlled repository as it is too large.

public folder

The public folder contains the index.html file where you can set your page title and meta tags. You can add other assets in the public folder such as stylesheets, scripts, images, and fonts.

Take note of the following:

• Webpack does not process the public folder.
• Use an environment variable called PUBLIC_URL to reference assets in the public folder. For instance, use it like this in your index.html file:

<link rel="icon" href="%PUBLIC_URL%/favicon.ico />

src folder

The src folder contains files that are processed by Webpack—a JavaScript tool commonly used by React to bundle and manage dependencies. All JavaScript files and CSS files must be inside the src folder for Webpack to see and process them.

Default files in the src folder include App.js, App.css, App.test.js, index.js, index.css, and so on. This folder is where you can also create components. Let's explore some of the default files.

• App.js—the root component that contains contents to be rendered. Although App.js can be replaced or renamed.
• App.css—the file that contains styles for the App.js component.
• App.test.js—the default file where you can conduct basic tests for your app.
• index.js—a JavaScript file that renders our main component.
• index.css—the file that contains general styles for your project.

Note that index.html in the public folder and index.js in the src folder, must not be changed for the project to build. They must exist with their exact file names

.gitignore file

The .gitignore file specifies folders and files that Git should ignore and keep untracked.

package.json

This file contains in JSON format, important information about your project. The below lists are some of the important information in the package.json file:

• name—the name of your project. It must be less than or equal to 214 characters
• version—the current version of your app
• dependencies—sets of packages and their version
• scripts—sets of node commands we can run.

Readme.md

This is a markdown file that contains the project summary and instructions.

Features of React

React is made up of amazing and unique features. These features are what made React to be popular, easy to read, and maintain. Let's examine some of the major features of React.

Components

Components are pieces of independent and reusable codes used to create user interfaces. Components are JavaScript functions that return HTML elements. Components make it easy to read and maintain React codes. They also enable fewer codes to be written as they are reusable i.e. can be used in several parts of the application. App.js is an example of a component. See the image below.

JavaScript Syntax Extension

JavaScript Syntax Extension (JSX) also refers to the JavaScript XML is a JavaScript feature that allows us to write HTML elements in JavaScript codes. The below codes is an example of JSX.

const = listItems =  {
    <ul className="listItems">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
    </ul>
}

Babel library—a JavaScript compiler—transforms the HTML elements into plain JavaScript. The significance of JSX is that it simplifies JavaScript codes making them easy to read, especially for someone familiar with HTML.

Props

Props in React stand for properties. They are arguments passed into React components just as HTML attributes.

<img src="./image.jpg" width="100" height="150">

The above code is an HTML image tag that contains some attributes–src, width, and height. These attributes determined how the image is rendered. The same goes for Props. They are functional arguments passed to components. Props are read-only as they can't be modified. Let's see a simple example of props.

<Car brand="Toyota">

In the above code, the Car element has an attribute–brand.

Function Car(props){
    return(
        <h1>The Car brand is {props.name}</h1>
    )
}

export default Car;

Next, to render our attribute, the Car component receives an argument–props—which can be any name of your choice—as seen in the codes above.

In essence, props store data that is accessed by children of React component.

States

States in React, are objects that store data or information about the component. Unlike props, states are mutable—they can be modified upon user request. When a state is modified, React re-renders the component on the browser. Let's see an example of a state.

import React from "react";

class Car extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            brand: "Toyota",
            model: "Mustang",
            color: "Red",
            year: "1964"
        };
    }

    changeBrand = () => {
        this.setState({brand: "Honda"})
    }
    render(){
        return(
            <div>
                <p>The Car brand is {this.state.brand}</p>
                <button onClick={this.changeBrand}>Click</button>
            </div>
        );
    }
}

export default Sate;

The above codes display the screenshot below

When a user clicks the button, Toyota gets updated to Honda as indicated in the codes.

Take note of the following about states:

• The State object can store many properties as you like.
• The State objects are mutable i.e. they can be modified based on user request.
• The setState method is used to change the state object.

React hooks

Hooks are functions that give access to states and other React features. With React hooks, class components are not needed.

Hooks are a new addition to React in version 16.8. Let's examine some of these React hooks.

useState Hook
This is functional hooks that keep track of a state. The useState hook accepts an initial value and gets updated upon user request.

import { useState } from 'react';

function App(){

    const [count, setCount] = useState(0);

    const handleClick = () => {
        setCount(count + 1)
    }

    return (
        <>
            <p>You click me {count} times</p>
            <button onClick={handleClick}>Click me</button>
        </>
    )
}

export default App;

The above code displays the screenshot below

This example of useState hook accepts an initial value–0, and it increases the value when a user clicked the button.

useEffect hook
The useEffect hook performs side effects such as fetching data from a backend server, updating the DOM, timers, and so on. The useEffect hook accepts two arguments–function and dependency. Although the second argument is optional.

import { useEffect } from 'react';

useEffect(() => {
// Runs after every rendering
}, [])

The above is an example of a useEffect hook structure with a dependency as an empty array.

Other React hooks include

• useContext
• useRef
• useReducer
• useCallback
• useMemo
• Custom Hooks.

Benefits of React

The benefit of React is enormous, as it served several purposes. Let's examine some of the benefits.

• Web app development: React can be used to develop websites with backend servers, using React frameworks. Some of these frameworks include Next.js, Gatsby, Remix, and amongst others.
• Mobile app development: React can be used to develop mobile applications–iOS and Android mobile apps–using React Native.
• Single Page Applications: React can be used to create SPAs. SPAs render dynamic content on a single page, which reduces loading time and increases performance.
• Highly demanded: React is the most widely used JavaScript library in developing interactive user interfaces. Hence, the high demand for React developers.
• Easy maintainability: React apps are developed using independent components. These components serve as JavaScript functions but work in isolation and return HTML elements. As a result, making React easy to read and maintained.
• Reusability: React components are reusable. In other words, React components can be used in several parts of the applications, thereby reducing the amount of code to be written and enabling quick development.

In summary, this article has helped us to understand the essentials of React. It is important to know the fundamentals of React so as to build a solid foundation in becoming a professional React developer. In this article, we looked at what React entails, its history, structure, features, and finally, the benefits of React. It's not over yet, explore in-depth of React with more practice and grow your expertise and experience.

If you find this article useful, hit the like button and follow me on Twitter and LinkedIn for more insightful and progressive tech conversation.