React is a JavaScript library for building user interfaces. It has the property of progressive adaptation and can be introduced on demand.

A complete React tool chain contains:

  1. Package manager: YARN or NPM
  2. Packager: Webpack or parcel
  3. Compiler: Babel, which allows new versions of JavaScript to run in older browsers

New the React

Create the React application using the Create React App. Because it doesn’t handle back-end logic or manipulate databases, it can work with any backend. It uses Babel and Webpack internally.

npx create-react-app my-app

cd my-app

npm start
Copy the code

The React default port is 3000, unlike Angular’s 4200. It has a hot start mechanism after startup.

Once developed, NPM run build generates the optimal version of the application in the build folder.

JSX

JSX is a syntactic extension of JavaScript, equivalent to native JavaScript.

React has no data binding and uses JSX to store the UI and logic together in components to make the code visually cleaner and achieve separation of concerns.

You can embed expressions into JSX, similar to Angular’s one-way data binding:

const name = "Klaus";
const element = <h1>Hello, {name}</h1>;
Copy the code

Any JavaScript expression can be placed inside {}, such as 2 + 2, user.firstName, or formatName(user).

Since JSX is also an expression, it can be used directly in the syntax:

function getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>;
  }
  return <h1>Hello, Stranger.</h1>;
}
Copy the code

Assign attributes by quotation marks or {}. Quotation marks and braces cannot be used together.

const element = <div tabIndex="0"></div>;
const element = <img src={user.url}></img>;
Copy the code

Because JSX is syntactically closer to JavaScript than HTML, the React DOM uses camel name to define properties, such as tabIndex to TabIndex and class to className.

A JSX tag can contain multiple child elements:

const element = (
  <div>
    <h1>Hello!</h1>
    <h2>Good to see you here.</h2>
  </div>
);
Copy the code

JSX introduces images

The SRC attribute cannot be assigned directly. Import is required.

import imgUrl from "./img/react-init.png";
<img src={imgUrl} alt=""></img>;
Copy the code

JSX protects against injection attacks

It is safe to insert user input in JSX because React DOM escapes by default before rendering all input. Everything is converted to a string before rendering. This effectively prevents XSS (cross-site scripting) attacks. :

const title = response.Input;
const element = <h1>{title}</h1>;
Copy the code

The React elements

Babel translates JSX into a function call called react.createElement (), which is equivalent to the following:

//JSX
const element = {
  <h1 className="greeting">
    Hello, world!
  </h1>
};

//JavaScript
const element = React.createElement(
  "h1",
  { className: "greeting" },
  "Hello, world!"
);
Copy the code

We actually create an object that looks like this (this is the simplified structure) :

const element = {
  type: "h1".props: {
    className: "greeting".children: "Hello, world!",}};Copy the code

These objects are called React elements, and React reads them to build the DOM and keep it up to date.

Render elements

The React element is the smallest brick that makes up the React application.

The React element is a generic object created with minimal overhead, unlike the browser DOM element.

The React DOM updates the DOM to be consistent with the React element.

Root DOM node:

<div id="root"></div>
Copy the code

The React DOM manages the content of this node. React updates the UI by rendering the React element to the root DOM node. Applications built using React only typically have a single root DOM node. If a React site is implemented, it may contain multiple sites.

Angular: <app-root></app-root>

The React element can be rendered to the root DOM node using the reactdom.render () method.

ReactDOM.render(reactElement, document.getElementById("root"));
Copy the code

Update rendered elements

React elements are immutable objects. You cannot change child elements or attributes once they are created. Therefore, only a new element replacement can be created to achieve the purpose of updating.

Consider an example timer:

function tick() {
  const element = (
      <h1>It is {new Date().toLocaleTimeString()}.</h1>
  );
  ReactDOM.render(element, document.getElementById("root"));
}

setInterval(tick, 1000);
Copy the code

While it may seem like it’s rerendering all elements each time, React actually compares elements to their previous state to update only what needs to be updated. So in this example only the <h2> tag is constantly updated.

In the following example, you can update the class component by adding a timer to the component itself.