Shineyrock

dislike -11 29
Set Up a React Environment, Part 3
1. August 2017
2. Daily
3. read 605
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 shineyrock web design & consultancy
e-mail: .(JavaScript must be enabled to view this email address)
phone: 434 210 0245

Like

disLike

-11

Add a comment...

Comments

Name*

Email*

location

URL

Comment {comment}

Remember my personal information Notify me of follow-up comments?

9 years ago Cathleen Wonderful, what a website it is! This…

9 years ago Sharyn Ѕimply a smiling ѵisitant heгe to…

9 years ago shelby What's up it's me, I am also visiting…

9 years ago Lottie I read this paragraph completely…

8 years ago earlene This text is invaluable. How can I find…

8 years ago amelie I needed to thank you for this great…

8 years ago noe vance Hi, for all time i used to check…

8 years ago brayden Pretty! This was an extremely wonderful…

8 years ago Peden Hello! I'm at work browsing your blog…

8 years ago cameron Very great post. I just stumbled upon…

about 9 years ago juliane mckibben WOW just what I was looking for. Came…

about 9 years ago carissa That is a good tip especially to those…

8 years ago carris This piece of writing presents clear…

8 years ago marissa Great write-up, I am normal visitor of…

8 years ago ena As a Newbie, I am always exploring…

8 years ago beth Thank you for another fantastic post.…

blog

Set Up a React Environment, Part 3

Manual React Setup

Create React App

Conclusion

martijn broeders

By - category

RSS

By - date

December, 2023

October, 2022

September, 2022

August, 2022

April, 2022

January, 2022

December, 2021

November, 2021

July, 2021

June, 2021

May, 2021

April, 2021

March, 2021

February, 2021

May, 2020

April, 2020

March, 2020

February, 2020

January, 2020

December, 2019

November, 2019

September, 2019

July, 2019

April, 2019

March, 2019

February, 2019

January, 2019

December, 2018

November, 2018

October, 2018

September, 2018

August, 2018

July, 2018

June, 2018

May, 2018

April, 2018

March, 2018

February, 2018

January, 2018

December, 2017

November, 2017

October, 2017

September, 2017

August, 2017

July, 2017

June, 2017