React Introduction

October 16th, 2018by Yariv Katz

Lesson Plan

This lesson is intended to be an entry point for studying React. We will start by doing an hello world application, and understand how react works.

What is React

First lets understand what is React:

React is a user interface library - it is used to create blocks of ui component. a UI component can be the login form on the page, or the menu, or the header. When we create a page with React we now have to split the page to UI components.
React is open sourced and maintained by facebook
React knows when a ui component should be redrawn
React is unopinionated and is not a framework but a library, this makes react easily embeded even if not creating the page with react and just creating a single ui block with React.
If we do want to create an entire web app with React it's recommended to combine it with state library like Redux
React is open sourced from 2013 and the library is now used in production in many companies including facebook.

React hello world

Like any new technology, an hello world is required here. But lets first start by starting to think more React oriented. We need to seperate our views to block of UI. Our hello world app contain one page -> that page contains one ui block -> that ui block contains a header with hello world message. So our mind should start thinking: what is the current page we are building and what are the ui blocks in that page. Lets start by creating our application with regular JS. With regular js our app will look like so:

        
            <html>
                <head>
                    <title>
                        Hello world with JS
                    </title>
                </head>
                <body>
                    <div id="js-content"></div>
                    <script>
                        const h1 = document.createElement('h1');
                        h1.textContent = 'hello world';
                        const content = document.getElementById('js-content');
                        content.appendChild(h1)
                    </script>
                </body>
            </html>

In js to create an hello world app, we would create a new dom element of the tag we want to create, h1 in this example. We will then insert that dom element in the proper location in the dom. Now lets do the same app with React. Our hello world app will now look like this:

        
            <html>
                <head>
                    <title>
                        Hello world with JS
                    </title>
                    <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
                    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
                </head>
                <body>
                    <div id="react-content">
                    </div>
                    <script>
                        const h1 = React.createElement('h1', null, 'hello world from react');
                        ReactDOM.render(h1, document.getElementById('react-content'));
                    </script>
                </body>
            </html>

There are a lot of similartiy between the js part and the react part. First we included the React script, and the ReactDOM script which makes the following objects available to use as globals:
- React - create react ui components
- ReactDOM - connect react components to the DOM tree
In the react app we also create h1 tag but instead of creating it using document.createElement we are now using React.createElement. React.createElement API is a bit different, the first argument is the tag we are creating, the second is properties passed (we will talk about this later on), the third is the children of the tag, which in our case the tag contains a text node. To connect our component to the dom we use ReactDOM.render and specify the component we want to connect and where to connect it to. ReactDOM needs a react.createElement type as first argument, and as second argument where to place that component.

React.createElement

with React.createElement react knows how the ui component will look like. React.createElement has a bit more power then what we saw, we can actually nest a React.createElement inside a React.createElement. If we want in our react h1 we can create a nested span and inside it place our text, it will look something like this:

        
            const h1 = React.createElement(
                'h1', 
                null, 
                React.createElement('span', null, 'hello with span')
            );
            ReactDOM.render(h1, document.getElementById('react-content'));

This seems like a simple example, and perhaps doesn't look like much, but the meaning is far greater... Using this we can actually make a react element that creates a div and inside it nesting children and grandchildren and so on. A react element can be a complex component, and it could be entire blocks of UI components, like our login form or our header or menu. The React.createElement does not necesarly have to create dom elements, we can use it to create other complex React.createElement. When we create a block of UI using React.createElement we refer to this block as a React Component. So the ReactDOM.render gets as first argument a React Component created with React.createElement. We will talk about what we can do with a react component in future lessons but first lets address another problem... creating entire DOM tree by nesting React.createElement like we did would be brutally uncomfortable, and unreadable. How can we create our UI component DOM structure in a much readable format then React.createElement... Introducing JSX

JSX

JSX stands for javascript as XML. It's an extension to JavaScript, so on its own browsers will not know how to run it. JSX can be translated to React.createElement, but to do this we have to transpile our code using babel. The syntax of JSX is similar to HTML. To see how JSX is transformed using babel to React.createElement you can visit Babel REPL You have there a command line where you can type JSX code and see how it transpiles to React.createElement. Type the following:

        
            <h1><span>hello from jsx</span></h1>

We have to be carfull though... Notice that under the hood, babel is using React.createElement, this means that we have to make sure that we have React available to use before using JSX syntax.

Lets modify our application to use JSX:

        
            <html>
                <head>
                    <title>
                        Hello world with JS
                    </title>
                    <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
                    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
                    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.js"></script>
                </head>
                <body>
                    <div id="react-content">
                    </div>
                    <script type="text/babel">
                        const h1 = <h1><span>Hello with span</span></h1>;
                        ReactDOM.render(h1, document.getElementById('react-content'));
                    </script>
                </body>
            </html>

notice that we added Babel standalone in the head of the document. We also running our script with a type="text/babel" which tells babel to transpile the code before running it. This means that instead of using the react.createElement syntax we can now use JSX an html like syntax to create our ui blocks. We mentioned that ReactDOM.render will get a React.createElement, JSX is a bit more powerful than to just create regular tags, we can also place a function in the tag. That function will have to return a React.createElement. So the above can be replaced with the following function:

        
            function CreateHelloWorld() {
                return (
                    <h1>
                        <span>
                            Hello with span
                        </span>
                    </h1>
                )
            }
            ReactDOM.render(<CreateHelloWorld />, document.getElementById('react-content'));

JSX can also accept classes that extends React.Component. So the following can also be replaced with this:

        
            class Hello extends React.Component {
                render() {
                    return (
                        <h1>
                            <span>
                                Hello with span
                            </span>
                        </h1>
                    )
                }
            }
            ReactDOM.render(<Hello />, document.getElementById('react-content'));

We will have an entire lesson about what we can do with JSX.

How React works

When we started our hello world endeavors we create an hello world where we manipulated the DOM using JS and another version where we did the same with React. DOM manipulation is an expensive operation. When you modify the DOM you cause a repaint of the DOM layout which is an expensive operation. When building a react app, you are not directly manipulating the DOM rather we create React Components. Those components for to a tree of react component that represents the change needs to be made to the DOM. That tree is refered to as a VirtualDOM. The concept is simple, modifying the DOM is expensive but creating a js object like react component and attaching it to the virtual dom is a cheap operation. We are then connecting the tree we created with React to the DOM using ReactDOM.render. react will connect the tree to the dom and will know when our components change and when and how to update the DOM in an optimized way. That is why React is super fast.

Architecture

As mentioned when we are creating an application with React we are starting to look at the view we are creating as blocks of UI components, where each block is a React Component. A React app will have a single component wrapping the entire application, and in that App component there will be a tree of components according to our application, routes and views. Each UI component we will build we will choose based on seperation of concerns, we will try to make a self containing block with the minimum dependencies to other inputs.

Summary

In this lesson we had a brief introduction to react. We learned how to create a UI block with react and we used that knowledge to create an hello world application. We learned what is JSX and also learned why react is so fast and how a react application architecture looks like.