React介绍

Posted 2021-09-03 张玉佳

React:

概述：
    构建用户界面的 javascript 库，构建 Web 应用
    MVC， React 仅仅是视图层（V），只负责视图的渲染
三大特点：
    声明式：就跟写html一样，React 渲染 UI，数据变化更新UI
    基于组件：是 React 最重要的内容，组件便是页面中的部分内容，组合、复用组件实现完整页面
    学习一次，随处使用：Web 应用，React-native 移动端原生应用，React 360 VR 等
    

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>
参数：
<script>
    React.createElement(\'元素名称\',元素属性,\'元素子节点\')
    ReactDOM.render(title,document.getElementById(\'root\')
</script>

React脚手架

npx create-react-app 项目名称
yarn create react-app 项目名称

使用React 
import React from \'react\'
import ReactDOM from \'react-dom\'

创建React元素
const element = React.createElement()

渲染
ReactDOM.rander(元素名，节点)