If you have been reading about web technologies recently then it is totally possible that you might come across a word “ReactJS“.

What is ReactJS?

  • React or ReactJS is a JavaScript library.
  • React is not a framework. (unlike Angular, which is more opinionated).
  • React is an open-source project created by Facebook.
  • React is used to build user interfaces (UI) on the front end.
  • React is the view layer of an MVC application (Model View Controller).

ReactJS is a library of JavaScript which actually requires a setup on your local machine. A simple React app can be created using create-react-app.

ReactJS can be set up in a number of ways, let’s look at a few of them.

  1. Using a Static HTML File.
  2. “Create React App” via npm.

In this part we will discuss only 2nd option i.e. via npm. Let’s directly jump into it:-

Create-React-App” via npm

Prerequisite:

Install Node.js and npm globally on your machine.

Fortunately, Facebook has created Create React App, an environment that comes pre-configured with everything you need to build a React app. It will create a live development server, use Webpack to automatically compile React, JSX, and ES6, auto-prefix CSS files, and use ESLint to test and warn about mistakes in the code.

Run the following code in your terminal.

npx create-react-app my-app

Once that finishes installing, move to the newly created directory and start the project.

cd my-app npm start

Once you run this command. In your browser, a new window will pop up at localhost:3000 with your new React app.

If you look into the project structure, you’ll see a /public and /src directory, along with the regular node_modules, .gitignore, README.md, and package.json.

In /public, our important file is index.html, which is very similar to the static index.html file we made earlier — just a root div. This time, no libraries or scripts are being loaded in. The /src directory will contain all our React code.

HAPPY CODING!!

Leave a comment

Design a site like this with WordPress.com
Get started