Reconocer y usar React Scaffolding para crear proyectos de 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
3. Descripción del directorio de archivos
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运行
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.