What is React?

React is a fast, modular, scalable and flexible JavaScript library for building reusable UI components, which present data that changes over time. According to Stack Overflow 2018 survey, React is the most popular choice for web development among coders. It is actively maintained by Facebook under MIT license.  

Environment Setup

Before you start your React project ensure you have:

We'll be using create-react-app from Facebook to scaffold our application. To install create-react-app globally:

npm i -g create-react-app

Then to scaffold you first project run:

create-react-app <your-project-name>

Or

npx create-react-app <your-project-name>

npx is a tool for executing npm packages and comes with npm >= 5.2

That's all!

Now, to start the application navigate into your project directory and run

npm start

This will launch a development server and will allow you to open the new React application by going to http://localhost:3000/ in your browser.

Create React App doesn't handle backend logic or databases; it just creates a frontend build pipeline, so you can use it with any backend you want. Under the hood, it uses Babel and Webpack, but you don't need to know anything about them for now. When you are ready to deploy to production, running npm run build will create an optimized build of your app in the build folder.

After creation, your project should look like this:

<your-project-name>/
  README.md
  node_modules/
  package.json
  public/
    index.html
    favicon.ico
  src/
    App.css
    App.js
    App.test.js
    index.css
    index.js
    logo.svg

public/index.html

The part that interests us is the <div id="root"></div>. This is where our React application will go. The entire root div will simply be replaced with the contents of our React application. Everything else will remain unchanged.

src/index.js

This is the file that bootstraps the entire React application. And by the way, all of our React source code will go into the src directory. The line that does the magic is: ReactDOM.render(<App />, document.getElementById('root'));