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

codecook 发布于2019-08-22 16:33 / 2350人阅读

摘要：面试造航母，工作拧螺丝，新公司面试技术官要求会技术栈。然而公司项目暂时并没有用到，不过为了提升实战经验，还是在业余时间捣腾出一个，以下是项目介绍。前段为了学习小程序的开发，做了个小程序名叫口袋吉他，这也是个人兴趣驱使的开发想法。

面试造航母，工作拧螺丝，新公司面试技术官要求会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，感谢你的支持。欢迎关注公众号前端新视界，把握技术前沿资讯。

idc机房托管专线服务 fm域名如何注册 fm域名如何注册码 docker入门实战 spark入门实战

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/94459.html

1月份前端资源分享

摘要：更多资源请文章转自月份前端资源分享视频前端技术论坛融合不可错过的迷你库测试框架实例教程为你详细解读请求头的具体含意解析的库如果要用前端框架，开发流程是怎样的与有什么区别正确使用的方法是什么流程图插件小如何让元素只能输入纯文本前端技术中更多资源请Star：https://github.com/maidishike... 文章转自：https://github.com/jsfront...

solocoder 2019-08-20 14:37 评论0 收藏0
写一本关于 React.js 的小书

摘要：因为工作中一直在使用，也一直以来想总结一下自己关于的一些知识经验。于是把一些想法慢慢整理书写下来，做成一本开源免费专业简单的入门级别的小书，提供给社区。本书的后续可能会做成视频版本，敬请期待。本作品采用署名禁止演绎国际许可协议进行许可 React.js 小书本文作者：胡子大哈本文原文：React.js 小书转载请注明出处，保留原文链接以及作者信息在线阅读：http://huzi...

Scorpion 2019-08-21 11:39 评论0 收藏0
Python猫荐书系列之七：Python入门书籍有哪些？

摘要：正好，最近又有几位不同身份的初学者来咨询，要我推荐几本入门书籍，而我们荐书系列已经停更了两个多月，所以，本期荐书就来推荐一些入门书籍吧。为了准备这期荐书，我专门搜集了本入门书籍，现在全部加入到了一份豆瓣豆列里，方便大家查看。 showImg(https://segmentfault.com/img/remote/1460000019299066?w=4790&h=3193); 本文原创...

kamushin233 2019-08-08 15:34 评论0 收藏0
Python猫荐书系列之七：Python入门书籍有哪些？

摘要：正好，最近又有几位不同身份的初学者来咨询，要我推荐几本入门书籍，而我们荐书系列已经停更了两个多月，所以，本期荐书就来推荐一些入门书籍吧。为了准备这期荐书，我专门搜集了本入门书籍，现在全部加入到了一份豆瓣豆列里，方便大家查看。 showImg(https://segmentfault.com/img/remote/1460000019299066?w=4790&h=3193); 本文原创...

Joyven 2019-07-31 10:29 评论0 收藏0
Python猫荐书系列之七：Python入门书籍有哪些？

摘要：正好，最近又有几位不同身份的初学者来咨询，要我推荐几本入门书籍，而我们荐书系列已经停更了两个多月，所以，本期荐书就来推荐一些入门书籍吧。为了准备这期荐书，我专门搜集了本入门书籍，现在全部加入到了一份豆瓣豆列里，方便大家查看。 showImg(https://segmentfault.com/img/remote/1460000019299066?w=4790&h=3193); 本文原创...

guyan0319 2019-06-27 18:05 评论0 收藏0