使用map方法，对每一条数据进行循环，循环的值会产生一个新的数组，React检测到数组里面有标签会自动展开，再给每一个循环的标签设置一个唯一KEY可以让提高性能让React最小密度更新。

import './Hello.css';
import { useState } from 'react';

export default function Hello() {
    let [arr, newarr] = useState([{ title: '标题1', url: 'http://localhost' }, { title: '标题2', url: 'http://localhost' }, { title: '标题3', url: 'http://localhost' }, { title: '标题4', url: 'http://localhost' }])
    return (
        <div>
            <ul>
                {
                    arr.map((v, i) => <li className={i === 0 ? 'h1' : ''} key={i}><a  href={v.url}>{v.title}</a></li>)
                }

            </ul>
        </div>
    );
}

1.行类样式

export default function Hello() {
 return (
        <div>
            <p style={{ fontSize:'20px'}}>这是一段文本</p>
        </div>

    )

}

2.Class样式需要引入外部样式

import './Hello.css'
export default function Hello() {
 return (
        <div>
            <p className='fontSize'>这是一段文本</p>
        </div>

    )
}

1.通过useState进行创建响应式数据，引入useState，

import { useState } from "react"

2.创建好之后，会返回一个数组，下标0就是你的变量，下下标1就是改变内容的方法，改改变内容就需要调用下标1的方法，这里用结构的方式

let [name,setName]=useState('张三')

3.完整代码

import { useState } from "react"

export default function Hello (){
    let [name,setName]=useState('张三')
    let clickBtn=()=>{
        setName('李四')
    }
    return (
        <div>
            <h1>{name}</h1>
            <button onClick={()=>setName('李四')}>修改</button>
            {/* 或者 */}
            <button onClick={clickBtn}>修改</button>
        </div>
    )

}

1.全局安装脚手架

yarn global add create-react-app

2.使用脚手架搭建项目

create-react-app 项目名

3.启动项目

cd 项目名 //进入项目目录

yarn start //运行项目