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