This is the 7th day of my participation in Gwen Challenge

React is used internally by Baidu and Ali, including Toutiao. It seems that VUE is popular recently, but we still need React for some large projects. Vue is light and flexible, which is more suitable for some small projects. React brought me a new concept of virtual DOM. React is an example of how to react.

parcel

The project builder chose Parcel instead of WebPack because Parcel can easily build Web front-end projects without configuration (known as zero Configuration). Not that webpack is bad, webpack is still powerful, and webpack was written by a c# backend developer. Sometimes when we cross boundaries, it can bring some surprises. That’s why we learn go and Rust. After installing the parcel globally using NPM, you can build the project using the parcel index.html command. Then type localhost:1234 into the browser address bar to develop, and parcel sharing will talk about the packaging tool separately.

npm install -g parcel-bundler
Copy the code

Today we’ll focus on React, React-dom, and React-scripts

react

This is where the basic API is stored, the React core package

react-dom

React-dom converts the virtual DOM to the real DOM for rendering

react-scripts

Packaging tools

mkdir zi_react
Copy the code

Create a Zi_React Web project

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script src="index.js"></script>
</body>
</html>
Copy the code

Initialize a project NPM init-y with NPM and install parcel-bundler under the project

npm install parcel-bundler --save-dev
Copy the code

Install the Babel plug-in to convert JSX syntax into JS objects

npm i babel-core babel-preset-env babel-plugin-transform-react-jsx --save-dev
Copy the code

With the dependencies installed, let’s configure the.babelrc file

touch .babelrc
Copy the code
{
    "presets": [
        "env"]."plugins": [["transform-react-jsx", {
            "prama": "React.createElement"}}]]Copy the code

The next step is to configure the NPM to automatically execute the parcel script

  "scripts": {
    "start": "parcel index.html"
  },
Copy the code
const ele = (
    const ele = (
	<div className="box" size="25">
    hello <span>zidea</span>
    </div>))Copy the code
"use strict";

const ele = /*#__PURE__*/React.createElement("div", {
  className: "box".size: "25"
}, "hello "./*#__PURE__*/React.createElement("span".null."zidea"));
Copy the code