The Abominable Land of Pure Code

A rum soaked paradise

Twitter Github
27 September 2018

React: From the Start

by Christopher Bacon

React tutorials have a habit of not starting at the beginning. However, the beginning is usually a good place to start, so let’s start there.

1.

For a new project, let’s start with a new clean directory.

React is a JavaScript library, like lodash or moment, so we will need to install it with a package manager—we will use npm. In our new directory:

echo "{}" >> package.json

This will create a JSON file with an empty object in it. Then you can install and save to that package.json file the relevant dependencies. Without this, npm may not be able to save the dependencies to package.json.

npm i --save react

This will have installed react in our local directory/project under node_modules, as well as saved the dependency in package.json.

Now, in order to render react on the DOM, we need to pull in a package called react-dom. We do this with:

npm i --save react-dom

Now, we will want to set up a HTML page which we can easily target with our react code, so create a index.html in the root of the directory. Then create a src directory, which we will use to store our react code.

touch index.html
mkdir src

Then inside your index.html file, we want to specify some DOM node that we will target with our react code later on. So for now, add:

<!-- index.html -->
<html>
    <div id="root">
    </div>
</html>

Fairly straightforward. A html tag and a div with an id attribute. It is the "root" id that we will target later on. Basically, this means that we will aim to insert our react code at the div containing the root id attribute.

1.5.

So can we write some code now?

Almost, but we need some way to turn our react code into something our browser can understand. To do this we will need to turn our react and the JSX that react generates into a more vanilla kinda of JavaScript. Although, truth be told, we don't do this ourselves; we just hand the task off to a compiler. The compiler we shall use is babel, but we shall not actually touch it as we will wrap it in webpack, so that our outputted JS is nicely bundled into a single file.

Here comes the various installations we need to install webpack and babel:

npm i --saveDev babel-core
npm i --saveDev babel-loader
npm i --saveDev babel-preset-es2015
npm i --saveDev babel-preset-react
npm i --saveDev webpack
npm i webpack -g

The reason we use the --saveDev flag here instead of the --save flag as above is because we want to specify that we depend on react and react-dom in production, whereas we only depend on babel and webpack as a dev dependency.

Now we have installed babel and webpack, we need to create a webpack config file. Funnily enough, this file is just called "webpack.config.js", so create that and specify the following config inside of it:

// webpack.config.js
var path = require('path');
var webpack = require('webpack');

module.exports = {
    entry: './main.js',
    output: { path: __dirname, filename: 'bundle.js'},
    module: {
        loaders: [
            {
                test: /.jsx?$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                query: {
                    presets: ['react', 'es2015']
                }
            }
        ]
    }
}

This just tells webpack what file it should compile (entry), what the output file should be called (output), and then to use babel with the react and es2015 presets (loaders). We will come back to main.js and bundle.js.

2.

Praise be, now we are done. With that out of the way, we can now start writing some react code. In src, create a file called src/App.jsx, or whatever you want it to be called. We will then begin by importing the react and react-dom packages.

touch src/App.jsx
// src/App.jsx
import React from 'react';
import ReactDOM from 'react-dom';

Now, we can create a class that extends the React.Component base class. This base class provides several built-in methods for free, which can be overwritten. For example, React.Component contains several "lifecyle" methods, which are methods that run at particular times during processing. We won't worry about these for now, instead create a simple class, with a constructor.

// src/App.jsx
import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
    constructor(props) {
        super(props);
    }
}

The constructor method is called before the app is mounted, which is just when the react component is created and inserted into the DOM. super(props) is called so that props are defined in the constructor, and the props are just the values passed into the react component. Again, nothing to worry about, just something to keep in mind.

Now we will want to create a render() method on this class. This is where the our HTML-like code (called JSX) will go. For example, we can do the following:

// src/App.jsx
import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <h1>React: From the Start</h1>
        );
    }
}

What will happen is that wherever we insert this component into the DOM, a h1 tag with the text "React: From the Start" will be rendered.

So how do we insert it?

This is where the react-dom module comes in. To tell react to render to a specific DOM node, we use react-dom's render() method. We pass it the react component we want to be rendered, as well as the target DOM node; like so:

// src/App.jsx
import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <h1>React: From the Start</h1>
        );
    }
}

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

Then inside our index.html, we simply include the JavaScript that is compiled by babel.

    <pre class="bg-moon-gray"> &lt;!-- index.html --&gt; &lt;html&gt;
&lt;div id="root"&gt;
&lt;/div&gt;
&lt;script src="bundle.js"&gt;&lt;/script&gt; &lt;/html&gt;

</pre>

3.

Wait what. When did we compile this react?

This is where the webpack config we wrote earlier comes in. Create a file in the root of the project called "main.js", and inside of it import the App:

// main.js
import App from './src/App.jsx'

Now run webpack in the root of the project. Webpack will use the config we wrote, look for main.js, and compile it into bundle.js.

</img>

You should now have a bundle.js in the root of your project directory, and index.html should be able to load it. You can load it quickly in the browser by running a local server:

php -S localhost:8080

Then visit http://localhost:8080 in your browser.

tags: