第三章React脚手架

一、脚手架的使用

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

 1. 全局安装 :npm i -g create-react-app 
 2. 创建项目:create-react-app 项目名
 3. 项目文件夹：:cd hello-react
 4. 启动项目: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>
    )
  }
}