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, 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 !
1 thought on “Hello React #1: Creating a Single Page Application with React1 min read”
Comments are closed.