目录
1. React 介绍
2. React 特点
(1)声明式
(2)组件化
(3)一次学习,跨平台编写
3. React 脚手架
方式 1
方式 2
4. React 基本使用
5. React 创建元素练习
1. React 介绍
了解 react 的历史背景和基本概念
React 起源于 Facebook 的内部项目。因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站。做出来以后,发现这套东西很好用,就在 2013 年 5 月开源了。
React 是最流行的前端框架之一。对比近两年 Vue 和 Angular 的下载量,还有 2021 年开发者使用的 web 框架的 比例 ,可以看到 React 是前端工程师应该必备技能之一,现在很多大厂也在使用它。
React 是一个用于构建用户界面的 JavaScript 库。可以理解它只负责 MVC 中的视图层渲染,不直接提供数据模型和控制器功能。react-router 实现路由,redux 实现状态管理,可以使用它们来构建一个完整应用。
React 中文站,React 官方中文文档 – 用于构建用户界面的 JavaScript 库
总结: React 是 Facebook 开源的,现在它是最流行的前端框架大厂必备,React 本身是一个构建 UI 的库,如果需要开发一个完整的 web 应用需要配合 react-router,redux,...等。
2. React 特点
了解 react 的三个核心特点
(1)声明式
React 使创建交互式 UI 变得轻而易举。为你应用的每一个状态设计简洁的视图,当数据变动时 React 能高效更新并渲染合适的组件。 以声明式编写 UI,可以让你的代码更加可靠,且方便调试。
(2)组件化
创建拥有各自状态的组件,再由这些组件构成更加复杂的 UI。 组件逻辑使用 JavaScript 编写而非模版,因此你可以轻松地在应用中传递数据,并使得状态与 DOM 分离。
(3)一次学习,跨平台编写
总结: 声明式 UI 更清晰快捷,组件化开发更灵活,可支持 SSR,SPA ,NativeApp,VR 多平台。
3. React 脚手架
掌握使用 create-react-app 脚手架创建项目
创建项目方式:
- 全局安装脚手架再使用命令创建项目
- 使用 npx 远程调用脚手架创建项目
方式 1
- 全局安装
# 全局安装脚手架
npm i create-react-app -g
- 创建项目
# project-name 项目名称
create-react-app project-name
方式 2
- npx 安装,npm5.2+支持
# project-name 项目名称
npx create-react-app project-name
推荐: 使用方式 2这样每次使用的最新脚手架创建项目,创建完毕使用 npm start
启动项目。
4. React 基本使用
在 create-react-app 脚手架创建项目中,掌握使用 react 基本步骤
使用步骤:
- 导入
react
react-dom
两个包 - 使用
react
创建 react 元素(虚拟 DOM) - 使用
react-dom
渲染 react 元素
落地代码:src 内文件删除,创建src/index.js
- 导包
// 负责创建react元素
import React from 'react';
// 负责把react元素渲染到页面
import ReactDom from 'react-dom';
- 创建 react 元素
// 参数1:标签名称
// 参数2:属性集合 特殊 class==>className for==>htmlFor
// 参数3:标签内容
const element = React.createElement('h1', { id: 'el' }, 'Hello React');
- 渲染 react 元素
// #root在public/index.html上
ReactDom.render(element, document.getElementById('root'));
总结: 使用 react
创建元素,使用 react-dom
渲染元素。
5. React 创建元素练习
掌握使用 react 创建嵌套元素
练习题目:
- 使用 react 创建如下元素
<div class="list">
<h1>水果</h1>
<ul>
<li>苹果</li>
<li>橘子</li>
</ul>
</div>
落地代码:
import React from 'react';
import ReactDOM from 'react-dom';
const element = React.createElement('div', { className: 'list' }, [
React.createElement('h1', null, '水果'),
React.createElement('ul', null, [
React.createElement('li', null, '苹果'),
React.createElement('li', null, '橘子'),
]),
]);
ReactDOM.render(element, document.getElementById('root'));
总结: 使用 createElement
创建元素非常麻烦、可读性差、不优雅,开发中推荐使用 JSX 来声明 UI。
更多推荐
React 入门学习
发布评论