Section 32 – Lesson 412 & 415 – Complete 2020 Web Development Bootcamp

Lesson 412 – What is React?

React is a javascript library for building user interfaces. It is a front end framework.

React combines small amounts of html, ccs and javascript into a single component with its own styling and functionality. You can create several of these components, each with its own appearance.

Lesson 415 – Introduction to JSX & Babel

The first step in using REACT is to require React and ReactDOM in the index.js file using this code –

var React = require("react");
var ReactDOM = require("react-dom");

The next step is to write a line of React code to display something on the web page. This line of code uses the ReactDom render method to display an h1 element in the div on the index.html page with an id of “root”.

ReactDOM.render(<h1>Hello World!</h1>, document.getElementById("root"));

React works by creating JSX files. In JSX files you can have html and javascript in the body of the file. The html is picked up behind the scenes by a compiler and gets converted to javascript. JSX uses Babel which is a javascript compiler.

Instead of using this code –

var React = require("react");
var ReactDOM = require("react-dom");

you can take advantage of the new javascript import method to import React and ReactDom. This is the refactored code using the import method.

import React from "react";
import ReactDOM from "react-dom";

The ReactDOM.render() method can only take a single html element. If you attempt to use an h1 element and a paragraph element, it won’t work.

The way around this is to enclose the h1 and the paragraph elements in a single div element and this way the code will work. The code below will render both the h1 and the paragraph elements on the web page.

ReactDOM.render(
  <div>
    <h1>Hello World!</h1>
    <p>This is a paragraph.</p>
  </div>,
  document.getElementById("root")
);