Use react scaffolding to quickly build a project and an introduction to project files (function and role of directory files)

foreword

This article teaches you how to use scaffolding to build a react project. For a newly created react project, what do the files in the project directory do and what are their functions? Let's take a look below~

react scaffolding

1. Install create-react-app locally using yarn:

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

• How to install related packages locally using npx

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

npx will automatically find the executable file in the current dependency package. If it can't find it, it will go to the environment variable to find it. If it still can't find it, it will help you install it.

• Create react project with npx

npx create-react-app react-demo1

Here, we don't have to install create-react-app globally, npx can execute it.

2. Install create-react-app globally, let's take a look here

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

npm run eject/yarn eject will copy all dependent files and corresponding dependencies (webpack, babel, etc.) to your project. It is a one-way operation. Once ejected, the operation of npm run eject is irreversible. The original react project hides all webpack-related configurations, and after executing the eject command, all related configuration items are exposed.

As shown in the figure, the project was successfully created:

Run the project with npm start:

project directory

After the project is created successfully, let's take a look at the directory of the project:

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

In the public directory, we can only keep the file index.html and the icon favicon.ico. In the src directory, we can delete other files and only keep index.js and App.js. At this time, we found that our project is very simple, we It can also be written using the following class components.

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

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

App.js

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

In this way, we get the simplest version of the react project directory, and run it to view: