{"id":15043427,"url":"https://github.com/minooo/react-study","last_synced_at":"2025-04-05T07:06:35.446Z","repository":{"id":87399229,"uuid":"62853950","full_name":"minooo/React-Study","owner":"minooo","description":"渐进式学习React生态圈","archived":false,"fork":false,"pushed_at":"2018-01-11T11:29:12.000Z","size":624,"stargazers_count":547,"open_issues_count":3,"forks_count":182,"subscribers_count":36,"default_branch":"master","last_synced_at":"2025-04-05T07:06:30.298Z","etag":null,"topics":["es6","hmr","react","react-router","redux","redux-saga","webpack"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/minooo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-07-08T02:53:19.000Z","updated_at":"2025-04-02T07:31:01.000Z","dependencies_parsed_at":null,"dependency_job_id":"c6692f99-a958-449d-aae0-03a69013765b","html_url":"https://github.com/minooo/React-Study","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/minooo%2FReact-Study","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/minooo%2FReact-Study/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/minooo%2FReact-Study/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/minooo%2FReact-Study/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/minooo","download_url":"https://codeload.github.com/minooo/React-Study/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247299832,"owners_count":20916190,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["es6","hmr","react","react-router","redux","redux-saga","webpack"],"created_at":"2024-09-24T20:49:01.575Z","updated_at":"2025-04-05T07:06:35.418Z","avatar_url":"https://github.com/minooo.png","language":"JavaScript","readme":"\u003e [react.js](https://github.com/facebook/react) 是一个构建用户界面的javascript库，它因**单向数据绑定**和**虚拟 DOM** 两大特点在前端界大放异彩。  \n因为它解决了当下网页性能陷入的瓶颈————由于直接操作DOM导致页面性能损失很大，而虚拟DOM避免了直接操作DOM(Jquery 是一个典型的操作DOM的库，所以 React 开发中，我们尽量不要使用Jquery)。再加上   React 单向数据绑定的特点使得业务逻辑更加清晰可控。  \n另外，`react.js` 是大名鼎鼎的 Facebook 一手打造维护，目前其在 github 上已有超过5万的 Star 量。  \n同时，react 社区也异常活跃，各种基于 React 的非常优秀的库和框架层出不穷，进而推动了 react 的流行和壮大，围绕 React 为核心的生态圈已悄然成型。\n## 最新通知（2018/1/11）\nhello，everybody，自React-Study项目推出以来，多多少少帮助了不少入坑React的新人同学，自其上次更新已一年有余，然而并没有一个实际开发的项目演示，故今天推出一个 [React16 + next.js 4 + antd-mobile2 + redux 的服务端渲染架构](https://github.com/minooo/react-ssr)，其已经成功运用于公司的一个项目。欢迎与各位交流学习，2018，让我们进步更多！\n## 版本维护日志\n- 精简了热重载[HMR]配置；\n  修复了step-04 导航\"复杂\"上的示例在苹果手机上异常的问题。   \n  ——2016/12/22\n- 修复了部分电脑运行step-04出错的问题；  \n  修复了脚手架在应用react最新版本 15.4.1后，无法在微信上显示的问题。  \n  ——2016/12/18\n\n## 认识React生态圈\n\n用阮一峰老师的话说就是： **React 已不是一个库，也不是一个框架，而是一个庞大的体系。想要发挥它的威力，整个技术栈都要配合它改造。你要学习一整套解决方案，从后端到前端，都是全新的做法。** 时至今日，围绕以React为核心的技术栈也日益成型，它主要包含：\n\n- React,\n- npm\n- js打包工具（如：webpack）\n- ES6\n- Routing\n- Redux\n\n**你不需要把这些都学完才去使用 React. 只需要在你遇到问题需要解决的时候, 才进入相关的学习。**\n\n## 学习 React 生态圈\n学习 React 生态圈是一个综合应用React技术栈的过程，这也是最接近我们实际开发运用React的情境，为此，笔者特地根据以往React开发经验，精心制作了[React-Study](https://github.com/minooo/React-Study)系列React技术栈学习模板，以实际项目开发情境为目标，从最简单的hello,world开始，通过逐步升级配置，来学习React生态圈并最终应用到公司项目中。\n\nReact-Study 系列模板主要包含以下四部分\n\n- [step-01](https://github.com/minooo/React-Study/tree/master/step-01)（已完成）\n这部分就是基础的hello,world模板，前面说了，这系列模板是以实际项目开发情境为目标而构建的，虽说是  hello,world的示例，但是它综合应用了 React+webpack+es2015+npm ，并且分为开发模式（开启了热替换和sourcemap）和产品模式（也就是打包，开启了代码压缩等优化）\n\n- [step-02](https://github.com/minooo/React-Study/tree/master/step-02)（已完成）\nstep-02 是在 step-01的基础上添加额外配置完成的，这一部分添加了 样式，字形，图片，等加载器配置。并初步展示了在项目实践中，React技术栈的一个合理的目录结构应该是怎样的。由于应用了CSSModules以及相关的辅助插件，CSS的语法更加便利简洁，这些在项目的组件样式中都有体现。同时，也展示了在ES6下，React组件相关写法，以及标准语法的规范的推荐。总之，React带你走进组件化的美好\n\n- [step-03](https://github.com/minooo/React-Study/tree/master/step-03)（已完成）\nstep-03 是在 step-02 的基础上开发的，step-03 主要围绕添加 react-router 进行配置，以及在react移动端开发中，强烈推荐使用antd-mobile 这个特别符合我国国情的react组件库。本模板延续组件化的思想，以及样式的模块化（cssModules), 并以真实项目实践写了几个简单的组件，包括底部导航，好店列表，以及下拉菜单等。 目的就是展示下，在真实项目中，组件化的思想是如何实践的。\n\n- [step-04](https://github.com/minooo/React-Study/tree/master/step-04) (已完成）\nstep-04 是在 step-03 的基础上添加额外配置完成，为了更好的解决react中组件之间的数据传递，  \n此模板引入了[redux](https://github.com/reactjs/redux)，redux 的三大核心法宝就是 `action`, `reducer`, `store`，  \nredux入门推荐教程 [redux-tutorial 使用教程](https://github.com/react-guide/redux-tutorial-cn/blob/master/00_introduction.js) [redux 入门教程](http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_one_basic_usages.html)；  \n同时为了更优雅的管理redux的异步操作，经过再三对比和考虑，本模板使用了[redux-saga](https://github.com/yelouafi/redux-saga/),用来替代[redux-thunk](https://github.com/gaearon/redux-thunk)。  \n[redux-sage中文文档(繁体，同步)](https://neighborhood999.github.io/redux-saga/)  \n\n## 启动React生态圈\n\n##### 克隆项目\n    git clone https://github.com/minooo/React-Study.git\n    \n##### 进入目录（比如step-01)\n    cd step-01\n    \n##### 安装依赖\n    npm install\n    \n##### 启动开发模式（运行 npm run build，即可将项目打包）\n    npm start\n    \n##### 启动就绪后，打开浏览器，输入 http://localhost:3000/ ，看到惊喜了吗？\n\n## 常见问题说明。\n\n- 请保证电脑安装的 [node](http://nodejs.cn/) 版本在 **6.0以上** ，如果你“不幸”安装了4.0版本，  \n  请先将其卸载，再安装6.0+版本（目前node官网已有7.2版本[英文官网](https://nodejs.org/en/)，请尽量安装最新版）\n  \n- 很多新手朋友可能事先跟着react官网实例做了一些练习，用的都是 es5 的语法。  \n  而本项目代码采用的都是 es6 的语法，这也是react官网推荐的。如果你对es6语法不太熟悉  \n  可以看下[React es5---es6 写法对照表](http://bbs.reactnative.cn/topic/15/react-react-native-%E7%9A%84es5-es6%E5%86%99%E6%B3%95%E5%AF%B9%E7%85%A7%E8%A1%A8)  \n  同时也建议你花[30分钟，快速了解ES6语法](https://segmentfault.com/a/1190000004365693)\n  当然，本项目所有组件示例也可以当作你学习es6写法的参考。\n  \n- 如果你有使用webstorm作为你的IDE，初次运行本项目，软件可能会提示你 `Add watcher` ，  \n  由于本项目已配置好了一整套的编译流程，所以不要此类协助，直接忽略取消即可；另外由于  \n  项目代码用的都是JSX语法，webstorm 可能默认的解析js语法是es5，  \n  所以此时你会看到文件都是“一片红”错误标注，如下改下解析设置就行了：  \n  `File` -\u003e `Settings` -\u003e `Languages \u0026 Frameworks` -\u003e `JavaScript`   \n  选择右侧面板中的下拉框，将选项 `JavaScript languaga version` 的值改为 `React JSX` 即可\n  \n- 如果你在学习本项目遇到问题，请加群交流： [419922267](http://jq.qq.com/?_wv=1027\u0026k=2FnzuGM)\n\n# License\nMIT\n\n    \n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fminooo%2Freact-study","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fminooo%2Freact-study","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fminooo%2Freact-study/lists"}