Getting Started with React

In this blog article, you will learn about setting up React development environment and executing the project.

  • React is a JavaScript library for building user interfaces created by Facebook.
  • Current version of React.js is 16.9.0 released on August 8th 2019
  • Create-react-app version 2.0 supports Babel 7, webpack 4, and Jest23.
  • Official website of react.js is https://reactjs.org

Steps to Setup React Environment

Step 1: Install Node.js and NPM

Download and Install Node.js from https://nodejs.org (.msi file)

Step 2: Setting up a React Environment
Once Node.js is installed, create a React application by first installing the create-react-app. To install the create-react-app, run the below command in your console window.
npm install -g create-react-app



Step 3: Creating React application
Run the below command to create a React application named myreactapp
npx create-react-app myreactapp

Here the create-react-app will set up everything you need to run a React application.


Step 4: Run the React Application
To run the react application, execute the below commands
cd myreactapp
npm start




A new browser window will pop up with the newly created React App as shown in the below screenshot.



Step 5: Update the existing react application
In the myreactapp directory, find src folder, inside the src folder, open app.js file. The code looks like as below



Update the HTML content as shown below and save the file.


The updated application when executed will look as in below screenshot.

References

  • https://create-react-app.dev/docs/getting-started
  • https://reactjs.org

Learn more about React features in our coming React Blog Article series.

Happy Learning!