一.React概述
1.什么是React
React是一个用于构建用户界面的JavaScript库。
用户界面:HTML页面(前端)
React主要用来写HTML页面,或构建Web应用
如果从MVC的角度来看,React仅仅是视图层(V),也就是只负责视图的渲染,而并非提供了完整的M和C的功能。
React起源于Facebook的内部项目,后又用来架设Instagram的网站,并于2013年5月开源
2.React的特点
1.声明式
你只需要描述UI( HTML)看起来是什么样,就跟写HTML一样
React负责渲染Ul,并在数据变化时更新U
2.基于组件
组件是React最重要的内容
组件表示页面中的部分内容
组合、复用多个组件,可以实现完整的页面功能
3.学习一次,随处使用
使用React可以开发Web 应用
使用React可以开发移动端原生应用( react-native )
使用React可以开发VR(虚拟现实)应用( react 360 )
二.React的基本使用
1.React的安装
安装命令: npm i react react-dom
react包是核心,提供创建元素、组件等功能
react-dom包提供DOM相关功能等
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元素
3.渲染React元素到页面中
<div id="root"></div>
<script>
//参数一:元素名称
//参数二:元素属性
//参数三:元素的子节点
const title = React.createElement('h1', null, 'Hello React')
//参数一:要渲染的react元素
//参数二:挂载点
ReactDOM.render(title, document.getElementById('root'))
</script>
完整例子:
<!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">
<title>Document</title>
</head>
<body>
<script src="./node_modules/react/umd/react.development.js"></script>
<script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
<div id="root"></div>
<script>
const title = React.createElement('h1', null, 'Hello React')
ReactDOM.render(title, document.getElementById('root'))
</script>
</body>
</html>
3.方法说明
React.createElement()说明(知道)
ReactDOM.render()说明
三.React脚手架的使用
1.React脚手架意义
1.脚手架是开发现代Web应用的必备。
2.充分利用Webpack、Babel、ESLint等工具辅助项目开发。
3.零配置,无需手动配置繁琐的工具即可使用。
4.关注业务,而不是工具配置。
2.使用React脚手架初始化项目
1.初始化项目,命令:npx create-react-app my-app
2.启动项目,在项目根目录执行命令:npm start
3.npx命令介绍
npm v5.2.0引入的一条命令
目的:提升包内提供的命令行工具的使用体验
原来:先安装脚手架包,再使用这个包中提供的命令
现在:无需安装脚手架包,就可以直接使用这个包提供的命令
补充说明
1.推荐使用:npx create-react-app my-app
2. npm init react-app my-app
3. yarn create react-app my-app
yarn是 Facebook发布的包管理器,可以看做是npm的替代品,功能与npm相同
yarn具有快速、可靠和安全的特点
初始化新项目: yarn init
安装包: yarn add 包名称
安装项目依赖项:yarn
其他命令,请参考yarn文档
3.在脚手架中使用React
1.导入react和react-dom两个包
import React form 'react'
import ReactDOM from 'react-dom'
2.调用React.createElement()方法创建react元素。
3.调用ReactDOM.render()方法渲染react元素到页面中。
例子:
在index,js文件书写下面代码
//1.导入react
import React from 'react'
import ReactDOM from 'react-dom'
//2.创建react元素
const title = React.createElement('h1', null, 'Hello React')
//3.创建react元素
ReactDOM.render(title, document.getElementById('root'))
四.总结
1. React是构建用户界面的JavaScript库
2.使用react时,推荐使用脚手架方式。
3.初始化项目命令:npx create-react-app my-app。
4.启动项目命令: yarn start (或npm start )。
5. React.createElement()方法用于创建react元素(知道)。
6. ReactDOM.render()方法负责渲染react元素到页面中。