How to Setup a New Project in ReactJS

Posted By : Shilpa Adlakha | 29-Jun-2017

To setup new project in ReactJS

React is a javascript library to create a single page application.It is developed by Facebook,It manages the view layer for web and mobile apps.It helps in creating reusable UI components.React allows developers to create large web applications that use data which can change over time, without reloading the page. Its main goal is to be fast, simple and scalable. React processes only user interfaces in applications. This corresponds to View in the Model-View-Controller (MVC) template, and can be used in combination with other JavaScript libraries or frameworks in MVC, such as AngularJS.It is maintained by Facebook, Instagram and a community of individual developers and corporations

You can setup new project using following command in terminal:

1) npm install -g create-react-app

Then follow , the next command:

2) create-react-app myProject

The above command creates a folder named myProject, you can name it as per your purpose and then reach to newly created folder

3) cd myProject

Then run the final command to run the project:

4) npm start

After successfull compilation , view the project on portnumber 3000

Url => http://localhost:3000/

Then do some changes in app.js to see understand the working of reactjs. Then ,build some more complex functionality. You can begin with a small program to see how it works, we write the small line of code for showing the output on browser

The following code prints : Welcome to REACT JS

  <h1>Welcome to REACT JS</h1>,

The document.getElementById , will find the id root and print the line in h1 tag in that html element whose id is root.
The ReactDOM.render is used to render(show) the output.

you can customize the code and implement the logic as per the requirement of your application.This is just a basic example to explain how it works .


About Author

Author Image
Shilpa Adlakha

Shilpa is a bright Wordpress Developer, she has good knowledge of HTML, CSS, PHP and Wordpress.

Request for Proposal

Name is required

Comment is required

Sending message..