如何从零入门React？实战做个FM应用吧

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

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

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

前言

对于大部分前端开发工程师而言，其实私人项目更多的是提升自己的实战经验，那么究竟开发怎样的项目和怎么提升开发效率？
我也时常有这样的疑惑，为什么别人总能做出自己想不到的项目而自己却没有任何的想法，我想一定是你接触信息的姿势不对，我有如下几点建议。

• 使用谷歌搜索

• 关注前端流行的技术栈

• 融入前端社区（掘金、知乎、思否等），关注开源项目，关注一些活跃开发者的博客

• Fork项目，学习他人项目源码

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

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

项目截图

preview

preview

preview

preview

预览

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

Github仓库地址

https://github.com/alex1504/PetalFM

测试账号

• Username: petalFM

• Password: petalFM

技术栈

• 框架：react

• 状态管理：redux

• 打包：Webpack，Babel

• 语言：ES2015, Less

• 库:

• React Router V4

• Material-UI

• 代码检查： ESLint

• 图标支持：Iconfont

项目目录说明

.
|-- config                           // webpack配置目录|-- database                         // 数据库备份目录|-- media                            // readme描述资源|-- src                              // 源码目录|   |-- components                   // 公共组件|   |-- pages                        // 页面组件|       |-- Login                    // 登陆页面|       |-- Guide                    // 标签定制页|       |-- Index                    // 主页|       |-- Search                   // 搜索页|       |-- Admin                    // 后台数据录入页（仅管理员可见）|       |-- Dislike                  // 用户不兴趣歌曲页|   |-- router                       // 路由定义|   |-- services                     // 后端服务|       |-- avinit.js                // leancloudSDK初始化|       |-- config.js                // 数据库相关配置|       |-- songServices.js          // 歌曲相关服务|       |-- userServices.js          // 用户相关服务|       |-- index.js                 // 后端数据库服务入口|   |-- store                        // 状态管理|       |-- 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，感谢你的支持。

点滴打赏，馨香永存。

作者：前端空城师
链接：https://www.jianshu.com/p/e0197c459fc6