React学习（一）——React项目启动

学习目标：

（1）搭建和启动一个新的React项目

（2）认识React项目中的目录

文章目录

一、准备工作

二、创建和启动React项目

三、项目目录结构

四、src目录和项目初始化

---

一、准备工作

1、安装node.js   

官网：https://node.js.org/en

2、安装npm

二、创建和启动React项目

windows：打开命令行工具（按住shift+鼠标右击 或者 cmd），执行一下指令

（1）创建一个项目

npx create-react-app test（项目名称）

（2）进入项目文件

cd test

（3）启动项目

npm start

三、项目目录结构

就从上到下简单说一下吧 

• node_modules：放置的是项目依赖的一些文件
• public放置的是一些静态的资源
• src就是最主要的写业务逻辑的地方啦
• .gitignore：是放置一些在使用git时，不需要推送的文件
• package-lock.json：放置的是依赖的各种信息，比如具体来源和版本号，模块下载地址、及这个模块又依赖了哪些依赖
• package.json：是一些文件说明，记录当前项目中下载了哪些包还有一些指令
• README.md：文档书写

四、src目录和项目初始化

 1、APP.test.js带有test的都是一些测试的文件，可以直接删除

• App.test.js：测试了一个叫做 App 的 React 组件是否能够正确地渲染，并且是否能在渲染的组件中找到包含文本 'learn react' 的 DOM 元素
• setupTests.js：是测试的配置代码，它使用了 @testing-library/jest-dom 库来增强 Jest 测试框架的功能，以便于在测试中对 DOM 节点进行断言。

2、App.css和index.css是一些样式，可以直接删除

3、reportWebVistals.js：这个文件的作用是在网页应用程序中报告网页性能指标（Web Vitals）

剩下的两个文件为App.js和index.js 我们可以详细看看里面的内容

1、index.js

这是项目的入口文件，我们可以删去一些已经删除掉的文件的相关代码，如index.css 和reportWebVistals 的引入 reportWebVistals函数的调用，得到简化后的结果如下：

import React from 'react';  //导入了React库
import ReactDOM from 'react-dom/client';  //ReactDOM是用于在浏览器中渲染React应用的库
import App from './App';  //导入App组件

//创建了一个称为root的根渲染容器
const root = ReactDOM.createRoot(document.getElementById('root')); 

//调用了root渲染容器的render方法，将App组件渲染到界面上
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

注：其中的<React.StrictMode></React.StrictMode>也是可以删除的

 扩展：React严格模式-React.StrictMode - 简书 (jianshu.com)

（1）<React.StrictMode></React.StrictMode> 表示严格模式，只在开发模式下运行，不会与生产模式冲突。

（2）它可以在代码的任何地方启用严格模式，在文件入口中使用，会对它的所有后代元素都进行检查；在单个组件中使用，会对ComponentTable和ComponentDialog以及他们的所有后代元素进行检查，不会对CommonInfo组件运行严格模式。

（3）使用StrictMode的优点：

• 识别不安全的生命周期组件
• 有关旧式字符串ref用法的警告
• 关于使用废弃的 findDOMNode 方法的警告
• 检测意外的副作用
• 检测过时的 context API

2、App.js 

其实App就是一个组件，我们可以简化一下内容，让其只是包含一个"hello world"的标题，代码如下：

function App() {
  return (
    <div className="App">
      <h1>hello world</h1>
    </div>
  );
}

export default App;

注意：

因为React要求在组件中只返回一个根元素，如果有两个同级的元素，可以使用<React.Fragment></React.Fragment>或者<></>包裹起来，它们都属于幽灵标签，不会渲染任何真实的UI。