Create a React App in 5 Steps

There are many ways to create a React app but the easiest by far is through the create-react-app NPM package from Facebook. With a few simple commands, you will have a barebones application that you can use as the foundation for your projects.

Step 1 - Install create-react-app

Open up a terminal (Linux/MacOs) or command prompt (Windows) and run the command

npm install -g create-react-app

This will install create-react-app globally and allow you to use it as a command line tool to create new projects anywhere in your filesystem.

Step 2 - Create your project

Decide where on your filesystem you want your react app to live and navigate to that directory through your command line. For example, if you want it to be located on your desktop then you would navigate to your desktop directory.

Run the following command, replacing "myproject" with the name you want to give your project

npx create-react-app "myproject"

You should now have a directory called "myproject (or which ever name you choose) with some basic files and a project structure to get you started along with the dependencies create-react-app has.

Step 3 - Run your project

In your command line, change into the "myproject" directory and run the following command to start up your new project

npm start

Then go to http://localhost:3000 in your browser to see your project up and running. Congratulations! You have created a basic React app. Although it doesn't do much yet, you now have the foundation to build what ever projects you'd like.

Step 4 - A little explanation

If you have a look at public/index.html you will notice it contains a div with id="root", if you were to change "root" to something else, your react app would no longer work.

<!-- index.html -->
...
<body>
  <noscript> You need to enable JavaScript to run this app. </noscript>
  <div id="root"></div>
</body>
...

This is because, this is the root DOM node where the React virtual DOM runs. When you use the command "npm start", it runs the index.js file from the src directory and renders the element at this root DOM node.

// index.js
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";

ReactDOM.render(<App />, document.getElementById("root"));

serviceWorker.unregister();

You can probably see React's component based architecture coming in to play now. If you were to add your own component to apps.js, it would also show up on the page. Let's do that next.

Step 5 - Create your first component

In the "src" directory of your project create a new file called "MyComponent.js", put in the following code and save it.

// MyComponent.js
import React from "react";

function MyComponent() {
  return (
    <div>
      <h1>My Component</h1>
    </div>
  );
}

export default MyComponent;

Now in app.js import your new component and replace

// App.js
<header className="App-header">
  <img src="{logo}" className="App-logo" alt="logo" />
  <p>Edit <code>src/App.js</code> and save to reload.</p>
  <a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer">
    Learn React
  </a>
</header>

with your component like this.

// App.js

import React, { Component } from "react";
import "./App.css";

import MyComponent from "./components/MyComponent";

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

export default App;

And because you are no longer using the React logo, you can remove the import for it and delete the logo.svg file from your filesystem.

Run your project again with "npm start" if its not already running and you should now see a web page at http://localhost:3000 with your component.

Creating a React app is easy

It might not look like much but you have now created your first React app. By continuing to piece components together this way, you can build any full featured React application.

SimplecodePowerful Resources for Busy Developers

Tools

Crypto Alerts

Social

Github

Twitter

Uplabs

Behance