这个项目基于webpack,配 webpack 的教程:https://blog.csdn.net/qq593249106/article/details/84892069
简单配置
当前目录结构:
|- /config //webpack配置项
|- ......
|- /dist //出口文件
|- ......
|- /node_modules
|- /src //入口文件
|- components //组件
|- test //测试页面
|- App.js//入口文件
|- index.html//模板页面
|- index.js//入口文件
|- utils //工具库
|- package.json
使用 normalize.css
为了消除不同浏览器的影响,在入口文件 index.js引入 normalize.css 来清除不同浏览器的默认样式
import './normalize.css'
在 components 文件夹新建一个 Button 文件夹,在这个文件夹下新建一个 Button.js 文件:
Button.js
import React, {
Component } from 'react'
class Button extends Component {
render() {
return (
<button>
{
this.props.children}
</button>
)
}
}
export default Button
简单写一下 Button 组件,然后在 test 文件夹下的 App.js 文件中引入 Button 组件