ReactJS

ReactJS – Getting started

Rahul Mishra- November 26, 2021

What is React?

  • React is a JavaScript library – one of the most popular ones, with over 100,000 stars on GitHub.
  • 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)

One of the most important aspects of React is the fact that you can create components, which are like custom, reusable HTML elements, to quickly and efficiently build user interfaces. React also streamlines how data is stored and handled, using state and props.

Prerequisites

There are a few things you should know in advance before you start playing around with React. If you’ve never used JavaScript or the DOM at all before, for example, I would get more familiar with those before trying to tackle React.

Here are what I consider to be React prerequisites.

Setup and Installation

There are a few ways to set up React, and I’ll show you two so you get a good idea of how it works.
  • Static HTML File
  • Create React App

Static HTML File

This first method is not a popular way to set up React and is not how we’ll be doing the rest of our tutorial, but it will be familiar and easy to understand if you’ve ever used a library like jQuery, and it’s the least scary way to get started if you’re not familiar with Webpack, Babel, and Node.js.(i’ll be explain it latter).

Create React App

The method I just used of loading JavaScript libraries into a static HTML page and rendering the React and Babel on the fly is not very efficient, and is hard to maintain.

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.

To set up create-react-app, run the following code in your terminal, one directory up from where you want the project to live.

npx create-react-app react-tutorial
or
npm create-react-app react-tutorial
or
yarn create react-app react-tutorial

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

cd react-tutorial
npm start
or
yarn start

Once you run this command, a new window will popup at localhost:3000 with your new React app.
image.png
Create React App is very good for getting started for beginners as well as large-scale enterprise applications, but it’s not perfect for every workflow. You can also create your own Webpack setup for React.

Similar Artcles

Top 10 Reasons – Flutter Is Better For Your App Development
read more
Why is Shopify the best fit for your E-Commerce business?
read more
Enterprise Application Development Challenges and Ways to Overcome Them?
read more