Use andamios de reacción para crear rápidamente un proyecto y una introducción a los archivos del proyecto (función y función de los archivos de directorio)

prefacio

Este artículo le enseña cómo usar scaffolding para construir un proyecto de reacción Para un proyecto de reacción recién creado, ¿qué hacen los archivos en el directorio del proyecto y cuáles son sus funciones? Echemos un vistazo a continuación ~

reaccionar andamios

1. Instale create-react-app localmente usando yarn:

npm i -g yarn #全局安装yarn
yarn -v #查看yarn版本号

• Cómo instalar paquetes relacionados localmente usando npx

yarn init -y #初始化项目
yarn add -D create-react-app #使用本地安装
npx create-react-app --version #查看脚手架版本

npx encontrará automáticamente el archivo ejecutable en el paquete de dependencia actual. Si no puede encontrarlo, irá a la variable de entorno para encontrarlo. Si aún no puede encontrarlo, lo ayudará a instalarlo.

• Crear proyecto de reacción con npx

npx create-react-app react-demo1

Aquí, no tenemos que instalar create-react-app globalmente, npx puede ejecutarlo.

2. Instale create-react-app globalmente, echemos un vistazo aquí

npm i -g create-react-app // 全局安装
create-react-app --version  查看版本号
create-react-app react-demo // 初始化项目

npm run eject/yarn eject copiará todos los archivos dependientes y las dependencias correspondientes (webpack, babel, etc.) a su proyecto. Es una operación unidireccional. Una vez expulsada, la operación de npm run eject es irreversible. El proyecto de reacción original oculta todas las configuraciones relacionadas con el paquete web y, después de ejecutar el comando de expulsión, se exponen todos los elementos de configuración relacionados.

Como se muestra en la figura, el proyecto se creó con éxito:

Ejecute el proyecto con npm start:

directorio de proyectos

Después de que el proyecto se haya creado correctamente, echemos un vistazo al directorio del proyecto:

--node_modules  项目依赖文件
--public  静态资源目录
目录里的index.html 是项目的入口文件
manifest.json 缓存文件,即使没有网,离线了也能够打开页面
robots.txt 给搜索引擎看的
--src 项目源码核心
index.js 是项目的入口
reportWebVitals.js 前端性能检测工具
setupTests.js 单元测试的
--package.json  项目配置文件

En el directorio público, solo podemos mantener el archivo index.html y el ícono favicon.ico. En el directorio src, podemos eliminar otros archivos y solo podemos mantener index.js y App.js. En este momento, encontramos que nuestro project es muy simple, también se puede escribir usando los siguientes componentes de clase.

// import React from 'react';等同于下面的写法
import ReactDOM from 'react-dom';
import App from './App'

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

Aplicación.js

import React, {
    
     Component } from 'react'
 export class App extends Component {
    
    
   render() {
    
    
     return (
       <div>
         <h1>
           hello react
         </h1>
       </div>
     )
   }
 }
 export default App

De esta manera, obtenemos la versión más simple del directorio del proyecto de reacción y lo ejecutamos para ver: