1.React概述
1.1什么是react
用户构建用户界面的JavaScript库
用户界面:html页面(前端)
react主要用来写html页面,或构建web应用
如果从mvc的角度来看,react仅仅是视图层(V),也就是只负责视图的渲染,而并非提供了完整的M和C的功能。
1.2特点
声明式
基于组件
组件是react最重要的内容
组件表示页面中的部分内容
组合、复用多个组件,可以实现完整的页面功能
学习一次,随处使用
使用react可以web应用
使用react可以开发移动端原生应用(react-native)
使用react可以开发VR(虚拟现实)应用(react 360)
2.react的基本使用
2.1安装
安装命令:npm i react react-dom
- react包是核心,提供创建元素、组件等功能
- react-dom包提供DOM相关功能等
执行完成安装命令之后可以在package.json进行查看
2.2使用
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元素
<script>
const title=React.createElement('h1',null,'Hello React')
</script>
3.渲染React元素到页面中(注意代码的大小写问题)
<div id="root"></div>
<script>
const title=React.createElement('h1',null,'Hello React')
ReactDOM.render(title,document.getElementById('root'))
</script>
2.3方法说明
React.createElement()说明 (知道)
- 返回值:React元素
- 参数1:要创建的React元素的名称
- 参数2:该React元素的属性
- 参数3(及以后的参数):该React元素的子节点
const e1=createElement('h1',{title:'标题'},'Hello React')
ReactDOM.render() 说明
- 参数1:要渲染的React元素
- 参数2:DOM对象,用于指定渲染页面中的位置
ReactDOM.render(title,document.getElementById('root'))
3.React脚手架的使用
3.1意义
- 脚手架是开发现代WEB应用的必备
- 充分利用Webpack、Babel、ESLint等工具辅助项目开发
- 零配置,无需手动配置繁琐的工具即可使用
- 关注业务,而不是工具配置
3.2使用脚手架初始化项目
初始化项目,命令:npx create-react-app my-app
启动项目,在项目的根目录执行命令:npm start
npx命令介绍
- npm v5.2.0引入的一条命令
- 目的:提升包内提供的命令工具的使用体验
- 原来:先安装脚手架包,在使用这个包中提供的命令
- 现在:无需安装脚手架包,就可以直接使用这个包提供的命令
补充说明
-
推荐使用:npx create-react-app my-app
-
create-react-app:固定的脚手架的名字,不可以更改
-
my-app:自己项目的名字,可以自己随意填写
-
-
npm init react-app my-app
-
yarn create react-app my-app
- yarn是Facebook发布的包管理器,可以看作是npm替代品,功能和npm相同
- yarnh具有快速、可靠和安全的特点
- 初始化新项目:yarn init
- 安装包:yarn add 包名称
- 安装项目依赖项:yarn
- 其他命令,参考中文文档 | Yarn 中文文档 (bootcss.com)
3.3在脚手架中使用后React
导入react和react-dom两个包
import React from 'react'
import ReactDOM from 'react-dom'
Reac基础总结
- React是构建用户界面的JavaScript库
- 使用react时,推荐使用脚手架方式
- 初始化项目命令:npx create-react-app my-app
- 启动项目命令:yarn start(或npm start)
- React.createElement()方法用于创建react元素(知道)
- ReactDOM.render()方法负责渲染react元素到页面中