React教程（一）React基础

1 React基础

目标

能够说出React是什么
能够说出React特点
能够掌握React的基本使用
能够使用React脚手架

1.1 React概述

官方网址

https://zh-hans.reactjs.org/

1.1.1 什么是React

React是一个用于构建用户界面的JavaScript库。

如果从MVC的角度来看，React仅仅是视图层V，也就是只负责视图的渲染，而非提供了完整的M和C的功能。

React起源于Facebook的内部项目，后来用来构建ins网站。

1.1.2 React的特点

声明式
- 你只需要描述UI（HTML）看起来是什么样，就跟写HTML一样。
基于组件
- 组件是React最重要的内容
- 组件表示页面中的部分内容
学习一次，随处使用
- 使用React可以开发Web应用
- 使用React可以开发移动端原生应用（react-native）
- 使用React可以开发VR应用（react 360）

1.2 React的基本使用

1.2.1 安装React

安装命令

npm i react-dom

react包是核心，提供创建元素、组件等功能
react-dom包提供DOM相关功能

1.2.2 React的使用

1、引入react和react-dom两个js文件

<script src="./node_modules/react/umd/react.development.js"></script>
<script src="./node_modules/react-dom/umd/react-dom.development.js"></script>

2、创建React元素

const title = React.createElement('h1', null, 'Hello React')

3、渲染React元素到页面中

ReactDOM.render(title, document.getElementById('root'))

整体代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 1 引入js文件 --><script src="./node_modules/react/umd/react.development.js"></script><script src="./node_modules/react-dom/umd/react-dom.development.js"></script><title>01-react基本使用</title>
</head>
<body><div id="root"></div>
</body>
<script>// 2 创建react元素// 参数1：元素名称   参数2：元素属性 第三个及其以后的参数3：元素的子节点const title = React.createElement('h1', {title:'我是标题'}, 'Hello React')// 3 渲染react元素// 参数1：要渲染的react元素 参数2：挂载点ReactDOM.render(title, document.getElementById('root'))
</script>
</html>

实现效果：

1.3 React的脚手架使用

1.3.1 React脚手架意义

脚手架是开发现代Web应用的必备。
充分利用Webpack、Babel、ESLint等工具辅助项目开发。
零配置，无需手动配置繁琐的工具即可使用。

1.3.2 使用React脚手架初始化项目

1、初始化项目命令

npx create-react-app my-app

2、启动项目命令

cd my-app
npm start

3、启动成功

访问浏览器

localhost:3000

1.3.3 npx命令介绍

npm v5.2.0引入的一条命令
目的：提升包内提供命令行工具的使用体验
原来：先安装脚手架包，再使用这个包中提供的命令
现在：无需安装脚手架包，就可以直接使用这个包提供的命令

推荐使用 npx create-react-app my-app

1.3.4 在脚手架中使用React

导入react和react-dom两个包

import React from 'react'
import ReactDOM from 'react-dom'

调用React.createElement()方法创建react元素
调用ReactDOM.render()方法渲染react元素到页面中

首先，打开刚刚用脚手架创建好的my-app程序，删除index.js中的所有代码，添加以下代码:

import React from 'react'
import ReactDOM from 'react-dom'const title = React.createElement('h1', null, 'Hello React')
ReactDOM.render(title, document.getElementById('root'))

可以看到页面已经自动刷新了：

1.4 基础总结

React是构建用户界面的JavaScript库
使用react时，推荐使用脚手架方式
初始化项目命令：
- ```
npx create-react-app my-app
```
启动项目命令
- ```
npm start
```
React.createElement()用于创建react元素（知道就行，后面会介绍更加友好的创建元素的方式）
ReactDOM.render()用于渲染react元素到页面中

React教程（一）React基础相关推荐

React教程（二）：React组件基础
传送门: React教程(一):React基础一.组件概念 react官方解释: React 允许你将标记.CSS 和 JavaScript 组合成自定义"组件",即应用程序中可 ...
React教程（一）：React基础
传送门: React教程(二):React组件基础一.React介绍 React是什么一个专注于构建用户界面的javascript库,和vue和angular并称前端三大框架,不夸张的说,re ...
【React】immutable.js 基础教程
文章目录 JS中数据修改问题介绍常用API object转Map对象 array转List对象 JS转immutable immutable转JS Redux中集成用它的原因是为了解决问题:解决 ...
从零开始React：一档 React环境搭建，语法规则，基础使用
手挽手带你学React入门第一期,带你熟悉React的语法规则,消除对JSX的恐惧感,由于现在开发中都是使用ES6语法开发React,所以这次也使用ES6的模式进行教学,如果大家对ES6不熟悉的话,先 ...
SAP官网发布的react教程
大家学习React的时候,用的是什么教程呢?Jerry当时用的阮一峰博客上的入门教程,因为React使用的JSX语法并不是所有的浏览器都支持,所以还得使用browser.js在浏览器端将JSX转换成J ...
react 最佳实践_最佳React教程
react 最佳实践 React is a JavaScript library for building user interfaces. It was voted the most loved i ...
前端React教程第六课认识栈调和、setState和Fiber架构
10 React 中的"栈调和"(Stack Reconciler)过程是怎样的? 时下 React 16 乃至 React 17 都是业界公认的"当红炸子鸡" ...
视频教程-最新完整react教程从入门到精通包教包会-ReactJS
最新完整react教程从入门到精通包教包会 10年以上开发经验,曾经是八维教育实训主任,千峰教育高级HTML5前端讲师,尚品中国创始人.现任程序思维创始人.曾和大厂.国企等大型企业合作开发项目.百余客 ...
Vue教程，React教程
Vue学习 Vue实战篇三十三:实现新闻的浏览历史 2021 Vue.js 面试题汇总及答案 Web学习(十一) Vue springboot+vue练手小项目[前台搭建+后台编写](非常详细) Sp ...