Lesson 1 - Introduction to React

Welcome to the first lesson of the online course on JavaScript (JS) library React / React.js In today's tutorial, we will first introduce the library and then try to create our first simple application.

Introduction to React

React is a JS open-source library from Facebook for creating a user interface (UI). Unlike various complete frameworks (eg Angular), it focuses on one specific area, and if we look at it from the point of view of the classic MVC architecture, it forms just and only a view, ie a view layer that presents data to the user. And you've probably noticed that it's currently one of the most popular and sought-after libraries with a large community of developers.

Properties

At the beginning, it is also important to say something about aspects of this library and the properties of the applications created in it. The basic building blocks are called components, which are different reusable HTML elements with encapsulated functionality, which is formed by folding a complex UI application. These components then have their own properties (props) and manage their internal state. This declarative way of working with application data leads to more predictable behavior and easier debugging, and this may be one of the reasons why this library is so popular. Thanks to this, React also gets along well with other similarly focused libraries such as Redux.

Use

Because React is a specifically targeted library, it is used in practice in application development in combination with other libraries with very different approaches and different architectures. React then always takes care of rendering the UI within these uses. To give you a better idea, here are a few examples:

Frequent use is the creation of so-called single-page applications (SPA)
Another option is to use React for server-side rendering of web pages (server-side rendering), where it is used, for example, in combination with the Next.js library in the Node.js server environment.
Furthermore, we can use it, for example, in combination with the Gatsby library in the rendering of static content-oriented web pages, where it relies mainly on the speed of pre-rendered HTML and CSS.
Last but not least, we should not forget the React Native project for creating native mobile applications using JS and React

You can see for yourself that there are many possibilities. In this series, I would like to focus mainly on the React library as such and add other functionality using only pure JS. Therefore, for simplicity, we will also focus on the environment of web applications.

Requirements

Before we start working with the React library, it is necessary to mention the required knowledge that you should have, as well as the tools we will work with. To all of the tools, we have courses on the network here, so if you don't know any of this, please take the relevant course first.

Knowledge

Surely you have already noticed that we will use JavaScript as a programming language. And that means mostly pure JS plus, of course, functionality from the React library. In addition, we will use the latest tweaks from ES6 +, the "new" version of JavaScript. Otherwise, you certainly can't do without knowledge of HTML and CSS when creating a web UI.

Tools and IDE

First of all, I will state that later in the tutorial we will use tools related to Node.js for easier creation of applications, which means that it is necessary to have it installed.

I would also recommend for beginners to use some reasonable IDE, such as WebStorm or a text editor with advanced features such as Visual Studio Code. This will generally make your work much easier when programming.

Now we should have everything we need to build our first application. So let's get to work!

The first React application

So let's start with creating a really simple web application using the React library, and what's more appropriate than the proven "Hello World"?

Index.html

Since this is a web page, we will create a standard index.html file and write the code in it:

<!DOCTYPE html>
<html>

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

    <title>Hello World!</title>

    <!-- Loading React.js -->
    <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>
</head>

<body>
    <!-- The root of our component structure -->
    <div id="root"></div>

    <!-- JS code of our application using the React library -->
    <script>
        // React component definition
        class HelloWorld extends React.Component {
            render() { // Component rendering
                // The rendering returns an element <h1> with text "Hello World"
                return React.createElement('h1', null, 'Hello World!');
            }
        }

        // Rendering an instance of a component into an HTML structure
        ReactDOM.render(
            React.createElement(HelloWorld), // Component creation
            document.getElementById('root')  // Connection to the root of the application
        );
    </script>
</body>

</html>

And that's all friends. Now when you open the file directly in a web browser, you'll see one big <h1>Hello World!</h1> heading on the page.

I have even documented the code for you. As I wrote in the introduction, the basis of everything are components and the principle of building a page is very simple:

We will load the React JS library into the page. It is stored here in the online storage, so we did not have to download anything
We will create the root (entry point) of our component structure
Using tools from the React library, we will create our own component for the title
We draw the component to our root on the page

JSX

But that's not all from today's lesson. Also, don't you like the relatively impractical combination of HTML and JS with the need to write the long name of the React.createElement() function everywhere? It is true that the name of that function could be abbreviated, for example, by storing const e = React.createElement(); but that's still not it ...

It would be best to effectively combine the JS code with HTML in some way, and that's exactly what JSX (JavaScript + XML) is all about! This allows us to write HTML directly into JS, not as a classic string, but really as HTML. In addition, React again understands it nicely, and overall it will make it easier for us to create HTML elements and components themselves.

Of course, such a combination will no longer just work directly in the browser, which simply does not support this behavior. However, this does not mean that we cannot take the help of another library, such as Babel, which will provide us with a translation of our JSX into a browser-friendly form, even directly when the page loads.

Index.html

Let's show this principle on the previous simple application, which we can easily redesign to use JSX. The code in the index.html file will then look like this:

<!DOCTYPE html>
<html>

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

    <title>Hello World!</title>

    <!-- Loading React.js -->
    <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>

    <!-- Load Babel compiler for JSX -->
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>

<body>
    <!-- The root of our component structure -->
    <div id="root"></div>

    <!-- Babel code of our application with JSX support and using the React library -->
    <script type="text/babel">
        // React component definition
        class HelloWorld extends React.Component {
            render() { // Component rendering
                return <h1>Hello, world!</h1>;
            }
        }

        // Rendering an instance of a component into an HTML structure
        ReactDOM.render(
            <HelloWorld />, // Component creation
            document.getElementById('root')  // Connection to the root of the application
        );
    </script>
</body>

</html>

Isn't it much nicer? And as before, just open the file directly in a web browser and we will see the result immediately.

The source code in this article is not suitable for production environments due to the need to constantly translate JSX and development-only versions of the React library.

That's all from today's introductory tutorial.

Next time, in lesson First application in React, we'll show you an even better application design using JSX, and we'll also start creating another web application using the React library.

Article has been written for you by Vlasta

User rating:

No one has rated this quite yet, be the first one!

Passionate reader, student, coder and writer.

Activities