ZetCode

React.js introduction

last modified July 13, 2020

React.js introduction introduces the React.js UI library. We provide some basic definitions and create two simple React.js applications.

React.js

React.js is a declarative, component-based JavaScript library for building user interfaces. React.js allows to build encapsulated components that manage their own state. These components can be used to create complex UIs.

React abstracts away the DOM from the developer and offers a simpler programming model and better performance.

React.js is used to create single-page web applications. In addition, mobile applications can be created with the React Native extension. React.js is created

React.js JSX

JSX, or JavaScript XML, is an extension to the JavaScript language syntax. JSX produces React elements. With JSX we write HTML/XML-like structures and JavaScript code. Later transpilers such as Babel will transform JSX into actual JavaScript code.

React applications do not require using JSX; they can be created in pure JavaScript.

React.js simple example

In the first example, we create a simple React application. The application is created without any tooling. The React library is simply included with the <script> tags.

index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Simple React.js application</title>
  </head>
  <body>

    <h2>Simple React.js application</h2>

    <div id="show_button_container"></div>

    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>

    <script src="show_button.js"></script>

  </body>
</html>

This is an HTML page, where we use a React component. The component is a simple button which shows an alert dialog window. 

<div id="show_button_container"></div>

We place our React component inside this div element. 

<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>

We load the React.js library. When we deploy the application, we use production React library (react.production.min.js). 

<script src="show_button.js"></script>

We load our component.

show_button.js
'use strict';

const e = React.createElement;

class ShowButton extends React.Component {

  render() {

    return e(
      'button',
      { onClick: () => alert("Hello there!") },
      'Show'
    );
  }
}

const domContainer = document.querySelector('#show_button_container');
ReactDOM.render(e(ShowButton), domContainer);

This is our show button component. 

const e = React.createElement;

class ShowButton extends React.Component {

  render() {

    return e(
      'button',
      { onClick: () => alert("Hello there!") },
      'Show'
    );
  }
}

A new React element is created with the createElement() function. The element is a class-based component. 

const domContainer = document.querySelector('#show_button_container');
ReactDOM.render(e(ShowButton), domContainer);

A component is rendered with the render() function. The render() function takes the component and the container where it is rendered as parameters.

React.js application created with create-react-app

The create-react-app is a command-line tool for creating modern React applications. The tool provides scaffolding, scaling, linting, or optimizing services for React applications. 

$ node --version
v13.0.1

To create a React application, we need to have Node.js installed. 

$ npx create-react-app first

We create a new React application with the npx create-react-app command.

Note: The create-react-app can takes minutes to build a React.js application template. 
$ cd first

We go to the newly created directory.

index.js
import React from 'react';
import ReactDOM from 'react-dom';

class Test extends React.Component {

  render() {
    return <p>Hello there!</p>;
  }
}

ReactDOM.render(<Test />, document.getElementById('root'));

We create a simple component which shows some text. The component is rendered wih the ReactDOM.render() function.

Note that by default, create-react-app generates several other files such as logo.svg, App.js, or index.css. For now, we will not need them and they can be safely removed.

public/index.html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>React App</title>
</head>

<body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root"></div>
</body>

</html>

This is the home page of the application. The component is rendered into the container with the root id. 

$ npm start

We start the development server and navigate to the localhost:3000 to see the output.

In this tutorial, we have introduced React.js library. We have created two simple React applications.

List all React.js tutorials.