If you’re new to React, you may be wondering how to get yourself started. Below are the five steps I follow to set up any new React app that I start working on.

Step 1: Create new React app

Let’s get started by creating a new react project using create-react-app:

$ npx create-react-app "name-of-app"

Step 2: Set up Material CSS framework

We will install and use material-ui.

$ yarn add @material-ui/core

You can now use Material components in your app, like so:

// some-file.js
// import button
import Button from '@material-ui/core/Button';

// use Button
function MyComponent(props) {
  return (
      Click me

Step 3: Set up Roboto font

  1. We will install and use typeface-roboto.

    $ yarn add typeface-roboto
  2. Require typeface roboto in src/index.js:

    // src/index.js
    import React from 'react';
    // load Roboto font

Step 4: Set up Material icons

We will install and use material-ui/icons.

$ yarn add @material-ui/icons

You can now use Material icons in your app, like so:

// some-file.js
// import icon
import AddIcon from '@material-ui/icons/Add';

// use icon
function MyComponent(props) {
  return (
    <AddIcon />

Step 5: Set up hot reloading

Credit for hot reloading without ejecting Create React App belongs to Dave Ceddia.

  1. Add react-app-rewired, react-app-rewire-hot-loader, and react-hot-loader packages:

    $ yarn add react-app-rewired react-app-rewire-hot-loader react-hot-loader
  2. Create config-overrides.js in the root directory (not the src directory) and add the following code:

    // config-overrides.js
    const rewireReactHotLoader = require('react-app-rewire-hot-loader');
    module.exports = function override(config, env) {
      config = rewireReactHotLoader(config, env);
      return config;
  3. Set up hot reloading in src/index.js:

    // src/index.js
    import React from 'react';
    import ReactDOM from 'react-dom';
    import { AppContainer } from 'react-hot-loader';
    // The call to render must be wrapped in a function:
    const render = Component => {
        // Wrap App inside AppContainer
          <App />
    // Register Service Worker
    // Render app once
    // Webpack Hot Module Replacement API
    // Replace ./App below with path to App.js
    if (module.hot) {
      module.hot.accept('./App', () => {
  4. Change scripts in package.json to use react-app-wired instead of react-scripts:

    "scripts": {
      "start": "react-app-rewired start",
      "build": "react-app-rewired build",
      "test":  "react-app-rewired test --env=jsdom",
      "eject": "react-scripts eject"