（二）react入门

react使用的是JSX语法，和vue、小程序语法类似

• class属性在react中要写成className
• 创建一个react组件

import React, { Component } from 'react';

class Home extends Component {
    state = {
        name: '数据渲染', //页面上通过{name}渲染数据
        age: 10,
        lineStyle: {
            color: 'orange',
            fontWeight: 'bold',
            lineHeight: '60px'
        }
    }

    render() {
        /* ES6的解构赋值 */
        let { name, age, lineStyle } = this.state;
        return (
            <div>
                {/* 行内样式 --- style={{color: 'red'}}  用逗号隔开 */}
                <div style={{color: 'red', fontSize: '12px'}}>{name}</div> 
                {/* 内联样式 --- style={lineStyle} */}
                <div style={lineStyle}>{age}</div>
            </div>
        )
    } 
}

export default Home;

app.js引入并使用组件

import React from 'react';
import './asset/css/App.css';
import Home from "./component/home";

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

export default App;