学习目标:
(1)搭建和启动一个新的React项目
(2)认识React项目中的目录
1、安装node.js
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。