React脚手架的配置_react start配置-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_49075665/article/details/118545251

1：建立新的React脚手架

安装yarn：npm install -g yarn （可以不安装）
全局安装：npm i -g create-react-app
切换到想创项目的目录，使用命令：create-react-app 项目名称
进入项目文件夹，目录框中输入cmd, 启动项目：npm start或yarn start（需要已经安装yarn）

2：脚手架中的各个文件是？

ReactNews
	|--node_modules---第三方依赖模块文件夹
	|--public
		|-- index.html-----------------主页面
		|--favicon.icon ------ 网站页签图标----------------（可删）
		|--logo192.png ------- logo图 ---------------------（可删）
		|--logo512.png ------- logo图 ---------------------（可删）
		|--manifest.json ----- 应用加壳的配置文件-----------（可删）
		|--robots.txt -------- 爬虫协议文件----------------（可删）
	|--scripts
		|-- build.js-------------------build打包引用配置
	|-- start.js-------------------start运行引用配置
	|--src------------源码文件夹
		|--App.css -------- App组件的样式
		|--App.js --------- App组件
		|--index.css ------ 样式
		|--index.js ------- 入口文件
		|--App.test.js ---- 用于给App做测试----------------（可删）
		|--logo.svg ------- logo图------------------------（可删）
		|--reportWebVitals.js-----------------------------（可删）
			--- 页面性能分析文件(需要web-vitals库的支持)
		|--setupTests.js（可删）
			---- 组件单元测试的文件(需要jest-dom库的支持)
	|--.gitignore------git版本管制忽略的配置（可删）
	|--package.json----应用包配置文件 
	|--README.md-------应用描述说明的readme文件

3. index.html准备容器`root`

<!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" />
    
    <!-- 用于配置浏览器页签+地址栏的颜色(仅支持安卓手机浏览器) -->
    <meta name="theme-color" content="pink" />
    <meta name="description" content="Web site created using create-react-app" />
    
    <!-- 用于指定网页添加到手机主屏幕后的图标 -->
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    
    <!-- 应用加壳时的配置文件 -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    
    <title>React App</title>
</head>

<body>

    <!-- 若llq不支持js则展示标签中的内容 -->
    <noscript>You need to enable JavaScript to run this app.</noscript>
    
    <!-- 整个React的容器 -->
    <div id="root"></div>
</body>

</html>

4. App.js 中创建虚拟DOM

//创建“外壳”组件App
import React, { Component } from 'react'   //引入React核心库

//创建并暴露App组件
export default class App extends Component {
	render() {
		return (
			<div>
				App...
			</div>
		)
	}
}

5. index.js 渲染虚拟DOM

import React from 'react'    		//引入React核心库
import ReactDOM from 'react-dom'    //引入操作DOM 的react 扩展库
import App from './App'  		   //引入App组件

//渲染虚拟DOM
ReactDOM.render(<App />, document.getElementById('root'))