1.1 什么是 React
1️⃣ React 是一个用于构建用户界面的 JavaScript 库。
2️⃣ React 主要用来写HTML页面，或构建Web应用。如果从 MVC 的角度来看，React 仅仅是视图层（V），也就是只负责视图的渲染，而并非提供了完整的 M 和 C 的功能。
3️⃣ React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。
1.2 React 的特点
1.2.1 声明式设计
1️⃣ 你只需要描述 UI（HTML）看起来是什么样，就跟写HTML一样；
2️⃣ React 负责渲染 UI，并在数据变化时更新 UI；
代码演示如下：
const jsx = <div className="app">
<h1>Hello React! 动态变化数据：{count}</h1>
</div>
1.2.2 基于组件
-
组件是
React最重要的内容； -
组件表示页面中的部分内容；
-
组合、复用多个组件，可以实现完整的页面功能；
-
通过
React构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中；
1.2.3 学习一次，随处使用
-
使用 React 可以开发 Web 应用；
-
使用 React 可以开发移动端原生应用（react-native）；
-
使用 React 可以开发 VR（虚拟现实）应用（react 360）等；
（2）React 的基本使用
2.1 React 的安装
安装命令：npm i react react-dom
-
react包是核心，提供创建元素、组件等功能 -
react-dom包提供 DOM 相关功能等
2.2 React 的使用
1️⃣ 引入 react 和 react-dom 两个 js 文件；
2️⃣ 创建 React 元素；
3️⃣ 渲染 React 元素到页面中；
完整代码演示如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>react基本使用</title>
</head>
<body>
<div id="root"></div>
<!-- 1 引入js文件 -->
<script src="./node_modules/react/umd/react.development.js"></script>
<script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
<script>
// 2 创建react元素
// 参数一：元素名称
// 参数二：元素属性
// 参数三：元素的子节点
const title = React.createElement('h1', null, 'Hello React')
// 3 渲染react元素
// 参数一：要渲染的react元素
// 参数二：挂载点
ReactDOM.render(title, document.getElementById('root'))
</script>
</body>
</html>
2.3 方法说明
- React.createElement() 说明（了解即可）
// 返回值：React元素
// 第一个参数：要创建的React元素名称
// 第二个参数：该React元素的属性
// 第三个及其以后的参数：该React元素的子节点
const el = React.createElement('h1', { title: '标题' }, 'Hello React')
ReactDOM.render()说明
// 第一个参数：要渲染的React元素
// 第二个参数：DOM对象，用于指定渲染到页面中的位置
ReactDOM.render(el, document.getElementById('root'))
（3）React 脚手架的使用
3.1 React 脚手架意义
-
脚手架是开发 现代Web 应用的必备；
-
充分利用 Webpack、Babel、ESLint 等工具辅助项目开发；
-
零配置，无需手动配置繁琐的工具即可使用；
-
关注业务，而不是工具配置；
3.2 使用 React 脚手架初始化项目
-
初始化项目，命令：npx create-react-app my-app
-
启动项目，在项目根目录执行命令：npm start
npx 命令介绍：
-
npm v5.2.0 引入的一条命令；
-
目的：提升包内提供的命令行工具的使用体验；
-
从前：先安装脚手架包，再使用这个包中提供的命令；
-
现在：无需安装脚手架包，就可以直接使用这个包提供的命令；
3.3 在脚手架中使用 React
1️⃣ 导入 react 和 react-dom 两个包；
import React from 'react'
import ReactDOM from 'react-dom'
2️⃣ 调用 React.createElement() 方法创建 react 元素；
3️⃣ 调用 ReactDOM.render() 方法渲染 react 元素到页面中；
（4）React 基础小结
-
React是构建用户界面的JavaScript库。
-
使用 react 时，推荐使用脚手架方式。
-
初始化项目命令：npx create-react-app my-app 。
-
启动项目命令：yarn start（或 npm start）。
-
React.createElement() 方法用于创建 react 元素（知道）。
-
ReactDOM.render() 方法负责渲染 react 元素到页面中。
（1）JSX 的基本使用
1.1 createElement() 的问题
-
繁琐不简洁。
-
不直观，无法一眼看出所描述的结构。
-
不优雅，用户体验不爽。
1.2 JSX 简介
1️⃣ JSX 是 JavaScript XML 的简写，表示在 JavaScript 代码中写 XML（HTML） 格式的代码。
2️⃣ 优势：声明式语法更加直观、与HTML结构相同，降低了学习成本、提升开发效率。
3️⃣ JSX 是 React 的核心内容。
1.3 使用步骤
1️⃣ 使用 JSX 语法创建 react 元素；
// 使用 JSX 语法，创建 react 元素：
const title = <h1>Hello JSX</h1>
2️⃣ 使用 ReactDOM.render() 方法渲染 react 元素到页面中；
// 渲染react元素
ReactDOM.render(title, document.getElementById('root'))
😆思考：为什么脚手架中可以使用 JSX 语法？😆：
-
JSX 不是标准的 ECMAScript 语法，它是 ECMAScript 的语法扩展。
-
需要使用 babel 编译处理后，才能在浏览器环境中使用。
-
create-react-app 脚手架中已经默认有该配置，无需手动配置。
-
编译 JSX 语法的包为：https://babeljs.io/docs/en/babel-preset-react
1.4 注意事项
-
React元素的属性名使用驼峰命名法。 -
特殊属性名：class → className、for → htmlFor、tabindex → tabIndex 。
-
没有子节点的React元素可以用 /> 结束 。
-
推荐：使用小括号()包裹 JSX ，从而避免 JS 中的自动插入分号陷阱。
（2）JSX 中使用 JavaScript 表达式
2.1 嵌入 JS 表达式
-
数据存储在JS中
-
语法：{ JavaScript表达式 }
-
注意：语法中是单大括号，不是双大括号！
完整代码演示如下：
import React from 'react'
import ReactDOM from 'react-dom'
/*
JSX中使用JavaScript表达式
*/
const name = 'Jack'
const age = 19
const title = (
<h1>
Hello JSX, {name}, 年龄：{age}
</h1>
)
// 渲染react元素
ReactDOM.render(title, document.getElementById('root'))
2.2 注意事项
-
单大括号中可以使用任意的 JavaScript 表达式
-
JSX 自身也是 JS 表达式
-
注意：JS 中的对象是一个例外，一般只会出现在 style 属性中
-
注意：不能在{}中出现语句（比如：if/for 等）
（3）JSX 的条件渲染
-
场景：loading效果
-
条件渲染：根据条件渲染特定的 JSX 结构
-
可以使用 if/else 或 三元运算符 或 逻辑与运算符 来实现
完整代码演示如下：
import React from 'react'
import ReactDOM from 'react-dom'
/*
条件渲染：
*/
const isLoading = false
// if-else:
// const loadData = () => {
// if (isLoading) {
// return <div>loading...</div>
// }
// return <div>数据加载完成，此处显示加载后的数据</div>
// }
// 三元表达式：
// const loadData = () => {
// return isLoading ? (<div>loading...</div>) : (<div>数据加载完成，此处显示加载后的数据</div>)
// }
// 逻辑与运算符：
const loadData = () => {
return isLoading && (<div>loading...</div>)
}
const title = (
<h1>
条件渲染：
{loadData()}
</h1>
)
// 渲染react元素
### 最后
好了，这就是整理的前端从入门到放弃的学习笔记，还有很多没有整理到，我也算是边学边去整理，后续还会慢慢完善，这些相信够你学一阵子了。
做程序员，做前端工程师，真的是一个学习就会有回报的职业，不看出身高低，不看学历强弱，只要你的技术达到应有的水准，就能够得到对应的回报。
学习从来没有一蹴而就，都是持之以恒的，正所谓活到老学到老，真正懂得学习的人，才不会被这个时代的洪流所淘汰。
6万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
