react学习---day01--第一个react组件(渲染列表)

1.由于是学习需循环渐进,先从最开始的引入文件开始

<!-- 该文件向外暴露（导出）了一个对象 React -->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>

<!-- 该文件向外暴露了一个对象 React-Dom -->
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

 2.react是根据一个跟标签来进行组件式开发,先试着创建一个组件的根标签

<div id="app"></div>

3.接着关键的一步,因为react是jsx语法在render函数里渲染真实dom,原生的javascript已经不能满足了,需要babel转换一下,所有在写script标签的时候需要加上babel让babel.js转换

<script type="text/babel"></script>

4.用class继承组件的方式,上手写一个渲染列表

class App extends React.Component {
    constructor() {
        super() // 一定要用super方法访问,不然会报this无法访问
        this.state = {
            person: ["第一个名字", "第二个名字", "第三个名字"],
        }
    }

    render() {
        // 可以在render函数return之前进行逻辑运算
        const arr = [] // 先声明一个空数组用render于渲染
        this.state.person.forEach((item) => {
            arr.push(<li key={item}>{item}</li>) //不加key会出现react警告
        })
        // 此时的arr已经是拥有标签可供渲染的数组了
        // 直接返回拥有标签的arr
        return (
            <div>
                <h3>人物列表</h3>
                {arr}
            </div>
        )
    }
}

5.最后将调用ReactDOM()方法将继承的App嵌入进真实dom中即可

ReactDOM.render(<App />, document.getElementById('app'))