（二）、创建第一个组件

一、创建组件

1. 在 src 下面创建一个 components 文件夹-在创建一个对于名字的组件文件夹-里面放对应的样式和逻辑

2. 使用 ES7+REact/Redux... 插件快捷命令来快速创建代码片段

# 快捷命令
rfce

import React from 'react'

function BlogListItem() {
    return <div>BlogItem</div>
}

export default BlogListItem

二、使用组件

import BlogListItem from '@/components/blog-list-item/index'

const blogList = [
    {
        id: 1,
        title: '标题1'
    },
    {
        id: 2,
        title: '标题2'
    }
]

function App() {
    return (
        <div>
            blogList.map((item, index) => (
                {/* 使用组件 */}
                <BlogListItem/>
            ))
        </div>
    )
}

export default BlogListItem

总结

• 当 vscode 自动提示不生效时，需要自己配置一下