Create-react-app creates react

Creation Mode 1

  1. Install the scaffolding kit globally first

    Command: NPM i-g create-react-app

  2. Use scaffolding tools to create projects

    Create-react-app + Project name

Creation Mode 2

Create projects directly using NPX

Command:

NPX create-react-app + Project name

Explanation:

  • NPX create-react-app is a fixed command,create-react-appReact scaffolding name

npx:

  1. NPX is a new command added in NPM V5.2 to simplify the use of toolkits in NPM

  2. Before NPX:

    1. Install NPM i-g create-react-app globally
    2. Create the React project through the scaffolding command

  3. So we have NPX

    NPX creates the React project directly by calling the latest create-react-app

React Scaffolding project working mode

1. Project Catalog Information:

Description:

  • srcDirectories are the directories where we write code for project development
  • index.jsIt’s an entry file
  • To viewpackage.jsonTwo core libraries:react,react-dom(The scaffolding has been installed for us, we can use it directly)

2. React Project basic procedure

1. Delete the original file under SRC and create your own import filesrc/index.js

2. Import the React and ReactDOM packages

// Import react and react-dom
import React from 'react'
import ReactDOM from 'react-dom'
Copy the code

3. Create elements

React creates basic elements:

React. CreateElement (' Name of tag to create ', {id or class name}, 'tag content ')

Note: {id or class name} can be {} or null if there is no id or class name, but cannot be omitted

For details about how to create high-level elements in JSX, seeReact Project JSX introduction and basic usage

// Import react and react-dom
import React from 'react'
import ReactDOM from 'react-dom'

// Create the elementCreate the tag H1 element with the id box({} or if there is nonenull), the content is'hello react'
const title = React.createElement('h1', {id:'box'}, 'hello react')
Copy the code

Render the React element

// Import react and react-dom
import React from 'react'
import ReactDOM from 'react-dom'

// Create the element
const title = React.createElement('h1', {id:'box'}, 'hello react')

// Render the react element into a div with id 'root' in the index.html file in the public folder of your project.
ReactDOM.render(title, document.getElementById('root'))
Copy the code

5. Launch Project:

Run: NPM start