IN A nutshell
WHAT IS REACT?
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.
IN A nutshell
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.
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
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.
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.