React学习-脚手架创建项目_rect脚手架创建项目命令-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_43005178/article/details/109133087

本文详细介绍如何使用create-react-app脚手架快速搭建React项目，并解析项目目录结构及各文件的作用，如index.html作为入口页面，App.js作为核心组件等。同时介绍了严格模式的使用及其带来的好处。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

React学习-脚手架创建项目

准备好前端node.js环境，安装react的脚手架–create-react-app

npm install -g create-react-app

接下来利用create-react-app命令来创建一个react项目

create-react-app my-app

在这里插入图片描述

安装完成之后提示信息
React脚手架，项目目录结构
public
- favicon.ico 👉 浏览器标签页面上的图标
- logoXXX.png 👉 用在各个地方不同尺寸的logo
- manifest.json 👉 配置app的
- robots.txt 👉 也称作robots协议，告诉搜索引擎：哪些可以搜索？哪些不可以搜索
  - User-agent: *👉 允许被搜索到的东西，*表示通配符–>全部
  - Disallow: 👉 不允许被搜索到的内容
- index.html 👉 入口页面
src
- App.css 👉 组件的CSS
- App.js 👉 组件的JS
- App.test.js 👉 组件的测试模块
- index.css 👉 整个项目的css文件，全局css
- index.js 👉 整个项目的入口js文件
- logo.svg 👉 svg图片
- serviceWorker.js 👉 用于移动端，实现离线浏览功能
- setupTests.js 👉 设置测试的配置文件

严格模式是什么?

在/src/index.js文件中有一个<React.StrictMode>标签，即代表了严格模式

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

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

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();