# React Setup Guide
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.
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 -y
```
Now you should have a package.json file in your project folder.
**Install react , react-dom and react-router-dom**
React and React-DOM are the core modules needed to start a react project.
**Run**
```
npm install --save react react-dom react-router-dom
```
### Install Babel to use ES6 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 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 (
Hello World
Welcome to my world
)
}
export default HelloWorld;
```
JSX allows you to write HTML components and React components in an HTML-like tag in your Javascript.
e.g :- ``````
**To install Babel, run the command below**
```
npm install --save-dev babel-cli babel-preset-react babel-preset-es6 babel-loader
```
**Create a Babel configuration file by running**
```
echo '{ "presets": ["react", "es6"] }' > .babelrc
```
**Install webpack and webpack-dev-server**
```
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 (
Hello World
Welcome to my world
)
}
export default HelloWorld;
```
**then add this to your index.html**
```
Simplest React App Setup
```
**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 { BrowserRouter } from "react-router-dom";
import App from "./App";
ReactDOM.render(
<>
,
document.getElementById("root")
);
```
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:3000
### **Thank You**