< /TheShubham >

React Setup Guide

React Setup Guide

shubham kumar's photo
shubham kumar
·

4 min read

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 (
    <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-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 (
    <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='root'></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 { BrowserRouter } from "react-router-dom";
import App from "./App";

ReactDOM.render(
  <>
    <BrowserRouter>
        <App />
    </BrowserRouter>
  </>,
  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 localhost:3000

Thank You

ReactJavaScriptES6