Popular Categories

Setting up your React.Js App

We’ll be using the create-react-app tool to set up our React app. It’s extremely easy to use and will allow us to focus on coding our app straight away, without having to navigate through a complicated setup process.

Prerequisite:

To use create-react-app, you’ll need to have Node.js and npm installed. You can check if they’re both available by typing the following in a command-line window:

node -v
npm -v

If they’re both installed then you’ll see the current version number for each.

If you need to install or update Node.js and npm then the simplest way is to download Node.js from the official web pageNode.js is bundled with npm so you don’t need to perform a separate installation.

To install create-react-app globally, type this into any command-line window:

npm install -g create-react-app

Setting up your React App:

We can now go ahead and use create-react-app to scaffold out our new React app. It will also create a top-level folder to contain our project files. Open a command-line window and navigate to the folder you want your app located (e.g. /Desktop), and type in the following:

create-react-app movie-mojo

It will take a minute or so to complete, but it will get you the structure of the app with the folder.

The src folder is where you’ll edit your project files, and when you come to deploy your app they’ll be bundled and added to the public folder, ready for distribution.

To view the sample app in your browser, let’s take advantage of the mini web server included with create-react-app. We need to be inside the project folder we just created, so in the command-line window, type:

cd movie-mojo

And then:

npm start

This simple command does three main things. It will:

  • Compile our sample React app.
  • Open a new browser window and display our app.
  • Monitor changes to project files.

Let’s set up the structure of our app that we’ll use for the remainder of this tutorial. The create-react-app tool does a great job of scaffolding our app, but we still have the flexibility to tweak it to suit our needs.

Firstly, let’s get rid of the files we no longer need from our src folder. We don’t need service workers in our app, so delete the registerServiceWorker.js file. This is referenced in index.js, so open it up in an editor and delete all references so it looks like this:

import React from ‘react’;
import ReactDOM from ‘react-dom’;
import ‘./index.css’;
import App from ‘./App’;
ReactDOM.render(<App />, document.getElementById(‘root’));

Next, delete the logo.svg file and edit App.js to remove references to it. Your updated file should now look like this:


import React, { Component } from 'react';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<div className="App-header">
<div>Welcome to React</div>
</div>
<p className="App-intro">
Welcome to the 'Movie Mojo' React app!
</p>
</div>
);
}
}
export default App;

We can also get rid of the App.test.js file. This will leave us with the following files in src:

  • index.js
  • index.css
  • App.js
  • App.css

We’ll be creating multiple components, so let’s create a dedicated folder to store them all in. Inside src, create a new components folder and add the App.js file to it. Our app won’t compile properly until we update a couple of references.

In index.js, update the path to import the <App /> component:

And in App.js, update the path to App.css:

Save your changes and make sure your app re-compiles successfully.