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

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

问：有使用过React么？
答：没，只使用过Vue。
又问：给你一星期能上手开发么？
答：可以（一脸笃定）...

南慕容，北乔峰，降龙十八掌，斗转星移，先接招再说。辗转反侧，开始了React的学习。然而公司项目暂时并没有用到React...Orz，不过为了提升实战经验，还是在业余时间捣腾出一个ReactFM，以下是项目介绍。

前言

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

• 使用谷歌搜索
• 关注前端流行的技术栈
• 融入前端社区（掘金、知乎、思否等），关注开源项目，关注一些活跃开发者的博客
• Fork项目，学习他人项目源码

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

对于提升效率，由于目前许多企业正从传统的开发方式转向前后端分离的方式，对于前端而言工作量比传统开发方式增大了。无疑，我们自己开发私人项目时需要同时完成前端工作也要自己写接口服务，这意味着开发的周期会相应的延长。我觉得这里需要根据项目考虑和个人情况考虑，如果你有自己的云主机，并且没有开发过Restful接口的经验，可以前后端全部自己完成提升实战经验；如果没有自己的主机并且项目比较的小型预期到请求量不会很大，可以使用后端云服务，比如本项目是基于Leancloud数据存储服务实现的。

项目截图

预览

访问 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，感谢你的支持。欢迎关注公众号前端新视界，把握技术前沿资讯。