手把手教你怎么创建《基于webpack的React案例一》

#1

在创建第一个React项目时,我们应该先了解什么事jsx,React的声明周期,es6。这边我默认你已经对这些有一定的了解了,先搭一个webpack环境,如果你对webpack还不了解,可以先看看我之前写的一篇文章《webpack初体验》
好了,废话不多说,让我们来开始创建第一个React项目:

环境:
window7
node v6.8.0
npm 3.10.8
webpack 2.3.3

1.将webpack环境配置下载下来
git clone https://github.com/MrRetro/webpack-pro
2.将库文件安装到项目中
npm install
3.执行webpack打包命令
npm start
4.打开build文件夹下的index.html文件

好了,项目跑完了,是时候开始解释项目都做了啥?
首先打开项目中“app”文件夹找到Greeter.js文件

import React, {Component} from ‘react’;//导入react库文件
import config from ‘./config.json’;
import styles from ‘./Greeter.css’;//导入

//这边就是使用jsx语法将Greeter封装成一个组件

class Greeter extends Component{
render() {
return (

//添加类名
{config.greetText}

);
}
}

export default Greeter