React从零开始学习(一)!
先说两句从今年刚刚毕业到现在已经过了差不多五个多月了,刚刚开始找工作的那个星期还真是心力憔悴,每天奔波在各个公司的面试中,挣扎在各大框架的面试题里,到现在才发现不管是对于 先定一个小目标,完成一个有趣的问卷调查。 安装确定已经装好 npm install -g create-react-app 简单的一句话,就O的K! 初始化在你的项目下执行,创建一个名为 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 正式开始进入 import React,{ Component } from 'react'; class Home extends Component { render () { return ( <div className="home-container">This is home page</div> ) } } export default Home; 简单的第一个页面就完成了。 有时会报出这个错误: 在react里面书写 现在进入 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: 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; 第一步初始化页面就完成了。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |