[React-Redux] Setup React Dev Environment with create-react-app

It is quite complex to setup the react development environment. The “create-react-app ” package is the best bet to start the React App for your simple project. But I do not like all the settings, though. This post shows how to modify the default “create-react-app” setups.

 

1. Install/Update the create-react-app Package

Install or update the “create-react-app” in the global scope.

> npm install -g create-react-app
> npm update -g create-react-app

 

2. Create the application

You can use the npx (npm package runner) to create an app. After that you can use “yarn” to run/build/test the app.

> npx create-react-app my-app
> cd my-app
> yarn start
> yarn build
> yarn test

Open http://localhost:3000/ and if you can see the starting page, you are ok to go.

 

3. Managing Packages

The “react-scripts” package is a development dependency. The latest version of this package is always installed but you can update this package for existing project.

 

4. Add Bootstrap

There are many ways to use the bootstrap but I like to install all low level packages and use the bootstrap classes directly.

> yarn add jquery
> yarn add popper.js
> yarn add bootstrap
> yarn add @fortawesome/fontawesome-free

In the “/src/index.js” file, add the bootstrap dependencies and you are ready to use Bootstrap.

import 'bootstrap/dist/css/bootstrap.css';
import '@fortawesome/fontawesome-free/css/all.css';
import './index.css';

import 'jquery/dist/jquery.js';
import 'popper.js/dist/esm/popper.js';
import 'bootstrap/dist/js/bootstrap.js';

 

5. Setup Home Page

The “App” component will be used as a layout component as a single page application. So let’s create the simple “Home” component. Create the “/src/components/Home/Home.js” file.

import React from 'react';

const Home = (props) => {
  return (
    <div>
      <h2>My App</h2>
    </div>
  );
};

export default Home;

Delete the “/src/logo.svg” file and delete the all content in the “/src/App.css”, which you can put some styles later. Modify the “App.js” like this.

import React, { Component } from 'react';
import Home from './components/Home/Home';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <Home />
      </div>
    );
  }
}

export default App;

 

6. Setup Some More Components

Create 2 more simple components.

“/components/About/About.js”
“/components/errors/PageNotFound.js”

import React from 'react';

const PageNotFound = (props) => {
  return (
    <div className="alert alert-warning">
      <h3>Page Not Found</h3>
      <p>404</p>
    </div>
  );
};

export default PageNotFound;

 

7. Setup Routing and Menus

It is time to setup the Routing with the “react-router-dom” package.

> npm install react-router-dom

Create the MenuBar component: “/src/components/menu/MenuBar.js”

import React from 'react';
import {Link, NavLink } from 'react-router-dom';

const MenuBar = (props) => {
  return (
    <nav className="navbar navbar-expand-lg navbar-light bg-light">
      <Link to="/" className="navbar-brand">MyReactApp</Link>
      <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span className="navbar-toggler-icon"></span>
      </button>
      <div className="collapse navbar-collapse" id="navbarSupportedContent">
        <ul className="navbar-nav mr-auto">
          <li className="nav-item">
            <NavLink className="nav-link glyphicon" activeClassName="active" to='/' exact> <i className="fas fa-home"></i> Home <span className="sr-only">(current)</span></NavLink>
          </li>
          <li className="nav-item dropdown">
            <a className="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Dropdown
            </a>
            <div className="dropdown-menu" aria-labelledby="navbarDropdown">
              <NavLink className="dropdown-item" activeClassName="active" to="/" exact>Action 1</NavLink>
              <NavLink className="dropdown-item" activeClassName="active" to="/about">Action 2</NavLink>
              <div className="dropdown-divider"></div>
              <NavLink className="dropdown-item" activeClassName="active" to="/bogus">Not Found</NavLink>
            </div>
          </li>
          <li className="nav-item">
            <NavLink to="/about" activeClassName="active" className="nav-link">About</NavLink>
          </li>
        </ul>
      </div>
    </nav>
  );
};

export default MenuBar;

And then, add the routing information into the “App” component.

import React, { Component } from 'react';
import { Route, Switch } from 'react-router-dom';
import Home from './components/Home/Home';
import About from './components/About/About';
import MenuBar from './components/menu/MenuBar';
import PageNotFound from './components/errors/PageNotFound';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <div className="container">
          <header className="App-header">
            <MenuBar />
          </header>
          <div className="mainArea">
            <Switch>
              <Route path="/" component={Home} exact />
              <Route path="/about" component={About} />
              <Route component={PageNotFound} />
            </Switch>
          </div>
        </div>
      </div>
    );
  }
}

export default App;

Finally, wrap your App component with the Router Component in the index.js.

import { BrowserRouter } from "react-router-dom";
ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>, document.getElementById('root'));

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s