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