一, 效果演示
音乐播放. gif
二, github 项目地址 https://github.com/Searworld/react-music-app
三, 安装 react-create-app 脚手架
四, 写项目
记录一下项目过程中的问题
create-react-app 不支持 less 解决方案
cd node_modules/react-scripts 在 node_modules 下找到 react-scripts 文件夹
yarn add less less-loader 安装
配置
可参考文章 https://blog.csdn.net/echo008/article/details/78311831
同样的, 要解析其他类型的文件, 都可以采用这种方式
ES6 中 Class 类的使用
- class Progress extends React.Component {
- constructor(props) {
- super(props);
- this.state({
- .......
- })
- }
- render(){
- return (
- .....
- )
- }
- }
- export default Progress
具体可看文档 http://es6.ruanyifeng.com/#docs/class
关于 React-router
最新版现在是 v4, 改动很大, 可以参考项目代码或者文档 https://reacttraining.com/react-router/web/example/basic
五, 视频地址 https://www.imooc.com/video/15478
注: 视频不是最新代码, 使用最新版本可以参考我的项目
这是我最近学习的用 react 写的小项目, 之后了解 react 的生命周期, 路由, 组件间通信以及相关的事件机制, 感觉视频的思路都很不错, 推荐!! 欢迎 star, 遇到问题的朋友可以私信我!!
来源: http://www.jianshu.com/p/734005096120