使用creat-react-app脚手架创建react应用_新版本react脚手架-CSDN博客

本文链接：https://blog.csdn.net/weixin_44448747/article/details/121975818

使用脚手架优点

快速创建模板项目：包含所有需要的配置（语法检查、jsx编译、DevServer…），下载好了所有相关依赖，可以直接运行一个简单效果
项目的整体技术架构为：react + webpack + es6 + eslint
模块化、组件化、工程化

创建项目并启动

全局安装脚手架：npm install -g creat-reaact-app
切换到想创建项目的目录，使用命令：creat-react-app hellp-react
进入项目文件夹：cd hello-react
启动项目：npm start

react脚手架项目目录结构

public ----- 静态资源文件
favicon.icon -----网页页签标题
index.html -----主页面
robots.txt ----- 爬虫协议文件
manifest.json ----- 应用加壳的配置文件（网页加安卓壳变.apk文件，如pc版网页加壳变移动端）
src ----- 源码文件夹
App.css -----App组件的样式
App.js ----- App组件
index.js ----- 入口文件

index.html文件详解

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<!-- %PUBLIC_URL%代表public文件夹的路径 -->
		<link real="icon" href="%PUBLIC_URL%/favicon.icon" />
		<!-- 开启理想视口，用于做移动端网页的适配 -->
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<!-- 用于配置浏览器页签 + 地址栏的颜色（仅支持安卓手机浏览器，兼容性不好） -->
		<meta name="theme-color" content="#000" />
		<!-- 描述 -->
		<meta name="description" content="Web site created using creat-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>
		<!-- 若浏览器不支持js则展示标签中的内容 -->
		<noscript>You need to enable JavaScript to run this app.</noscript>
		<div id="root"></div>
	</body>
</html>