先说两句
从今年刚刚毕业到现在已经过了差不多五个多月了，刚刚开始找工作的那个星期还真是心力憔悴，每天奔波在各个公司的面试中，挣扎在各大框架的面试题里，到现在才发现不管是对于Vue@H_502_4@，Angular@H_502_4@，还是React@H_502_4@任何一个其实都算不上是入门，更别说是熟练运用了，决心好好学习，以此记录监督自己。
先定一个小目标，完成一个有趣的问卷调查。
安装
确定已经装好Node@H_502_4@和Npm@H_502_4@,装了？看下一步：先装（不会怎么办，查撒）。
npm install -g create-react-app
简单的一句话，就O的K！
初始化
在你的项目下执行，创建一个名为qz-react-survey@H_502_4@的react项目，执行起来确实是慢。
create-react-app qz-react-survey
跑起来也很简单啦，哟，不错哦！
cd qz-react-survey npm start
目录结构
├── node_modules 没啥说的吧？安装的所有依赖 ├── public │ ├─ favicon.ico │ ├─ index.html 单页应用嘛，就一个index.html，入口文件 │ └─ manifest.json 咋一看，我确实也不知道是个啥，懂了来补 ├── src 源文件目录，初始化后目录有点乱，做了一些修改 │ ├─ index.js │ ├─ components │ └─ registerServiceWorker.js 这个东东查了一下，用来缓存资源到本地，提高访问速度的 ├── .gitignore git提交的时候忽略文件 ├── package-lock.json npm新玩意，没整明白，好像是锁定依赖版本的.... ├── package.json └── README.md
正式开始
进入src@H_502_4@下components@H_502_4@目录，创建第一个页面home.js@H_502_4@，创建目录common@H_502_4@用来存放公共组件，列如header@H_502_4@、footer@H_502_4@等等。
import React,{ Component } from 'react';
class Home extends Component {
render () {
return (
<div className="home-container">This is home page</div>
)
}
}
export default Home;
简单的第一个页面就完成了。
有时会报出这个错误：
在react里面书写<div class="home"></div>@H_502_4@由于class@H_502_4@是JavaScript@H_502_4@关键字，所以react使用className@H_502_4@代替，上述写法改为<div className="home"></div>@H_502_4@即可。
现在进入common@H_502_4@目录下创建两个公共组件Header@H_502_4@、Footer@H_502_4@。
header.js如下：
import React,{ Component } from 'react';
class Header extends Component {
render () {
return (
<header className="header" id="header">
This is header.
</header>
)
}
}
export default Header;
footer.js如下：
import React,{ Component } from 'react';
class Footer extends Component {
render () {
return (
<footer className="footer" id="footer">
This is footer.
</footer>
)
}
}
export default Footer;
最后在home.js@H_502_4@中引入common@H_502_4@目录下的两个公共组件。
修改后的home.js:
import React,{ Component } from 'react';
import Header from './common/header';
import Footer from './common/footer';
class Home extends Component {
render () {
return (
<div>
<Header />
<div className="home-container">This is home page</div>
<Footer />
</div>
)
}
}
export default Home;
第一步初始化页面就完成了。
