ReactJS – Getting started

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.

• Basic familiarity with HTML & CSS.
• Basic knowledge of JavaScript and programming.
• Basic understanding of the DOM.
• Familiarity with ES6 syntax and features.
• Node.js and npm are installed globally.

Setup and Installation

• Static HTML File
• Create React App

Static HTML File

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.

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.