[JavaScript知识库]01 React初步认知、React元素、渲染、工程化

定义

• react：用于构建用户界面的 JavaScript 库 （仅负责View层渲染、应在视图上体现交互逻辑）
• vue：渐进式JavaScript 框架（MVVM）

使用

1. 引入CDN脚本
2. 添加根容器 div #app
3. 创建React组件

ReactDOM.render

• ReactDOM → render → 虚拟DOM → 真实DOM（放入容器）

React.create

• 创建React元素 → 虚拟节点 → 真实节点

const oSpan = React.createElement('span', {
    className: 'text'
}, '子节点span')
ReactDOM.render(
    React.createElement('h1', {
        // 属性
        'data-tag': 'h1'
    }, [oSpan]),
    // 容器
    document.getElementById('app')
)

React组件

1. React.Component
2. 渲染视图必须放入render函数，且return视图

// 继承 使用React提供的关于组件的api
class MyButton extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            openStatus: false
        }
    }
    // 渲染视图必须放入render函数，且return视图
    render() {
        return '视图'
    }
}

class MyButton extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            openStatus: false
        }
    }
    render() {
        // 渲染视图必须放入render函数，且return视图
        const oP = React.createElement('p', {
            key: 2
        }, this.state.openStatus ? 'open状态' : "close状态")
        const oBtn = React.createElement('button', {
            key: 1,
            onClick: () => {
                this.setState({
                    openStatus: !this.state.openStatus
                })
            }
        }, this.state.openStatus ? '关闭' : "打开")
        const wrapper = React.createElement('div', {}, [oP, oBtn])
        return wrapper
    }
}

工程化

npx create-react-app my-first-react-app
// npx：npm5.2 + 的包运行工具
create-react-app
// 脚手架工具：内部的工程化 → babel/webpack
cd my-first-react-app
yarn start/npm start

初始化目录

• 不必要的可以删除
  

App.js

function App() {
  return (
    <div className="App">
      
    </div>
  );
}

export default App;

import { Component } from 'react'
class App extends Component {
  render() {
    return (
      <div className="App" >
        11111
      </div>
    );
  }
}

export default App;