preface

Today we will use scaffolding to create our first React project. See what the structure looks like. React react syntax

React scaffolding

1. Why use scaffolding?

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

2. Initialize the project using scaffolding

  • To initialize the project, command:npx create-react-app demo

– If the following figure is displayed, it is successful

  • To start the project, run the following command in the root directory of the project:npm startoryarn start

– After running the above commands, the first React project created by scaffolding is already running locally– Below is the initial page after running

3. Introduction to 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 scaffolding package first, using the commands provided in this package
  • Now: You can use the commands provided by this package without having to install the scaffolding package

The REACT Project

1. 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 (rendered) topublic/index.htmlThe root node defined in

2. Use React in scaffolding

  • The importreactandreact-domTwo packages

The code is as follows (example) :

import React from 'react'
import ReactDOM from 'react-dom'
Copy the code
  • useReact.createElement()The react method creates the react element usingReactDOM.render()The React method renders the react element
const el = React.createElement('h1'.null.'Hello React scaffolding ')
ReactDOM.render(el, document.getElementById('root'))
Copy the code
  • Create react elements using JSX syntax, usingReactDOM.render()The React method renders the react element
const jsx = <h1>Hello React JSX scaffolding</h1>
ReactDOM.render(jsx, document.getElementById('root'))
Copy the code

3. Use JSX in a separate JS file

  • Create a file namedHello.jsThe file
  • inHello.jsImport the React
  • Create a function component that returns a JSX structure
  • inHello.jsExport the component in the file
  • inindex.jsFile to import the Hello component
  • inindex.jsRender component in file, < tag wrap function name />

The code is as follows (example) :

// Hello.js
import React from 'react'
function Hello () {
  return <h1>Hello React JSX scaffolding, which is the component for exporting files</h1>; }// Export the Hello component
export default Hello
Copy the code
// index.js
import Hello from './Hello'
// Render the imported Hello component
ReactDOM.render(<Hello/>,root)
Copy the code

conclusion

You never know till you have tried.