目录
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。
1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,会注明原创字样,如未注明都非原创,如有侵权请联系删除!;3.作者投稿可能会经我们编辑修改或补充;4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。 |