<img alt="" src="https://secure.leadforensics.com/150446.png " style="display:none;">
Go to top icon

Getting started with ReactJS

Jeetendra Gund Jul 10, 2017

JavaScript React ReactJS

sonal-getting-started-with-reactjs-20170705.png

Introduction:

React is a JavaScript library developed for building user interfaces. Developed by d ‘Facebook’ it is flexible, efficient and open source tool. This library mostly used for developing single page applications. We can create reusable components using react. This library allows developers build real native Android and iOS applications using Javascript and React. It can be used with other framework as well. Recently, react popularized a Virtual DOM and created a new syntax call JSX.

Prerequisites to start with React:

It's easy to use and learn. It uses JSX, stands for ‘JavaScript syntax XML’, that allows developers to write HTML in JavaScript. You need knowledge of following:

  • HTML
  • JavaScript
  • CSS

Environment Setup for React:

There are multiple ways to starts with React, but in this article we are using Node.JS (npm).
Following are the steps to work with React:

  • Download and install Node.JS(https://nodejs.org/en/download/)
  • After installation, open node.js terminal
ReactJs1.png
  • Copy the following command and paste in terminal to install React packages for globally:
    “npm install -g create-react-app”

ReactJs2.png

Press Enter to run command.
  • After installing the package go to your working directory and run the following command to create the React application:
    “create-react-app your_app_name_here”

ReactJs3.png
The above screen shot you can see two parts in command. First part yellow color shows the ‘create-react-app’ command for creating React application and second part circle with blue color shows the ‘my-first-app’ here you can give your application name.

ReactJs4.png

  • Finishing the command the application is created in that directory. For running the application run following command:
    “cd my-first-app”
    “npm start”

ReactJs5.png

Once you enter this above command you can see terminal like below screen shot:

ReactJs6.png
  • After “Compiled successfully!” window appears on the command prompt, one tab will be opened in web browser showing default React app page like following:

ReactJs7-1.png
Great, our first React application is successfully created!

Summary

I hope that you understand the React with creating an example. If you have any suggestion regarding this article, then please comment below.

Thanks for reading. Learn it! Share it!

e-Zest is a leading digital innovation partner for enterprises and technology companies that utilizes emerging technologies for creating engaging customers experiences. Being a customer-focused and technology-driven company, it always helps clients in crafting holistic business value for their software development efforts. It offers software development and consulting services for cloud computing, enterprise mobility, big data and analytics, user experience and digital commerce.