Hello React #1: Creating a Single Page Application with React

Few days ago we were looking for a JavaScript library which is flexible and can be used in a variety of projects. Basically, something with which we can create new apps, or introduce into an existing project without rewriting it. However, we came across React, a JavaScript library for building user interfaces and AngularJS, a JavaScript MVW Framework.

Before we start creating a single page application with React we need to install NodeJS and NPM. After you have installed them, we are ready to create our first application with React.

Create React App is the best way to start building a new React single page application. So, we will be using it to create out first single page application with React.

sudo npm install -g create-react-app
create-react-app hello-world
cd hello-world
npm start

create-react-app will create a hello-world application for us with following directory structure.

hello-world/
  README.md
  node_modules/
  package.json
  .gitignore
  public/
    favicon.ico
    index.html
  src/
    App.css
    App.js
    App.test.js
    index.css
    index.js
    logo.svg

To see the application running open http://localhost:3000/. The page will reload if we make any edits in the app. Also, to run the tests just run command:

npm test

It will run the test watcher in an interactive mode.

At last to deploy the application, we can bundle it in production mode and optimize it for the best performance.

The build is minified and the filenames include the hashes. Finally, our app is ready to be deployed. Note that we have not described different components of the app yet. So, stay tuned !