前言
众所周知,前端三大框架分别是react、angular、vue,今天我们就一起看看react框架的入门吧~
一、React定义和特点
1. 什么是React?
- React是一个用于构建用户界面的JavaScript库
- 用户界面:HTML页面(前端)
- 如果从MVC的角度看,React仅仅是视图层(V),也就是只负责视图的渲染,而并非提供了完整的M和C的功能
- React起源于Facebook的内部项目,后来用于开发Instagram网站,并与2013年5月开源
2. 特点
- 声明式
需要描述的UI(HTML)看起来是什么样,就和写HTML一样
const jsx = <div className="app">
<h1>Hello React! 动态变化数据: {count}</h1>
</div>
-
基于组件
组件就是看到的页面,由结构(HTML)、样式(CSS)、行为(JS)组成,且封装在一起。体现出“独立、可复用、可组合”三个特点 -
学习一次,随处使用
使用React可以开发web应用
使用React可以开发移动端应用
使用React可以开发VR(虚拟现实)应用(react 360)
……
二、React基本使用
1. 开发环境搭建
- 创建项目目录
- 使用
npm init -y
命令初始化项目配置 - 检查
package.json
文件是否生成
2. React的安装
- 安装命令:
npm i react react-dom
react包是核心,提供创建元素、组件等功能
react-dom包提供DOM相关功能等 - 在
package.json
文件中确认安装包 - 确认当前目录下生成的
node_modules
文件夹 - npm 5.xx 版本之后会生成
package-lock.json
文件
3. React的使用
创建index.html
文件,引入react
和react-dom
两个js文件
代码如下(示例):
<div id="root"></div>
<script src="./node_modules/react/umd/react.development.js"></script>
<script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
创建React元素,使用API是:React.createElement()
<script>
// 返回值: React元素
// 第一个参数:要创建的React元素名称
// 第二个参数:该React元素的属性
// 第三个及其以后的参数:要创建的React元素的子节点
const el = React.createElement('h1', null, 'Hello React')
</script>
渲染React元素到页面中,使用的API是:ReactDom.render()
<script>
// 第一个参数:要渲染的React元素
// 第二个参数:DOM对象,用于指定渲染到页面中的位置
const el = React.createElement('h1', null, 'Hello React')
</script>
总结
A good medicine tasks bitter.