深入了解React（一、了解JSX语法）

app.jsx文件

import React from 'react';
import ReactDOM from 'react-dom';

import 'font-awesome/css/font-awesome.min.css';
import './index.css';
import './index.scss';

let style = {
    color: 'bl' + 'ue',
    fontSize: '30px'
};

let name = 'Yuusuke';
let names = ['Yuusuke', 'Itachi', 'Madara'];
let flag = false;

let jsx = (
    <div>
        <i className='fa fa-address-book'></i>
        <h1>Hello, react!</h1>
        <p style={style}>test style</p>
        <p className="jsx">test className</p>
    </div>
);

let jsx2 = (
    <div>
        {/* 变量的使用 */}
        <p>I am {name}</p>
        {/* 条件判断 */}
        {
            flag ? <p>I am {name}</p> : <p>I am not {name}</p>
        }
        {/* 数组循环 */}
        {
           names.map((name, index) => <p key={index}>Hello, I am {name}</p>)
        }
    </div>
);

ReactDOM.render(
    // jsx,
    jsx2,
    document.getElementById('app')
);

index.sass文件

body{
background: url(“./yiren.jpg”);
#app{
.jsx{
color: green;
font-size: 60px;
}
}
}