The react based

1. React definition and features

1.1 What is React

  • React is a JavaScript library for building user interfaces

  • User Interface: HTML page (front end)

  • From an MVC perspective, React is only the view layer (V), which is responsible for view rendering, rather than providing full M and C functionality

  • React originated as an internal project at Facebook, was later used to develop the Instagram site, and opened source in May 2013

1.2 Features of React

  1. declarative

    It is written in the same way as HTML, embedding HTML tags into JS

    const jsx = <div className="app">
               <h1>Hello React!</h1>
            </div>
Copy the code

  2. Based on the component

    A component is the page you see, made up of structure (HTML), style (CSS), and behavior (JS) wrapped together. Embodies the “independent, reusable, can be combined” three characteristics

  3. Learn it once, use it everywhere

    React allows you to develop Web applications with React allows you to develop mobile applications with React Allows you to develop VR applications with React 360

    , etc.

2. Basic use of React

React uses the basic flow

  1. Development environment setup
  2. The installation of the react
  3. The use of the react

2.1 Development environment construction

  1. Create a project
  2. Use the NPM init -y command to initialize the project configuration
  3. Check whether the package.json file is generated

2.2 Installing the React

  1. Installation command:npm install react react-dom
    • The React package is the core, providing the ability to create elements, components, and so on
    • The React-DOM package provides DOM functions
  2. Verify the installation package in package.json file
  3. Verify the node_modules folder generated in the current directory
  4. Package-lock. json files are generated after NPM 5.x.x

2.3 Use react

  1. Create the index.html file and import the react and react-dom js files

    <div id="root"></div>
<script src="./node_modules/react/umd/react.development.js"></script>
<script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
Copy the code

  2. Create the react element using the react.createElement() API.

    <script>
   const el = React.createElement('h1'.null.'Hello React')
</script>
Copy the code

  3. Render the React element to the page using the API reactdom.render ().

    <script>
   const el = React.createElement('h1'.null.'Hello React')
   ReactDOM.render(el, document.getElementById('root'))
</script>
Copy the code

Method statement

  • React.createElement()

    // Return value: React element
// First argument: the name of the React element to be created
// Second argument: the React element's property
// The third and subsequent arguments: the child node of the React element to be created
const el = React.createElement('h1', { id: 'h1 -001'},Hello React')
Copy the code

  • ReactDOM.render()

    // First argument: the React element to render
// The second argument: the DOM object, which specifies where to render to the page
ReactDOM.render(el, document.getElementById('root'))
Copy the code

Let’s do a little exercise

  1. Use the react.createElement () and react.render () methods

  2. Create a p tag containing the text “Hello React” and render it under the

    node 

    const el = React.createElement('p'.null.'Hello React')
ReactDOM.render(el, document.getElementById('root'))
Copy the code

3. React Scaffolding

3.1 Why scaffolding is used

  1. Scaffolding is essential for developing modern Web applications
  2. Make full use of Webpack, Babel and other tools to assist project development
  3. Focus on business, not tool configuration
  4. @vue/ CLI in Vue and create-react-app in React are scaffolding

3.2 Initialize the project using the React scaffolding

  1. To initialize the project, run the NPX create-react-app my-app command

    • This section describes the NPX command

      • A command introduced in NPM V5.2.0

      • Objective: To improve the user experience of the command line tools provided in the package

      • Originally: Install the scaffold package first, then use the commands provided in this package

      • Now: You can use the commands provided by this package without having to install the scaffolding package

        NPM install create-react-app -g create-react-app my-app // equivalent to NPX create-react-app my-appCopy the code

    • Streamlining scaffolding projects

    • Scaffolding project operation process analysis

      • The app.js component typically corresponds to a display area on a page. The styles are defined in the app.css file of the same name and imported into the app.js file for use
      • Index.js is the project entry point where the root component is imported and mounted to the root node defined in public/index.html

  2. To start the project, run the command NPM start in the root directory of the project

3.3 Using React in Scaffolding

  1. Import react and react-dom packages

    import React from 'react'
import ReactDOM from 'react-dom'
Copy the code

  2. Create the React element using the React.createElement() method and render the React element using the reactdom.render () method

    const el = React.createElement('h1'.null.'React Scaffolding! ') ReactDOM. Render (el, document. GetElementById ('Root '))Copy the code

  3. Create the React element using JSX syntax and render the react element using the reactdom.render () method

    const jsx = <h1>React JSX scaffolding!</h1>
ReactDOM.render(jsx, document.getElementById('root'))
Copy the code

summary

  • React is a JavaScript library for building user interfaces
  • Command to initialize the project: NPX create-react-app my-app
  • Start the project command: NPM start
  • JSX is the syntactic sugar of the react.createElement () method, which creates React elements directly as written HTML structures
  • The reactdom.render () method is responsible for rendering the React element to the page

There’s a follow-up article on React, which isn’t here all at once