react Day01 介绍，入门

react 介绍

https://react.docschina.org/

• 用于构建用户界面的 JavaScript 库
• react主要用于构建UI，MVC中的V（视图）
• 起源于Fackbook的内部项目（2013年5月开源）
• react拥有高性能，代码逻辑简单

React特点

1. 声明式的设计
   react采用声明范式，可以轻松描述应用
2. 高效
   通过对DOM的模拟，最大限度的减少了于DOM的交互 — 虚拟DOM
3. 灵活
   可以和已知库和第三方框架很好的整合
4. 组件
   提高代码的复用性5.单向响应的数据流

webpack 构建react应用

cnpm i react react-dom -S

1.体验

• src/index.js
  

2.代码说明

// react相关的基础库，必须引入，特别是写到组件的时候
import React from 'react'
// ReactDOM 以前是包含在React对象内部，后来分离了出来
// 给DOM节点渲染数据，渲染视图使用 ---- React Dom操作
import ReactDOM from 'react-dom'
// ReactDOM.render() 给某个DOM节点渲染react的视图
// react视图： react元素 / react组件
// React视图 记住 只能有一个顶级标签
// React 语法 符合 jsx 语法 - javascriptxml 语法 - 类xml语言 - 标签必须拥有顶级标签
// ReactDOM.render(视图, DOM节点)
ReactDOM.render(<h1>hello react</h1>, document.getElementById('app'))

3.react元素

元素是构成react应用的最小单位，它用于描述屏幕上输出的内容

import React from 'react'
import ReactDOM from 'react-dom'
// react元素
// 元素是构成react应用的最小单位，它用于描述屏幕上输出的内容
const element = <h1>hello react 元素</h1>
/**
* 元素
* 与浏览器的DOM元素不同
* react中的元素事实上是普通js对象
*
* ReactDOM可以确保浏览器DOM的数据内容于React元素保持一致
*/
ReactDOM.render(element, document.getElementById('app'))

React 元素是不可变对象。一旦被创建，你就无法更改它的子元素或者属性。一个元素就像电影的单帧：它代表了某个特定时刻的 UI。

• 疑问：如何更新react元素渲染

再特定的时间中 重新渲染一个新的元素