4elements

like 1 29
Set Up a React Environment, Part 3
1. August 2017
2. Daily
3. read 269
Throughout the rest of this tutorial series, we'll focus on setting up React locally. The first of these approaches is similar to CodePen, where the React scripts were inserted dynamically into your HTML file, before being rendered in the output window.
The only difference here is that we'll be inserting the scripts manually.
Manual React Setup
Start by creating an index.html document and adding a couple of <script> tags for the React and ReactDOM libraries.
```
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <div id="app"></div>
        <script src="https://unpkg.com/react@15/dist/react.js"></script>
        <script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
        <script>
        </script>
    </body>
</html>
```
The React scripts added are via a CDN, and the particular URIs are recommended by Facebook. If you want to work completely offline, you could download these scripts locally and change the links to be relative.
An element <div id='app'> was added as the location in the DOM our React app will be rendered to. A blank <script> tag was also added, which will be used to add our React code shortly.
This time, however, we won't be able to use JSX as there is no way to convert it to JavaScript at runtime. It has to be compiled ahead of time via a preprocessor such as Babel. We can't use ES6 classes or modules either as these features don't yet have universal browser support.
Let's use the same React component from the CodePen example in part two of this tutorial series, so we can directly compare the two setup methods.
Starting with the <App /> component only:
```
const App = function () {
    return React.createElement(
        'div',
        null,
        React.createElement( 'h2', null, 'My First React Components!' )
    );
}

ReactDOM.render( React.createElement( App ), document.querySelector( '#app' ) );
```
This is what a React component looks like without JSX. In fact, this is what the JSX code is actually compiled into by Babel.
Let's now add the definitions for the two child components and add a reference to each of them in the top-level <App /> component. I'll also implement the number props from the CodePen example.
Here's what the whole HTML source code now looks like.
```
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <div id="app"></div>
        <script src="https://unpkg.com/react@15/dist/react.js"></script>
        <script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
        <script>
        const App = function () {
            return React.createElement(
                'div',
                null,
                React.createElement( 'h1', null, 'My First React Components!' ),
                React.createElement( MyFirstComponent, { number: '1st' } ),
                React.createElement( MySecondComponent, { number: '2nd' } )
            );
        }

        const MyFirstComponent = function ( props ) {
            return React.createElement(
                'p',
                null,
                props.number + ': Hello from React!'
            );
        }

        const MySecondComponent = function ( props ) {
            return React.createElement(
                'p',
                null,
                props.number + ': My Second React Component.'
            );
        }

        ReactDOM.render( React.createElement( App ), document.querySelector( '#app' ) );
        </script>
    </body>
</html>
```
Notice how in the <App /> component we can create as many elements as we like by adding more calls to React.createElement(). Also, props are passed into child components via a props JavaScript object, which can then be accessed inside components via the function parameter props.
Open index.html in a browser to see the React output.
I won't go into more details here about React.createElement(), and other non-JSX topics, as the majority of React users choose to write their components using JSX. We'll be using JSX for our React components for the remainder of this tutorial series.
Clearly, the lack of tools such as Babel restricts how easy it is to write React code completely from scratch. There are many other tools we could take advantage of too, such as a bundler that creates a single JavaScript file from all the required React libraries plus our app code. We'll discover a better approach in the next section that's just as easy to set up.
Create React App
To solve the problem of complex manual React setups, Facebook introduced create-react-app, which is a user-friendly way to get started developing with React. It provides you with full build setup but requires no manual configuration at all.
Let's go ahead and install create-react-app. Type the following code in a command-line window.
npm install -g create-react-app
This will install create-react-app globally so you can access it from any directory.
You'll need npm installed to run this command, and Node.js to run create-react-app. As npm comes bundled with Node.js, simply download and install the latest version of Node.js from the official website.
We'll now create a new React app called my-first-components. Note that create-react-app creates the containing folder for your app automatically, so you only need to make sure you're in the directory you want your app folder created in.
Run these commands to create your app and run the start script.
```
create-react-app my-first-components
cd my-first-components/
npm start
```
It might take a minute or two for create-react-app to complete installing everything. Once done, enter the npm start command and a new browser window will open and, after a few seconds, your React app will be displayed.
The nice thing about create-react-app is that it includes a mini web server and also watches the files in your app for changes. Whenever a change is made, your app is rebuilt, and the browser window automatically reloads to display your updated app.
During the automated setup process, create-react-app generates several files as well as the following three folders:
- node_modules
- public
- src
To get a feel for how we create components and connect them together inside a create-react-app generated app, we'll create the same components that we have been working with so far.
The default output of the app suggests we edit App.js as a starting point, so open this file and remove the import calls for the logo and CSS files as we won't be needing these. We can also simplify the <App /> component, and add in our two child components from before.
Your App.js file should now look like this:
```
import React, { Component } from 'react';

class App extends Component {
    render() {
        return (
            <div>
                <h2>My First React Components!</h2>
                <MyFirstComponent number="1st" />
                <MySecondComponent number="2nd" />
            </div>
        )
    }
}

class MyFirstComponent extends Component {
    render() {
        return (
            <p>{this.props.number}: Hello from React!</p>
        )
    }
}

class MySecondComponent extends Component {
    render() {
        return (
            <p>{this.props.number}: My Second React Component.</p>
        )
    }
}

export default App;
```
Save your changes and create-react-app will automatically update your app in the browser. This results in the same output as before. (Notice it's loaded in the browser via the local web server this time, though.)
Let's make this more modular, though, to be in line with modern best practices for creating React apps. Create two new files inside the src folder named MyFirstComponent.js and MySecondComponent.js.
Inside MyFirstComponent.js, add the following code:
```
import React, { Component } from 'react';

class MyFirstComponent extends Component {
    render() {
        return (
            <p>{this.props.number}: Hello from React!</p>
        )
    }
}

export default MyFirstComponent;
```
And inside MySecondComponent.js, add similar code:
```
import React, { Component } from 'react';

class MySecondComponent extends Component {
    render() {
        return (
            <p>{this.props.number}: My Second React Component.</p>
        )
    }
}

export default MySecondComponent;
```
Finally, we need to update App.js to import both child components as they're now located in separate files:
```
import React, { Component } from 'react';
import MyFirstComponent from './MyFirstComponent';
import MySecondComponent from './MySecondComponent';

class App extends Component {
    render() {
        return (
            <div>
                <h2>My First React Components!</h2>
                <MyFirstComponent number="1st" />
                <MySecondComponent number="2nd" />
            </div>
        )
    }
}

export default App;
```
This approach to structuring your React app is much more modular and portable. It also allows for easier debugging as each component is self-contained inside its own module.
Conclusion
In this tutorial, we've covered two methods for setting up React locally: the manual approach, and using the create-react-app tool from Facebook.
Creating a React app manually from scratch and inserting the script dependencies directly inside the index.html file is pretty inefficient. As your app scales, and as different versions of your scripts are released, manually updating the scripts will quickly become unmanageable. On top of that, we can't use ES6 features, or write our components in JSX!
Using create-react-app, on the other hand, is a very smooth process. It's installed and initialized with a couple of commands. Once running, create-react-app rebuilds your app and updates the browser window every time you edit any project files. This is a really nice workflow when making a lot of minor changes, as it helps to speed up app development.
In the next tutorial, we'll create a React app from scratch that uses Webpack and Babel to bundle and process our app into a single JavaScript file. Unlike create-react-app, where everything is done for you, we'll be manually configuring all the setup files, and we'll discuss why you'd choose this approach.
martijn broeders

founder/ strategic creative at 4elements web design & consultancy
e-mail: .(JavaScript must be enabled to view this email address)
phone: 06 38 55 28 54
Like
disLike
1

Add a comment...

Comments
Name*
Email*
location
URL
Comment
Remember my personal information Notify me of follow-up comments?

Please enter the word you see in the image at the left