React series (2) – React Basics (3) – DOM operations React series (4) – React lifecycle

background

So far, the main technology stack is VUE. Learn react from scratch, from basics to React-Router, Redux, etc.

The preparatory work

Create-react-app NPM I -g create-react-app create-react-app --versionCopy the code

Create a project

Create-react-app my-app create-react-app my-app create-react-app my-app Create-react-app my-app --template typescript // Run NPM run start // or NPM startCopy the code

The directory structure

/* public - public resources SRC - project source.gitignore - used to ignore specified files or folders package.json - defines the various modules needed for this project, And the project configuration information (such as name, version, license, and other metadata) readme.md - Remarks */
Copy the code

Packgae. Json explanation

/* name - project name version - version number dependencies - module required when the project is run devDependencies - module required when the project is developed - specifies the NPM command line abbreviation to run the script command EslintConfig - Configures esLint's rule browserslist - intelligently adds CSS prefixes, JS polyfill gaskets, to older versions of browsers */, depending on the context provided by the target browser
Copy the code

A brief introduction to JSX syntax

React uses JSX instead of JavaScript. React is a js file

Define an HTML variable that can be rendered directly

import React from 'react';

class Todo extends React.Component {
    render() {
        const element = <h1>Hello World</h1>
        return (
            <div>{element}</div>)}}export default Todo;
Copy the code