[Cubo de la familia React] Conozca y use el andamiaje React para crear proyectos React

1. Use create-react-app para inicializar el andamiaje de React

1. Introducción al andamiaje de reacción

1. La función es ayudar a los programadores a crear rápidamente proyectos de plantilla
2. React proporciona una biblioteca de andamios para crear proyectos de reacción: create-react-app
3. La arquitectura técnica general del proyecto es react+webpack+es6+eslint
4. Características: Modularización, componentización, ingeniería.

2. Crea un proyecto y comienza

npm instale el repositorio globalmente: npm i -g create-react-app
Use el comando create-react-app para crear un nuevo proyecto: create-react-app hello-react Vaya
a la carpeta del proyecto: cd hello-react
Inicie el proyecto : npm inicio

inserte la descripción de la imagen aquí

3. Descripción del directorio de archivos

inserte la descripción de la imagen aquí

inserte la descripción de la imagen aquí

2. Simplificar los documentos del proyecto

(1)删除public和src文件夹里的内容
(2)在public中新建index.html文件

<!--index.html-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <!-- %PUBLIC_URL%表示public文件夹的路径 -->
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <!-- 开启理想视口,用于做移动端网页的适配 -->
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

(3)安装vscode扩展:ES7+ React/Redux/React-Native snippets

(4)在src文件夹下新建App.jsx或者App.js文件,输入快捷命令:rcc

//App.js
//输入rcc 或者rfc ,快捷生成函数式或类式组件
import React, {
    
     Component } from 'react';

export default class APP extends Component {
    
    
  render() {
    
    
    return <div>Hello React</div>;
  }
}

(5)在src文件夹下新建index.js文件

//index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

ReactDOM.render(
    <App />,
    document.getElementById('root')
  );

(6)在终端使用npm start运行
inserte la descripción de la imagen aquí

Lo anterior es el contenido del uso del scaffolding de React para crear un proyecto de React. Preste atención a la columna " Cubo de la familia React ".
Compartiré los problemas comunes en mis proyectos habituales y el conocimiento de la prueba escrita y la entrevista contigo en CSDN, y progresaremos juntos.

Supongo que te gusta

Origin blog.csdn.net/weixin_46318413/article/details/122607873
Recomendado
Clasificación