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 入门学习相关推荐

React 入门学习笔记2
摘自阮一峰:React入门实例教程,转载请注明出处. 一.获取真实的DOM节点组件并不是真实的 DOM 节点,而是存在于内存之中的一种数据结构,叫做虚拟 DOM (virtual DOM).只有当它 ...
React入门学习(一)
文章目录 React 的特点: create-react-app 创建项目: React 元素渲染案例1: 案例2:函数式组件 JSX语法 JSX表达式 React样式和注释 JSX_style样式 ...
React入门学习小案例之番茄计时器与温度控制 App
番茄计时器首先搭建工程 npx create-react-app demoname 在 src 目录下新建 components ,新建一个 Timer.js,Timer.css Timer.js ...
react 入门学习（一）
React 简介 react是什么? React用于构建用户界面的JS库.是一个将数据渲染为HTML视图的开源JS库. 为什么学? 原生JS操作DOM繁琐,效率低使用JS直接操作DOM,浏览器会进行 ...
React Native小白入门学习路径——五
React Native小白入门学习路径--五序 "哦天呐!" 这句话成了我在实验室的口头禅, 老师可能觉得我们都是大神吧,都还在看着基础就给布置了那么多任务:写一个RN的TDD ...
React学习笔记一(React入门+JSX+脚手架)
文章目录 1. React介绍和特点 1.1 React是什么 1.2 React的特点 2. React的开发依赖 2.1 React的三个依赖 2.2 Babel和React的关系 2.3 Rea ...
react入门代码_如何在React中构建温度控制应用程序-包括提示和入门代码
react入门代码我们正在建立的 (What we're building) In this beginner React project, we're going to learn how to ...
Java入门学习注意事项有哪些?
想要学好java技术,做好学习规划路线和注意事项是非常重要的,尤其是零基础学员,Java涉及到的知识点非常多,我们需要制定合理的Java学习路线图,这样会事半功倍,下面小编和大家总结一下Java入门学 ...
《慕课React入门》总结
React 入门与实战 react组件虚拟DOM的概念这是React性能高效的核心算法 React为此引入了虚拟DOM(Virtual DOM)的机制.基于React进行开发时所有的DOM构造都是 ...
React入门指引与实战
React是Facebook公司推出的前端组件化解决方案,目的在于解决前端开发中存在的各个痛点.目前,前端框架与库层出不穷,形成了异常繁荣的局面,那么Facebook为何还要重复造轮子呢?究其原因,F ...

React 入门学习

1. React 介绍

2. React 特点

（1）声明式

（2）组件化

（3）一次学习，跨平台编写

3. React 脚手架

方式 1

方式 2

4. React 基本使用

5. React 创建元素练习

React 入门学习相关推荐

最新文章

热门文章