Simplest React App Setup

I have seen so many React newbies get frustrated while trying to set up a simple react app for the first time. Their frustration is not far-fetched, it is simply because they don’t know what each dependency is used for and also what is needed to get them up and running.

The golden rule of knowing what you are doing is to understand why you are doing it. Don’t use a module until you understand the problem it’s solving. This post will help you understand a basic react app setup. It is important to note that React is different from Redux, Flux, Router etc. Below is an outline of what is needed to be done so as to set up the simplest React app. I’d assume that you already have npm setup.

Create a new project folder

Start a new react project by running the code below.

mkdir new-react-app && cd new-react-app

Initialise a new node project

Follow the prompt and fill accordingly. This is where all the needed node packages will live.

Run

npm init

Now you should have a package.json file in your project folder.

Install react and react-dom

React and React-DOM are the core modules needed to start a react project.

Run

npm install --save react react-dom

Install Babel to use ES2015 syntax and JSX

According to React docs, it is recommended to use React with Babel so you can use ES6 and JSX in your JavaScript code. ES6 is a set of modern JavaScript features that eases development, and JSX is an extension to the JavaScript language that works nicely with React. This is probably where most people start facing challenges.

Babel helps you to transform Javascript code with newer syntax like ES2015 (ES6) to ES5 so that most browsers will be able to interpret your code since many of them don’t have support for ES6 yet. Below is an example of what Babel allows you to do in your code

import React from 'react'
const HelloWorld = () => {
return (
<div className='hello-world'>
<h1>Hello World</h1>
<p>Welcome to my world</p>
</div>
)
}
export default HelloWorld

JSX allows you to write HTML components and React components in an HTML-like tag in your Javascript. e.g <HelloWorld />

To install Babel, run the command below

npm install --save-dev babel-cli babel-preset-react babel-preset-es2015 babel-loader

Create a Babel configuration file by running

echo '{ "presets": ["react", "es2015"] }' > .babelrc

Install webpack and webpack-dev-server

Run

npm install --save-dev webpack webpack-dev-server

Configure webpack to run using webpack-dev-server locally

The first step is to create a webpack.config.js file by running

touch webpack.config.js

Then copy and paste the code below into the file

var webpack = require('webpack')
var path = require('path')
module.exports = {
entry: path.resolve(__dirname, 'app'),
output: {
path: __dirname + '/dist',
publicPath: '/',
filename: 'bundle.js'
},
devServer: {
contentBase: path.resolve(__dirname, 'public')
},
module: {
loaders: [
{test: /\.js$/, exclude: /node_modules/, loaders: ['babel-loader']},
{test: /(\.css)$/, loaders: ['style-loader', 'css-loader']}
]
}
}

Based on our configuration, we need to include path, css-loader and style-loader modules since they are being used.

So let’s install them by running

npm install --save-dev path style-loader css-loader

Also, we need to create public and component directories and also the index.html file which will contain a skeletal html structure.

Run

mkdir components public && touch public/index.html app.js

then create a simple HelloWorld component in your components folder by running the command below

touch components/HelloWorld.js

copy and paste the code below into your HelloWorld.js file

import React from 'react'
const HelloWorld = () => {
return (
<div className='hello-world'>
<h1>Hello World</h1>
<p>Welcome to my world</p>
</div>
)
}
export default HelloWorld

then add this to your index.html

<!DOCTYPE html>
<html>
<head>
<title>Simplest React App Setup</title>
</head>
<body>
<div id='app'></div>
<script src='/bundle.js'></script>
</body>
</html>

Next, paste the code below in your app.js (This should be in your root directory)

import React from 'react'
import ReactDOM from 'react-dom'
import HelloWorld from './components/HelloWorld'
ReactDOM.render(<HelloWorld />, document.getElementById('app'))

Add this "start": "webpack-dev-server" to the script section of your package.json file. It should look like below:

{
"name": "new-react-app",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"react": "^15.4.2",
"react-dom": "^15.4.2"
},
"devDependencies": {
"babel-cli": "^6.22.2",
"babel-loader": "^6.2.10",
"babel-preset-es2015": "^6.22.0",
"babel-preset-react": "^6.22.0",
"css-loader": "^0.26.1",
"path": "^0.12.7",
"style-loader": "^0.13.1",
"webpack": "^2.2.1",
"webpack-dev-server": "^1.16.3"
}
}

Start the app

Run

npm start

Visit the browser to see your app

By now you should have your app running at http://localhost:8080/. If everything went well then your browser should show you what I have below

If you are stuck, try to go through the tutorial again to make sure you didn’t miss any step and check to be sure that port 8080 is not being used.

If you liked this, click the 💚 below so other people will see this here on Medium. Also, if you have any questions or observations, use the comment section to share your thoughts/questions.

#2

Like what you read? Give Kayode Adeniyi a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.