React-基础

6次阅读
没有评论

共计 1383 个字符,预计需要花费 4 分钟才能阅读完成。

React 概述

用于构建用户界面的 JavaScript 库
是一个将数据渲染为 HTML 视图的开源 JavaScript 库

React 特点

声明式

只需要描述 UI(HTML)看起来是什么样子,就像写 HTML 一样,React 负责渲染 UI,并在数据变化时更新 UI

const jsx = <div clssName="app">
                <h1>Hello React! 动态变化数据:{ count }</h1>
            </div>

基于组件

  1. 采用组件化模式、声明式编码,提高开发效率及组件复用率
  2. 在 React Native 中可以使用 React 语法进行移动端开发
  3. 使用虚拟DOM+优秀的Diffing算法,尽量减少与真实DOM的交互

React 的基本使用

安装React

  • react 是核心包,提供创建元素、组件等功能
  • react-dom 包提供 DOM 相关功能等
# 16.8.6
npm i react react-dom

使用 React

先引入 react 后引入 react-dom 两个 js 文件

创建 React 元素、渲染 React 元素到页面中

<div id="root"></div>
<script>
    // 创建 React 元素
    // 参数一:元素名称
    // 参数二:元素属性
    // 第三以及以后的参数:元素的子节点
    const title = React.createElement('h1', null, 'Hello React')
    // 渲染 React 元素到页面中
    // 参数一:要渲染的 react 元素
    // 参数二:挂载点
    ReactDOM.render(title, document.querySelector('#root'))
</script>

React.createElement()

// 返回值:React 元素
// 参数一:要创建的 React 元素名称
// 参数二:该 React 元素的属性
// 第三以及以后的参数:该 React 元素的子节点
const el = React.createElement('h1', { title: '标题' }, 'Hello React', React.createElement('p', null , 'p 标签'))

ReactDOM.render()

// 参数一:要渲染的 React 元素
// 参数二:DOM对象,用于指定渲染到页面中的位置
ReactDOM.render(el, document.querySelector('#root'))

React 脚手架的使用

全局安装React脚手架

npm i -g create-react-app

使用 React 脚手架初始化项目

#初始化项目
npx create-react-app 项目名

#启动项目
npm start

npx 是 npm v5.2.0 引入的一条命令

目的:提升包内提供的命令行工具的使用体验

原来:先安装脚手架包,再使用这个包中提供的命令

现在:无需安装脚手架包,就可以直接使用这个包提供的命令

npx create-react-app 项目名
npm init react-app 项目名
yarn create react-app 项目名

在脚手架中使用 React

react@16.8.6 版本

1. 导入 react 和 react-dom 两个包

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

2. 调用 React.createElement() 方法创建 react 元素

3. 调用 ReactDOM.render() 方法渲染 react 元素到页面中

正文完
 0
qiaofugui.cn
版权声明:本站原创文章,由 qiaofugui.cn 于2024-05-21发表,共计1383字。
转载说明:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
评论(没有评论)
验证码