一、脚手架的使用

1-1、创建项目并且启动

1. 全局安装 :npm i -g create-react-app 2. 创建项目:create-react-app 项目名3. 项目文件夹：:cd hello-react4. 启动项目:npm start

1-2、项目目录解析

public ---- 静态资源文件夹favicon.icon ------ 网站页签图标index.html -------- 主页面logo192.png ------- logo图logo512.png ------- logo图manifest.json ----- 应用加壳的配置文件robots.txt -------- 爬虫协议文件
src ---- 源码文件夹App.css -------- App组件的样式App.js --------- App组件App.test.js ---- 用于给App做测试index.css ------ 样式index.js ------- 入口文件logo.svg ------- logo图reportWebVitals.js--- 页面性能分析文件(需要web-vitals库的支持)setupTests.js---- 组件单元测试的文件(需要jest-dom库的支持)

1-3、hello-react

App.js组件

import React from "react";
import Hello from "./Hello";
// 创建外壳组件App
class App extends React.Component {render(){return (<div><Hello /></div>)}
}
export default App;

Hello.js组件

import React from "react";
// 创建外壳组件App
export default class Hello extends React.Component {render(){return (<div>hello,React</div>)}
}