React入门（一）——React介绍、项目创建、JSX语法

最新推荐文章于 2024-07-24 08:58:17 发布

戈亓

最新推荐文章于 2024-07-24 08:58:17 发布

阅读量586

点赞数 2

分类专栏： React 文章标签： react.js npm 前端

本文链接：https://blog.csdn.net/qq_52193816/article/details/125419087

版权

本文介绍了React的基本概念，包括React的起源、与传统MVC的区别、虚拟DOM以及React的主要特性。通过create-react-app创建项目，讲解如何编写第一个React应用程序。详细阐述了JSX语法、Class和函数组件的创建，以及组件样式的处理。同时，提到了React 18的新特性及注意事项。

摘要由CSDN通过智能技术生成

自学react，本文为b站千锋教育2022版React全家桶教程_react零基础入门到项目实战完整版课程笔记
补充部分React 18 特性
b站千锋教育2022版React全家桶教程_react零基础入门到项目实战完整版

一、React介绍

1、React 的起源与发展

Fcabook内部项目，由于不满意市场上的JavascriptMVC 框架，就自己写了一套，与2013年5月开源

2、与传统MVC的关系

不是完整的MVC框架；React 将界面分成个各个独立的小块，每一个小块都是组件，组件之间进行组合嵌套，构成页面。

3、React的特性

声明式设计
高效：虚拟DOM减少与DOM的交互
灵活：与已知的框架很好的配合
JSX：Javascript语法的扩展
组件：复用性高
单向响应的数据流-React实现了单项响应的数据流，减少了重复代码

4、虚拟DOM

React将真实DOM树转换成Javascript对象树，也就是Virtual DOM

二、create-react-app

全局安装 create-react-app

npm install -g create-react-app

创建项目

npm create-react-app  myapp(项目名称)

如果不想全局安装，可以使用npx安装

npx create-react-app myapp(项目名称)

创建的过程会安装三个东西

react： react 的顶级库
react-dom： web端使用移动端使用react-native
react-scripts：包含运行和打包react应用的所有脚本和配置

根据提示命令，即可进入项目，运行 npm start 即可运行项目

|——README.md    	使用方法的文档
|——node_modules		所有依赖安装的目录
|——package-lock.json 	锁定配置信息，安装的包的版本
|——package.json
|——public				静态公共目录
|——src					开发用的源代码目录

常见问题：

npm 安装失败
- npm 切换为淘宝镜像
```
npm install --registry=https://registry.npm.taobao.org
```
- 使用yarn 安装
- 删除package-lock 和node_modules文件，重新执行命令
- 清除 npm缓存，
```
npm cache clean --force
npm install
```