如何从零入门React?实战做个FM应用吧
发布在前端开发2018年4月21日view:759ReactJavaScript
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

面试造航母,工作拧螺丝,新公司面试技术官要求会react技术栈。

航母问:有使用过React么? 我答:没。 航母问:给你一星期能上手开发么? 我答:可以

回去之后,辗转反侧,开始了React的学习。然而公司项目暂时并没有用到React…Orz,不过为了提升实战经验,还是在业余时间捣腾出一个ReactFM,以下是项目介绍。

前言

对于大部分前端开发工程师而言,其实私人项目更多的是提升自己的实战经验,那么究竟开发怎样的项目和怎么提升开发效率? 我也时常有这样的疑惑,为什么别人总能做出自己想不到的项目而自己却没有任何的想法,我想一定是你接触信息的姿势不对,我有如下几点建议。 - 使用谷歌搜索 - 关注前端流行的技术栈 - 融入前端社区(掘金、知乎、思否等),关注开源项目,关注一些活跃开发者的博客 - Fork项目,学习他人项目源码

若没有项目想法,想下自己的兴趣所在,举个栗子: 比如你喜欢听歌,做个私人FM;二次元爱好者,做个聚合番剧的APP;喜欢Kindle,做个kindle的电子书搜索网站等等..

对于提升效率,前端如何同使需要写Restful服务,开发的周期会相应的延长。这里需要根据项目考虑和个人情况考虑,如果你有自己的云主机,并且没有开发过Restful接口的经验,可以前后端全部自己完成提升实战经验;如果没有自己的主机并且项目比较的小型预期到请求量不会很大,可以使用后端云服务,比如本项目是基于Leancloud数据存储服务实现的。

项目截图

preview preview preview preview

预览

访问 http://fm.huzerui.com/, 或者扫描二维码预览(最好在移动端体验) qrcode

Github仓库地址

https://github.com/alex1504/PetalFM

测试账号

  • Username: petalFM
  • Password: petalFM

技术栈

项目目录说明

.
|-- config                           // webpack配置目录
|-- database                         // 数据库备份目录
|-- media                            // readme描述资源
|   |-- index.js                     // 项目打包部署配置
|-- src                              // 源码目录
|   |-- components                   // 公共组件
|   |-- pages                        // 页面组件
|       |-- Login                    // 登陆页面
|       |-- Guide                    // 标签定制页
|       |-- Index                    // 主页
|       |-- Search                   // 搜索页
|       |-- Admin                    // 后台数据录入页(仅管理员可见)
|       |-- Dislike                  // 用户不兴趣歌曲页
|   |-- router                       // 路由定义
|   |-- services                     // vuex的状态管理
|       |-- avinit.js                // leancloudSDK初始化
|       |-- config.js                // 数据库相关配置
|       |-- songServices.js          // 歌曲相关服务
|       |-- userServices.js          // 用户相关服务
|       |-- index.js                 // 后端数据库服务入口
|   |-- store                        // vuex的状态管理
|       |-- index.js                 // 加载各种store模块
|       |-- types                    // 定义触发状态改变类型
|       |-- reducers                 // 状态生成器
|   |-- Utils                        // 工具函数
|   |-- index.js                     // 程序入口文件
|-- .gitignore                       // Git提交忽略文件规则
|-- LICENSE                          // 授权协议
|-- README.md                        // 项目说明
|-- package.json                     // 配置项目相关信息
.

本地运行或二次开发

由于后端云开启了WEB安全域名,本地克隆项目后无法直接运行,解决方式如下:

前置工作: - Step1:执行命令克隆项目到本地git clone https://github.com/alex1504/PetalFM.git - Step2:安装依赖 npm install - Step3:在 https://leancloud.cn/ 注册账号并且在后台创建一个leancloud应用 - Step4:在leancloud应用后台导入根目录database下面的数据库,并且在User表创建你的管理员账号(用户名和密码需为4-8位的数字、字母或) - Step5:修改 /src/services/config.js配置如下:

export const APP_ID = 'YOUR APP_ID FOUND IN LEANCLOUD APP SETTING';
export const APP_KEY = 'YOUR APP_KEY FOUND IN LEANCLOUD APP SETTING';
export const SUPER_USER_OBJECT_ID = 'YOUR SUPERUSER ACCOUNT OBJECT ID';

只有管理员才能看到Admin入口并且通过搜索接口录入歌曲,并设置歌曲所属类别。

开发: - Step6:执行 npm run dev运行项目 - Step7:执行 npm run build打包项目,/dist/文件夹为打包后的项目文件

部署: - Step9:在开发过程中,webpack-dev-server将本地 /api/请求转发到http://music.163.com/api(若需增加别的转发机制请修改package.json中的proxy配置,完整配置参考http-proxy),因此部署到服务器时请借助nginx或nodejs服务器进行接口转发,否则搜索和录入服务不生效。

总结

一个项目的开发过程中你会遇到许多问题,不断解决问题会使你积累更多的经验。前段为了学习小程序的开发,做了个小程序APP名叫(口袋吉他),这也是个人兴趣趋势的开发想法。开始的学习从小程序文档开始,APP界面借鉴了其他的小程序,界面成型后发现没有数据来源,于是通过nodejs写了爬虫录入初始数据,启用定时抓取保持更新,并封装了接口服务,甚至做了一个简单的后台页面录入数据,总而言之,这是一段有趣的历练。

若觉得项目对你有所帮助,可以star或fork,感谢你的支持。

评论
发表评论
暂无评论
WRITTEN BY
Jerry丶卍
A passionate front-end developer. 个人主页:http:/huzerui.com
TA的新浪微博
PUBLISHED IN
前端开发

总结个人项目或公司项目开发过程中遇到的问题,交流前端技术,分享心得。

我的收藏