React 18 tutorial

React 18 tutorial

In this tutorial, we'll go through the fundamentals of React. React may be used to create UIs with re-usable components for maximum reusability and a virtual DOM for improved performance.

We'll go through the fundamentals of React, such as components, state, and props.

But what exactly is virtual DOM?

The virtual DOM (VDOM) is a technical principle in which an ideal, or "virtual," version of a user interface (UI) is stored in memory and synchronized with the "actual" DOM via a library such as ReactDOM. This is known as reconciliation.

React is the most used front-end library for creating user interfaces today. Throughout this tutorial, we'll go through the fundamentals of React.js by building a React application from the ground up, step by step. We will concentrate on React's key functionalities. After you've mastered the fundamentals, you'll be able to dig into more advanced material with ease.

You will learn the following by following this tutorial:

  • How to get started with React using a <script> tag;
  • How to include React in a Django template;
  • What's a React component;
  • How to create React components;
  • How to use the ReactDOM library to mount your React app into the DOM;
  • How to handle data in React;
  • The difference between props and state in React;
  • How to use props;
  • How to use state;
  • How to mutate or update state in React etc.

React provides a set of modern features such as:

  • A component based architecture;
  • Reusable components;
  • Stateful and stateless components;
  • And virtual dom.

Getting Started with React

Since we are getting started with React, we are not going to use complicated tools such as create-react-app (In fact this tool was created to make creating React applications less complex without worrying about Webpack and complex front-end tooling), instead we'll use a simple setup i.e the old way of using libraries in front-end web development.

Start by creating a basic HTML page:


<html>

<head>

<title>React Tutorial</title>

</head>

<body>

</body>

</html>

Now use the <script> tag to include React and ReactDOM libraries. In the <head> of your HTML page, add:


<script  src="https://unpkg.com/react@18/dist/react.min.js">  </script><script  src="https://unpkg.com/react-dom@18/dist/react-dom.min.js">

</script>

You also need to include Babel:


<script  src="https://unpkg.com/[email protected]/babel.min.js"></script>

We are using the unpkg.com service which allows us to import NPM modules as normal JavaScript scripts without using npm and related modern front-end tools to install and use the dependencies.

Since React makes use of modern JavaScript features, we use Babel which is transpiler that transpiles the ES6 features to JavaScript features that can be interprited by most existing browsers.

We also use Babel for transforming JSX templates (used by React to include HTML in JavaScript) into JavaScript.

We are loading React from a <script> tag, you can also use modern tools like npm and the import/require system when building complex apps.

Next, we need to add a root <div> where we'll mount our React application.

Inside the <body> element, add the following HTML:


<div  id="root"></div>

Also, inside the <body> tag, add the following <script> where we're going to add the React code:


<script  type="text/babel">

/* React code */

</script>

At this step, you can install an http server so you can run the example on your browser or simply use codepen.

Including React in Django Templates

In this section, we'll see how to include React in Django templates. Django has a powerful template system that makes use of inheritance to reduce repetition and augment code reuse so let's start by creating the base.html template inside the templates folder and add the following HTML:


{% load static %}

<!doctype html>

<html>

<head>

<meta  charset="utf-8">

<meta  http-equiv="X-UA-Compatible"  content="IE=edge">

<title>Django & React Tutorial</title>



<meta  content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"  name="viewport">

</head>



<script  src="https://unpkg.com/react@18/dist/react.min.js">  </script>



<script  src="https://unpkg.com/react-dom@18/dist/react-dom.min.js">

</script>



<script  src="https://unpkg.com/[email protected]/babel.min.js"></script>



<body>



<noscript>You need to enable JavaScript to continue with this application.</noscript>



<div  id="root"></div>

{% block inner %}

{% endblock %}

</body>

</html>

Create an index.html template that extends the base.html template and add the following content:


{% extends "base.html" %}



{% block inner %}

<script  type="text/babel">

/* React code here */

</script>

{% endblock %}

React Components

In React, you build your UI as a hierarchy of components. A component controls a part of the UI and It's simply a JavaScript/ES6 class that extends the base React.Component. For example, this is a simple HelloWorld component:


class  HelloWorld  extends  React.Component {

render() {

return  <h1>Hello World!</h1>;

}

}

The component simply renders a <h1>Hello World!</h1>. We use the render() method which is provided by the parent React.Component. The render() method should return what your component needs to render on the screen.

In React, you can use different types of components such as parent and child components. You will also make use of smart and dump components. A smart component maintains state while a dump component doesn't maintain any state.

Components have many benefits. The most important benefit for a developer is code-reuse i.e you can reuse your components in the same app or throughout multiple apps.

Using ReactDOM

Now that we have a basic React component that renders something on the screen and a simple HTML page, we need to mount the simple React application in the HTML body of our page. For this matter, we need to use the ReactDOM library.

Before the closing </body> tag, add the following code within a <script> tag:


<script>

ReactDOM.render(

<HelloWorld  />,

document.getElementById("root")

);

</script>

We use the render() method to mount the our top-level and only component into the root <div> which we grab using the document.getElementById("root") method.

This will be enough to mount our React component. You should now see a Hello World on the screen.

Handling Data in React

You can make use of data in React using two forms: props and state.

Props are used to communicate or pass data between components and they are external to the component while state is used to maintain the internal state of a component.

A React component can change its internal state directly but not the props.

Understanding React Props

Props allow you to pass data to a component which allows for maximum re-usability of the component.

Let's, for example change our previous HelloWorld component to be more dynamic by rendering a message that's passed via a prop instead of always rendering Hello World.

We can pass a message prop to the component using the following syntax:


<HelloWorld  message="Hello React"  />

The prop is called message, you can use any meaningful name for your prop. The message prop takes a Hello React value.

Now, we need to change the component to handle the prop:


class  HelloWorld  extends  React.Component {

render() {

return  <h1>  {this.props.message}</h1>;

}

}

We access the props in our component by using the this.props object. Since this is JavaScript code we include it inside curly braces which tells JSX to interpret and render the result.

As you can see this allows us to use the component to render different messages instead of just the Hello World message.

Understanding React State

A component in React can maintain its own internal state using a state object. The component that maintains a state is called a smart component.

Let's now add state to our previous component:


class  HelloWorld  extends  React.Component {

constructor(){

super();

this.state = {

message:  "Hello React!"

};

}

render() {

return  <p>{this.state.message}</p>;

}

}

In the constructor of the component, we simply assign a JavaScript object to this.state to initialize it.

The message is now a part of the internal state of the component.

We can access the state using this.state.

Mutating/Changing State in React

To mutate or change state in your React component, you simply need to use the this.setState() method. For example:


this.setState({

message:  "Hello Again"

});

Conclusion

In this tutorial, we've quickly gone through the basic concepts of React.

  • Date: