React基本使用React脚手架的使用
Posted 别Null.了
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了React基本使用React脚手架的使用相关的知识,希望对你有一定的参考价值。
目录
React概述
是什么
是一个用于构建用户界面的javascript库,旨在简化可视化界面的开发。
React是Facebook开发并于2013年发布。它基于JSX的语法,JSX是React的核心组成部分,它使用xml标记的方式去直接声明界面。React核心是组件,组件的设计提高了代码的复用率,降低了测试的难度和代码复杂度。
React的特点
声明式设计:React采用声明式范式,可以轻松描述应用。
高效:React通过对DOM的模拟,最大限度地减少与DOM的交互。
灵活:React可以与已知的库或框架很好地配合。
使用JSX语法:JSX是JavaScript语法的扩展,可以极大地提高JS运行效率。
组件复用:通过React构建组件使得代码易于复用,组合复用多个组件可以实现完整的页面功能。
单向响应的数据流:React实现了单向响应的数据流,减少了重复代码,比传统数据绑定方式更简单。
React的基本使用
虚拟DOM
React框架的核心优势之一, 就是支持创建虚拟DOM来提高页面性能。用普通js对象来描述DOM结构,因为不是真实DOM,所以称之为虚拟DOM。虚拟DOM是相对于实际DOM而言的。
在react、vue等技术出现之前,我们要改变页面展示的内容只能通过遍历查询 dom 树的方式找到需要修改的 dom 然后修改样式行为或者结构,来达到更新 ui 的目的。因为每次查询 dom 几乎都需要遍历整颗 dom 树,如果建立一个与 dom 树对应的虚拟 dom 对象( js 对象),以对象嵌套的方式来表示 dom 树及其层级结构,那么每次 dom 的更改就变成了对 js 对象的属性的增删改查,这样就可以避免频繁的DOM操作带来的性能下降问题。
React的安装
安装命令:npm i react react-dom
react包是核心,它提供创建元素、组件等功能;react-dom包提供DOM相关功能等。
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')
ReactDOM.render(title, document.getElementById('root'))
</script>
//关于React.createElement()的说明
// 返回值:React元素
// 第一个参数:要创建的React元素名称
// 第二个参数:该React元素的属性
// 第三个及其以后的参数:该React元素的子节点
const el = React.createElement('h1', title: '标题' , 'Hello React')
//关于ReactDOM.render()的说明
// 第一个参数:要渲染的React元素
// 第二个参数:DOM对象,用于指定渲染到页面中的位置
ReactDOM.render(el, document.getElementById('root'))
React脚手架的使用
react脚手架意义:create-react-app 是来自于 Facebook,通过该命令我们无需配置就能快速构建 React 开发环境。create-react-app 自动创建的项目是基于 Webpack + ES6 。
使用react脚手架初始化项目
安装create-react-app :cnpm install -g create-react-app
创建项目: create-react-app my-app
安装包:yarn add 包名称 (也可以使用npm安装)
进入项目所在目录:cd my-app
启动项目:npm start
在脚手架中使用react
1、导入react和react-dom两个包;
import React from 'react'
import ReactDOM from 'react-dom'
2、调用React.createElement()方法创建react元素;
3、调用ReactDOM.render()方法渲染react元素到页面中。
以上是关于React基本使用React脚手架的使用的主要内容,如果未能解决你的问题,请参考以下文章