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;
