├── .gitignore ├── LICENSE ├── PULL_REQUEST_TEMPLATE.md ├── README-CN.md ├── README-ES.md ├── README-JA.md ├── README-KO.md ├── README-PTBR.md ├── README-RU.md ├── README.md ├── roadmap-cn.png ├── roadmap-es.png ├── roadmap-ja.png ├── roadmap-ko.png ├── roadmap-ptbr.png ├── roadmap-ru.png ├── roadmap.png ├── src ├── react-developer-roadmap-cn.xml ├── react-developer-roadmap-es.xml ├── react-developer-roadmap-ja.xml ├── react-developer-roadmap-ko.xml ├── react-developer-roadmap-pt-br.xml ├── react-developer-roadmap-ru.xml └── react-developer-roadmap.xml └── translations ├── cn.json ├── es.json ├── ja.json ├── ko.json ├── pt-br.json ├── ru.json └── translate.js /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | ._* 3 | Thumbs.db 4 | *.sublime-project 5 | *.sublime-workspace 6 | .idea 7 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | ## creative commons 2 | 3 | # Attribution-NonCommercial-ShareAlike 4.0 International 4 | 5 | Creative Commons Corporation (“Creative Commons”) is not a law firm and does not provide legal services or legal advice. Distribution of Creative Commons public licenses does not create a lawyer-client or other relationship. Creative Commons makes its licenses and related information available on an “as-is” basis. Creative Commons gives no warranties regarding its licenses, any material licensed under their terms and conditions, or any related information. Creative Commons disclaims all liability for damages resulting from their use to the fullest extent possible. 6 | 7 | ### Using Creative Commons Public Licenses 8 | 9 | Creative Commons public licenses provide a standard set of terms and conditions that creators and other rights holders may use to share original works of authorship and other material subject to copyright and certain other rights specified in the public license below. The following considerations are for informational purposes only, are not exhaustive, and do not form part of our licenses. 10 | 11 | * __Considerations for licensors:__ Our public licenses are intended for use by those authorized to give the public permission to use material in ways otherwise restricted by copyright and certain other rights. Our licenses are irrevocable. Licensors should read and understand the terms and conditions of the license they choose before applying it. Licensors should also secure all rights necessary before applying our licenses so that the public can reuse the material as expected. Licensors should clearly mark any material not subject to the license. This includes other CC-licensed material, or material used under an exception or limitation to copyright. [More considerations for licensors](http://wiki.creativecommons.org/Considerations_for_licensors_and_licensees#Considerations_for_licensors). 12 | 13 | * __Considerations for the public:__ By using one of our public licenses, a licensor grants the public permission to use the licensed material under specified terms and conditions. If the licensor’s permission is not necessary for any reason–for example, because of any applicable exception or limitation to copyright–then that use is not regulated by the license. Our licenses grant only permissions under copyright and certain other rights that a licensor has authority to grant. Use of the licensed material may still be restricted for other reasons, including because others have copyright or other rights in the material. A licensor may make special requests, such as asking that all changes be marked or described. Although not required by our licenses, you are encouraged to respect those requests where reasonable. [More considerations for the public](http://wiki.creativecommons.org/Considerations_for_licensors_and_licensees#Considerations_for_licensees). 14 | 15 | ## Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International Public License 16 | 17 | By exercising the Licensed Rights (defined below), You accept and agree to be bound by the terms and conditions of this Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International Public License ("Public License"). To the extent this Public License may be interpreted as a contract, You are granted the Licensed Rights in consideration of Your acceptance of these terms and conditions, and the Licensor grants You such rights in consideration of benefits the Licensor receives from making the Licensed Material available under these terms and conditions. 18 | 19 | ### Section 1 – Definitions. 20 | 21 | a. __Adapted Material__ means material subject to Copyright and Similar Rights that is derived from or based upon the Licensed Material and in which the Licensed Material is translated, altered, arranged, transformed, or otherwise modified in a manner requiring permission under the Copyright and Similar Rights held by the Licensor. For purposes of this Public License, where the Licensed Material is a musical work, performance, or sound recording, Adapted Material is always produced where the Licensed Material is synched in timed relation with a moving image. 22 | 23 | b. __Adapter's License__ means the license You apply to Your Copyright and Similar Rights in Your contributions to Adapted Material in accordance with the terms and conditions of this Public License. 24 | 25 | c. __BY-NC-SA Compatible License__ means a license listed at [creativecommons.org/compatiblelicenses](http://creativecommons.org/compatiblelicenses), approved by Creative Commons as essentially the equivalent of this Public License. 26 | 27 | d. __Copyright and Similar Rights__ means copyright and/or similar rights closely related to copyright including, without limitation, performance, broadcast, sound recording, and Sui Generis Database Rights, without regard to how the rights are labeled or categorized. For purposes of this Public License, the rights specified in Section 2(b)(1)-(2) are not Copyright and Similar Rights. 28 | 29 | e. __Effective Technological Measures__ means those measures that, in the absence of proper authority, may not be circumvented under laws fulfilling obligations under Article 11 of the WIPO Copyright Treaty adopted on December 20, 1996, and/or similar international agreements. 30 | 31 | f. __Exceptions and Limitations__ means fair use, fair dealing, and/or any other exception or limitation to Copyright and Similar Rights that applies to Your use of the Licensed Material. 32 | 33 | g. __License Elements__ means the license attributes listed in the name of a Creative Commons Public License. The License Elements of this Public License are Attribution, NonCommercial, and ShareAlike. 34 | 35 | h. __Licensed Material__ means the artistic or literary work, database, or other material to which the Licensor applied this Public License. 36 | 37 | i. __Licensed Rights__ means the rights granted to You subject to the terms and conditions of this Public License, which are limited to all Copyright and Similar Rights that apply to Your use of the Licensed Material and that the Licensor has authority to license. 38 | 39 | h. __Licensor__ means the individual(s) or entity(ies) granting rights under this Public License. 40 | 41 | i. __NonCommercial__ means not primarily intended for or directed towards commercial advantage or monetary compensation. For purposes of this Public License, the exchange of the Licensed Material for other material subject to Copyright and Similar Rights by digital file-sharing or similar means is NonCommercial provided there is no payment of monetary compensation in connection with the exchange. 42 | 43 | j. __Share__ means to provide material to the public by any means or process that requires permission under the Licensed Rights, such as reproduction, public display, public performance, distribution, dissemination, communication, or importation, and to make material available to the public including in ways that members of the public may access the material from a place and at a time individually chosen by them. 44 | 45 | k. __Sui Generis Database Rights__ means rights other than copyright resulting from Directive 96/9/EC of the European Parliament and of the Council of 11 March 1996 on the legal protection of databases, as amended and/or succeeded, as well as other essentially equivalent rights anywhere in the world. 46 | 47 | l. __You__ means the individual or entity exercising the Licensed Rights under this Public License. Your has a corresponding meaning. 48 | 49 | ### Section 2 – Scope. 50 | 51 | a. ___License grant.___ 52 | 53 | 1. Subject to the terms and conditions of this Public License, the Licensor hereby grants You a worldwide, royalty-free, non-sublicensable, non-exclusive, irrevocable license to exercise the Licensed Rights in the Licensed Material to: 54 | 55 | A. reproduce and Share the Licensed Material, in whole or in part, for NonCommercial purposes only; and 56 | 57 | B. produce, reproduce, and Share Adapted Material for NonCommercial purposes only. 58 | 59 | 2. __Exceptions and Limitations.__ For the avoidance of doubt, where Exceptions and Limitations apply to Your use, this Public License does not apply, and You do not need to comply with its terms and conditions. 60 | 61 | 3. __Term.__ The term of this Public License is specified in Section 6(a). 62 | 63 | 4. __Media and formats; technical modifications allowed.__ The Licensor authorizes You to exercise the Licensed Rights in all media and formats whether now known or hereafter created, and to make technical modifications necessary to do so. The Licensor waives and/or agrees not to assert any right or authority to forbid You from making technical modifications necessary to exercise the Licensed Rights, including technical modifications necessary to circumvent Effective Technological Measures. For purposes of this Public License, simply making modifications authorized by this Section 2(a)(4) never produces Adapted Material. 64 | 65 | 5. __Downstream recipients.__ 66 | 67 | A. __Offer from the Licensor – Licensed Material.__ Every recipient of the Licensed Material automatically receives an offer from the Licensor to exercise the Licensed Rights under the terms and conditions of this Public License. 68 | 69 | B. __Additional offer from the Licensor – Adapted Material.__ Every recipient of Adapted Material from You automatically receives an offer from the Licensor to exercise the Licensed Rights in the Adapted Material under the conditions of the Adapter’s License You apply. 70 | 71 | C. __No downstream restrictions.__ You may not offer or impose any additional or different terms or conditions on, or apply any Effective Technological Measures to, the Licensed Material if doing so restricts exercise of the Licensed Rights by any recipient of the Licensed Material. 72 | 73 | 6. __No endorsement.__ Nothing in this Public License constitutes or may be construed as permission to assert or imply that You are, or that Your use of the Licensed Material is, connected with, or sponsored, endorsed, or granted official status by, the Licensor or others designated to receive attribution as provided in Section 3(a)(1)(A)(i). 74 | 75 | b. ___Other rights.___ 76 | 77 | 1. Moral rights, such as the right of integrity, are not licensed under this Public License, nor are publicity, privacy, and/or other similar personality rights; however, to the extent possible, the Licensor waives and/or agrees not to assert any such rights held by the Licensor to the limited extent necessary to allow You to exercise the Licensed Rights, but not otherwise. 78 | 79 | 2. Patent and trademark rights are not licensed under this Public License. 80 | 81 | 3. To the extent possible, the Licensor waives any right to collect royalties from You for the exercise of the Licensed Rights, whether directly or through a collecting society under any voluntary or waivable statutory or compulsory licensing scheme. In all other cases the Licensor expressly reserves any right to collect such royalties, including when the Licensed Material is used other than for NonCommercial purposes. 82 | 83 | ### Section 3 – License Conditions. 84 | 85 | Your exercise of the Licensed Rights is expressly made subject to the following conditions. 86 | 87 | a. ___Attribution.___ 88 | 89 | 1. If You Share the Licensed Material (including in modified form), You must: 90 | 91 | A. retain the following if it is supplied by the Licensor with the Licensed Material: 92 | 93 | i. identification of the creator(s) of the Licensed Material and any others designated to receive attribution, in any reasonable manner requested by the Licensor (including by pseudonym if designated); 94 | 95 | ii. a copyright notice; 96 | 97 | iii. a notice that refers to this Public License; 98 | 99 | iv. a notice that refers to the disclaimer of warranties; 100 | 101 | v. a URI or hyperlink to the Licensed Material to the extent reasonably practicable; 102 | 103 | B. indicate if You modified the Licensed Material and retain an indication of any previous modifications; and 104 | 105 | C. indicate the Licensed Material is licensed under this Public License, and include the text of, or the URI or hyperlink to, this Public License. 106 | 107 | 2. You may satisfy the conditions in Section 3(a)(1) in any reasonable manner based on the medium, means, and context in which You Share the Licensed Material. For example, it may be reasonable to satisfy the conditions by providing a URI or hyperlink to a resource that includes the required information. 108 | 109 | 3. If requested by the Licensor, You must remove any of the information required by Section 3(a)(1)(A) to the extent reasonably practicable. 110 | 111 | b. ___ShareAlike.___ 112 | 113 | In addition to the conditions in Section 3(a), if You Share Adapted Material You produce, the following conditions also apply. 114 | 115 | 1. The Adapter’s License You apply must be a Creative Commons license with the same License Elements, this version or later, or a BY-NC-SA Compatible License. 116 | 117 | 2. You must include the text of, or the URI or hyperlink to, the Adapter's License You apply. You may satisfy this condition in any reasonable manner based on the medium, means, and context in which You Share Adapted Material. 118 | 119 | 3. You may not offer or impose any additional or different terms or conditions on, or apply any Effective Technological Measures to, Adapted Material that restrict exercise of the rights granted under the Adapter's License You apply. 120 | 121 | ### Section 4 – Sui Generis Database Rights. 122 | 123 | Where the Licensed Rights include Sui Generis Database Rights that apply to Your use of the Licensed Material: 124 | 125 | a. for the avoidance of doubt, Section 2(a)(1) grants You the right to extract, reuse, reproduce, and Share all or a substantial portion of the contents of the database for NonCommercial purposes only; 126 | 127 | b. if You include all or a substantial portion of the database contents in a database in which You have Sui Generis Database Rights, then the database in which You have Sui Generis Database Rights (but not its individual contents) is Adapted Material, including for purposes of Section 3(b); and 128 | 129 | c. You must comply with the conditions in Section 3(a) if You Share all or a substantial portion of the contents of the database. 130 | 131 | For the avoidance of doubt, this Section 4 supplements and does not replace Your obligations under this Public License where the Licensed Rights include other Copyright and Similar Rights. 132 | 133 | ### Section 5 – Disclaimer of Warranties and Limitation of Liability. 134 | 135 | a. __Unless otherwise separately undertaken by the Licensor, to the extent possible, the Licensor offers the Licensed Material as-is and as-available, and makes no representations or warranties of any kind concerning the Licensed Material, whether express, implied, statutory, or other. This includes, without limitation, warranties of title, merchantability, fitness for a particular purpose, non-infringement, absence of latent or other defects, accuracy, or the presence or absence of errors, whether or not known or discoverable. Where disclaimers of warranties are not allowed in full or in part, this disclaimer may not apply to You.__ 136 | 137 | b. __To the extent possible, in no event will the Licensor be liable to You on any legal theory (including, without limitation, negligence) or otherwise for any direct, special, indirect, incidental, consequential, punitive, exemplary, or other losses, costs, expenses, or damages arising out of this Public License or use of the Licensed Material, even if the Licensor has been advised of the possibility of such losses, costs, expenses, or damages. Where a limitation of liability is not allowed in full or in part, this limitation may not apply to You.__ 138 | 139 | c. The disclaimer of warranties and limitation of liability provided above shall be interpreted in a manner that, to the extent possible, most closely approximates an absolute disclaimer and waiver of all liability. 140 | 141 | ### Section 6 – Term and Termination. 142 | 143 | a. This Public License applies for the term of the Copyright and Similar Rights licensed here. However, if You fail to comply with this Public License, then Your rights under this Public License terminate automatically. 144 | 145 | b. Where Your right to use the Licensed Material has terminated under Section 6(a), it reinstates: 146 | 147 | 1. automatically as of the date the violation is cured, provided it is cured within 30 days of Your discovery of the violation; or 148 | 149 | 2. upon express reinstatement by the Licensor. 150 | 151 | For the avoidance of doubt, this Section 6(b) does not affect any right the Licensor may have to seek remedies for Your violations of this Public License. 152 | 153 | c. For the avoidance of doubt, the Licensor may also offer the Licensed Material under separate terms or conditions or stop distributing the Licensed Material at any time; however, doing so will not terminate this Public License. 154 | 155 | d. Sections 1, 5, 6, 7, and 8 survive termination of this Public License. 156 | 157 | ### Section 7 – Other Terms and Conditions. 158 | 159 | a. The Licensor shall not be bound by any additional or different terms or conditions communicated by You unless expressly agreed. 160 | 161 | b. Any arrangements, understandings, or agreements regarding the Licensed Material not stated herein are separate from and independent of the terms and conditions of this Public License. 162 | 163 | ### Section 8 – Interpretation. 164 | 165 | a. For the avoidance of doubt, this Public License does not, and shall not be interpreted to, reduce, limit, restrict, or impose conditions on any use of the Licensed Material that could lawfully be made without permission under this Public License. 166 | 167 | b. To the extent possible, if any provision of this Public License is deemed unenforceable, it shall be automatically reformed to the minimum extent necessary to make it enforceable. If the provision cannot be reformed, it shall be severed from this Public License without affecting the enforceability of the remaining terms and conditions. 168 | 169 | c. No term or condition of this Public License will be waived and no failure to comply consented to unless expressly agreed to by the Licensor. 170 | 171 | d. Nothing in this Public License constitutes or may be interpreted as a limitation upon, or waiver of, any privileges and immunities that apply to the Licensor or You, including from the legal processes of any jurisdiction or authority. 172 | 173 | > Creative Commons is not a party to its public licenses. Notwithstanding, Creative Commons may elect to apply one of its public licenses to material it publishes and in those instances will be considered the “Licensor.” Except for the limited purpose of indicating that material is shared under a Creative Commons public license or as otherwise permitted by the Creative Commons policies published at [creativecommons.org/policies](http://creativecommons.org/policies), Creative Commons does not authorize the use of the trademark “Creative Commons” or any other trademark or logo of Creative Commons without its prior written consent including, without limitation, in connection with any unauthorized modifications to any of its public licenses or any other arrangements, understandings, or agreements concerning use of licensed material. For the avoidance of doubt, this paragraph does not form part of the public licenses. 174 | > 175 | > Creative Commons may be contacted at creativecommons.org 176 | -------------------------------------------------------------------------------- /PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | **What this PR does?** 2 | 3 | 4 | **Why are you adding given library? (Short description why do you think that this library is important)** 5 | 6 | 7 | **Screenshots (the part that you modified is enough)** 8 | 9 | Before: 10 | 11 | After changes: 12 | -------------------------------------------------------------------------------- /README-CN.md: -------------------------------------------------------------------------------- 1 | # React 开发者指南 2 | 3 | [README in English](README.md) 4 | 5 | [README in Japanese](README-JA.md) 6 | 7 | [README in Korean](README-KO.md) 8 | 9 | [README in Portuguese (Brazil)](README-PTBR.md) 10 | 11 | [README in Russian](README-RU.md) 12 | 13 | [README in Spanish](README-ES.md) 14 | 15 | > 该指南将助你在 2019 成为一名 React 开发者 16 | 17 | 你可以在下面找到一张图，该图展示了你可以选取的路径及你想学习的库，从而成为一名 React 开发者。“作为 React 开发者，我接下来应该学习什么？”，我把这张图作为建议给每个问过我这一问题的人。 18 | 19 | ## 免责声明 20 | 21 | > 该指南的目的是为了给你心有个大概的轮廓。如果你对接下来要学习的内容感到困惑，指南将指导你而不是鼓励你选择时髦和新颖的东西。 22 | > 你应该逐渐理解为什么一种工具比另一种工具更适合某些情况，并且记住时髦和新颖的东西并不总是意味着最适合这个工作。 23 | 24 | ## Roadmap 25 | 26 | ![Roadmap](./roadmap-cn.png) 27 | 28 | ## 资源 29 | 30 | 1. 基础 31 | 1. HTML 32 | - 学习 HTML 基础知识 33 | - 做几个页面来练习 34 | 2. CSS 35 | - 学习 CSS 基础知识 36 | - 完成上一步的样式页面 37 | - 使用 grid 布局和 flexbox 布局构建页面 38 | 3. JS 基础 39 | - 熟悉语法 40 | - 学习 DOM 的基本操作 41 | - 学习 JS 的典型机制（状态提升，事件冒泡，原型） 42 | - 实现一些 AJAX（XHR）调用 43 | - 学习新特性 (ECMA Script 6+) 44 | - 另外，熟悉 jQuery 库 45 | 2. 常用开发技能 46 | 1. 学习 GIT 的使用, 在 GitHub 上创建一些仓库, 并和其他人分享你的代码 47 | 2. 掌握 HTTP(S) 协议, 及其请求方法 (GET, POST, PUT, PATCH, DELETE, OPTIONS) 48 | 3. 不要害怕使用 Google, [使用 Google 进行强力搜索](http://www.powersearchingwithgoogle.com/) 49 | 4. 熟悉终端，并配置你的 shell (bash, zsh, fish) 50 | 5. 阅读一些关于算法和数据结构的书籍 51 | 6. 阅读一些关于设计模式的书籍 52 | 3. 在[官网](https://reactjs.org/tutorial/tutorial.html)上学习 React 或者完成一些[课程](https://egghead.io/courses/the-beginner-s-guide-to-react) 53 | 4. 熟悉你将用到的工具 54 | 1. 包管理器 55 | - [npm](https://www.npmjs.com/) 56 | - [yarn](https://yarnpkg.com/lang/en/) 57 | - [pnpm](https://pnpm.js.org/) 58 | 2. 任务运行器 59 | - [npm 脚本](https://docs.npmjs.com/misc/scripts) 60 | - [gulp](https://gulpjs.com/) 61 | - [Webpack](https://webpack.js.org/) 62 | - [Rollup](https://rollupjs.org/guide/en) 63 | - [Parcel](https://parceljs.org/) 64 | 5. 样式 65 | 1. CSS 预处理器 66 | - [Sass/CSS](https://sass-lang.com/) 67 | - [PostCSS](https://postcss.org/) 68 | - [Less](http://lesscss.org/) 69 | - [Stylus](http://stylus-lang.com/) 70 | 2. CSS 框架 71 | - [Bootstrap](https://getbootstrap.com/) 72 | - [Materialize](https://materializecss.com/), [Material UI](https://material-ui.com/), [Material Design Lite](https://getmdl.io/) 73 | - [Bulma](https://bulma.io/) 74 | - [Semantic UI](https://semantic-ui.com/) 75 | 3. CSS 架构 76 | - [BEM](http://getbem.com/) 77 | - [CSS Modules](https://github.com/css-modules/css-modules) 78 | - [Atomic](https://acss.io/) 79 | - [OOCSS](https://github.com/stubbornella/oocss/wiki) 80 | - [SMACSS](https://smacss.com/) 81 | - [SUITCSS](https://suitcss.github.io/) 82 | 4. JS 编写 CSS 83 | - [Styled Components](https://www.styled-components.com/) 84 | - [Radium](https://formidable.com/open-source/radium/) 85 | - [Emotion](https://emotion.sh/) 86 | - [JSS](http://cssinjs.org/) 87 | - [Aphrodite](https://github.com/Khan/aphrodite) 88 | 6. 状态管理 89 | 1. [组件状态](https://reactjs.org/docs/faq-state.html)/[上下文 API](https://reactjs.org/docs/context.html) 90 | 2. [Redux](https://redux.js.org/) 91 | 1. 异步操作 (Side Effects) 92 | - [Redux Thunk](https://github.com/reduxjs/redux-thunk) 93 | - [Redux Better Promise](https://github.com/Lukasz-pluszczewski/redux-better-promise) 94 | - [Redux Saga](https://redux-saga.js.org/) 95 | - [Redux Observable](https://redux-observable.js.org) 96 | 2. 助手 97 | * [Rematch](https://rematch.gitbooks.io/rematch/) 98 | * [Reselect](https://github.com/reduxjs/reselect) 99 | 3. 数据持久化 100 | - [Redux Persist](https://github.com/rt2zz/redux-persist) 101 | - [Redux Phoenix](https://github.com/adam-golab/redux-phoenix) 102 | 4. [Redux Form](https://redux-form.com) 103 | 3. [MobX](https://mobx.js.org/) 104 | 7. 类型检查器 105 | - [PropTypes](https://reactjs.org/docs/typechecking-with-proptypes.html) 106 | - [TypeScript](https://www.typescriptlang.org/) 107 | - [Flow](https://flow.org/en/) 108 | 8. 表单助手 109 | - [Redux Form](https://redux-form.com) 110 | - [Formik](https://github.com/jaredpalmer/formik) 111 | - [Formsy](https://github.com/formsy/formsy-react) 112 | - [Final Form](https://github.com/final-form/final-form) 113 | 9. 路由 114 | - [React-Router](https://reacttraining.com/react-router/) 115 | - [Router5](https://router5.js.org/) 116 | - [Redux-First Router](https://github.com/faceyspacey/redux-first-router) 117 | - [Reach Router](https://reach.tech/router/) 118 | 10. API 客户端 119 | 1. REST 120 | - [Fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) 121 | - [SuperAgent](https://visionmedia.github.io/superagent/) 122 | - [axios](https://github.com/axios/axios) 123 | 2. GraphQL 124 | - [Apollo](https://www.apollographql.com/docs/react/) 125 | - [Relay](https://facebook.github.io/relay/) 126 | - [urql](https://github.com/FormidableLabs/urql) 127 | 11. 实用工具库 128 | - [Lodash](https://lodash.com/) 129 | - [Moment](https://momentjs.com/) 130 | - [classnames](https://github.com/JedWatson/classnames) 131 | - [Numeral](http://numeraljs.com/) 132 | - [RxJS](http://reactivex.io/) 133 | - [ImmutableJS](https://facebook.github.io/immutable-js/) 134 | - [Ramda](https://ramdajs.com/) 135 | 12. 测试 136 | 1. 单元（Unit）测试 137 | - [Jest](https://facebook.github.io/jest/) 138 | - [Enzyme](http://airbnb.io/enzyme/) 139 | - [Sinon](http://sinonjs.org/) 140 | - [Mocha](https://mochajs.org/) 141 | - [Chai](http://www.chaijs.com/) 142 | - [AVA](https://github.com/avajs/ava) 143 | - [Tape](https://github.com/substack/tape) 144 | 2. 端到端（E2E）测试 145 | - [Selenium](https://www.seleniumhq.org/), [Webdriver](http://webdriver.io/) 146 | - [Cypress](https://cypress.io/) 147 | - [Puppeteer](https://pptr.dev/) 148 | - [Cucumber.js](https://github.com/cucumber/cucumber-js) 149 | - [Nightwatch.js](http://nightwatchjs.org/) 150 | 3. 集成测试 151 | - [Karma](https://karma-runner.github.io/) 152 | 13. 国际化（i18n) 153 | - [React Intl](https://github.com/yahoo/react-intl) 154 | - [React i18next](https://react.i18next.com/) 155 | 14. 服务端渲染（SSR) 156 | - [Next.js](https://nextjs.org/) 157 | - [After.js](https://github.com/jaredpalmer/after.js) 158 | - [Rogue](https://github.com/alidcastano/rogue.js) 159 | 15. 静态网站生成器 160 | - [Gatsby](https://www.gatsbyjs.org/) 161 | 16. 后端集成框架 162 | - [React on Rails](https://shakacode.gitbooks.io/react-on-rails/content/) 163 | 17. 移动端 164 | - [React Native](https://facebook.github.io/react-native/) 165 | - [Cordova](https://cordova.apache.org/)/[Phonegap](https://phonegap.com/) 166 | 18. 桌面端 167 | - [Proton Native](https://proton-native.js.org/) 168 | - [Electron](https://electronjs.org/) 169 | - [React Native Windows](https://github.com/Microsoft/react-native-windows) 170 | 19. 虚拟现实（VR) 171 | - [React 360](https://facebook.github.io/react-360/) 172 | 173 | ## 总结 174 | 175 | 如果你认为指南可以改进，请提交包含任何更新的 PR 并提交任何问题。此外，我将继续改进这个仓库，因此你可以 star 这个仓库以便于重新访问。 176 | 177 | ## 贡献 178 | 179 | 该指南是使用[Draw.io](https://www.draw.io/)构建的。项目文件可以在 `/src` 目录中找到。要修改它, 请打开 draw.io, 点击 **Open Existing Diagram** 并选择项目中的 `xml` 文件。它将为你打开指南，更新它，上传和更新自述文件中的图像并创建一个 PR（导出为 png）。 180 | 181 | - 改进后提交 PR 182 | - 讨论问题中的想法 183 | - 传播消息 184 | 185 | ## 版权许可 186 | 187 | [![License: CC BY-NC-SA 4.0](https://img.shields.io/badge/License-CC%20BY--NC--SA%204.0-lightgrey.svg)](https://creativecommons.org/licenses/by-nc-sa/4.0/) 188 | -------------------------------------------------------------------------------- /README-ES.md: -------------------------------------------------------------------------------- 1 | # React Developer Roadmap 2 | 3 | [README in Chinese](README-CN.md) 4 | 5 | [README in English](README.md) 6 | 7 | [README in Japanese](README-JA.md) 8 | 9 | [README in Korean](README-KO.md) 10 | 11 | [README in Portuguese (Brazil)](README-PTBR.md) 12 | 13 | [README in Russian](README-RU.md) 14 | 15 | > Roadmap para convertirse en un desarrollador React en 2019:: 16 | 17 | A continuación puede encontrar un gráfico que muestra las rutas que puede tomar y las bibliotecas que le gustaría aprender para convertirse en un desarrollador React. Hice esta tabla como una sugerencia para todos los que me preguntan: "¿Qué debo aprender a continuación como desarrollador de React?" 18 | 19 | ## Descargo 20 | > El propósito de este roadmap es darte una idea sobre el paisaje. Este lo guiará en caso de estár confundido acerca de qué aprender, en lugar de animarlo a elegir lo que es moderno y actual. Debe comprender mejor por qué una herramienta sería más adecuada para algunos casos que la otra y recordar que la moda y la moda no siempre son las más adecuadas para el trabajo 21 | 22 | ## Roadmap 23 | 24 | ![Roadmap](./roadmap-es.png) 25 | 26 | ## Resources 27 | 28 | 1. Básico 29 | 1. HTML 30 | * Aprender los conceptos básicos de HTML. 31 |         * Hacer unas pocas páginas como ejercicio. 32 | 2. CSS 33 | * Aprender los conceptos básicos de CSS 34 | * Páginas de estilo del paso anterior. 35 |         * Construir una página con grid y flexbox. 36 | 3. Javascript Básico 37 | * Familiarizarse con la sintaxis. 38 |         * Aprender operaciones básicas en DOM 39 |         * Aprender los mecanismos típicos de JS (Hoisting, Event Bubbling, creación de prototipos) 40 |         * Hacer algunas llamadas AJAX (XHR) 41 |         * Aprender nuevas características (ECMA Script 6+) 42 |         * Además, familiarícese con la biblioteca jQuery 43 | 2. Habilidades generales de desarrollo 44 | 1. Aprenda GIT, cree algunos repositorios en GitHub, comparta su código con otras personas 45 | 2. Conozca el protocolo HTTP (S), métodos de solicitud (GET, POST, PUT, PATCH, DELETE, OPTIONS) 46 | 3. No tengas miedo de usar Google, [Power Searching with Google](http://www.powersearchingwithgoogle.com/) 47 | 4. Familiarícese con el terminal, configure su shell (bash, zsh, fish) 48 |     5. Lee algunos libros sobre algoritmos y estructuras de datos 49 |     6. Lee algunos libros sobre patrones de diseño 50 | 3. Aprender React [Página oficial](https://reactjs.org/tutorial/tutorial.html) o completa algunos [cursos](https://egghead.io/courses/the-beginner-s-guide-to-react) 51 | 4. Familiarízate con las herramientas que utilizarás. 52 | 1. Gestores de paquetes 53 | * [npm](https://www.npmjs.com/) 54 | * [yarn](https://yarnpkg.com/lang/en/) 55 | * [pnpm](https://pnpm.js.org/) 56 | 2. Task Runners 57 | * [npm scripts](https://docs.npmjs.com/misc/scripts) 58 | * [gulp](https://gulpjs.com/) 59 | * [Webpack](https://webpack.js.org/) 60 | * [Rollup](https://rollupjs.org/guide/en) 61 | * [Parcel](https://parceljs.org/) 62 | 5. Estilo 63 | 1. Preprocesadores CSS 64 | * [Sass/CSS](https://sass-lang.com/) 65 | * [PostCSS](https://postcss.org/) 66 | * [Less](http://lesscss.org/) 67 | * [Stylus](http://stylus-lang.com/) 68 | 2. Frameworks CSS 69 | * [Bootstrap](https://getbootstrap.com/) 70 | * [Materialize](https://materializecss.com/), [Material UI](https://material-ui.com/), [Material Design Lite](https://getmdl.io/) 71 | * [Bulma](https://bulma.io/) 72 | * [Semantic UI](https://semantic-ui.com/) 73 | 3. Arquitectura CSS 74 | * [BEM](http://getbem.com/) 75 | * [CSS Modules](https://github.com/css-modules/css-modules) 76 | * [Atomic](https://acss.io/) 77 | * [OOCSS](https://github.com/stubbornella/oocss/wiki) 78 | * [SMACSS](https://smacss.com/) 79 | * [SUITCSS](https://suitcss.github.io/) 80 | 4. CSS en JS 81 | * [Styled Components](https://www.styled-components.com/) 82 | * [Radium](https://formidable.com/open-source/radium/) 83 | * [Emotion](https://emotion.sh/) 84 | * [JSS](http://cssinjs.org/) 85 | * [Aphrodite](https://github.com/Khan/aphrodite) 86 | 6. Manejo del estado 87 | 1. [Component State](https://reactjs.org/docs/faq-state.html)/[Context API](https://reactjs.org/docs/context.html) 88 | 2. [Redux](https://redux.js.org/) 89 | 1. Acciones asincrónicas (Efectos secundarios) 90 | * [Redux Thunk](https://github.com/reduxjs/redux-thunk) 91 | * [Redux Better Promise](https://github.com/Lukasz-pluszczewski/redux-better-promise) 92 | * [Redux Saga](https://redux-saga.js.org/) 93 | * [Redux Observable](https://redux-observable.js.org) 94 | 2. Helpers 95 | * [Rematch](https://rematch.gitbooks.io/rematch/) 96 | * [Reselect](https://github.com/reduxjs/reselect) 97 | 3. Persistencia de datos 98 | * [Redux Persist](https://github.com/rt2zz/redux-persist) 99 | * [Redux Phoenix](https://github.com/adam-golab/redux-phoenix) 100 | 4. [Redux Form](https://redux-form.com) 101 | 3. [MobX](https://mobx.js.org/) 102 | 7. Comprobadores de tipos 103 | * [PropTypes](https://reactjs.org/docs/typechecking-with-proptypes.html) 104 | * [TypeScript](https://www.typescriptlang.org/) 105 | * [Flow](https://flow.org/en/) 106 | 8. Helpers de formularios 107 | * [Redux Form](https://redux-form.com) 108 | * [Formik](https://github.com/jaredpalmer/formik) 109 | * [Formsy](https://github.com/formsy/formsy-react) 110 | * [Final Form](https://github.com/final-form/final-form) 111 | 9. Enrutamiento 112 | * [React-Router](https://reacttraining.com/react-router/) 113 | * [Router5](https://router5.js.org/) 114 | * [Redux-First Router](https://github.com/faceyspacey/redux-first-router) 115 | * [Reach Router](https://reach.tech/router/) 116 | 10. Consumo de API 117 | 1. REST 118 | * [Fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) 119 | * [SuperAgent](https://visionmedia.github.io/superagent/) 120 | * [axios](https://github.com/axios/axios) 121 | 2. GraphQL 122 | * [Apollo](https://www.apollographql.com/docs/react/) 123 | * [Relay](https://facebook.github.io/relay/) 124 | * [urql](https://github.com/FormidableLabs/urql) 125 | 11. Librerías útiles 126 | * [Lodash](https://lodash.com/) 127 | * [Moment](https://momentjs.com/) 128 | * [classnames](https://github.com/JedWatson/classnames) 129 | * [Numeral](http://numeraljs.com/) 130 | * [RxJS](http://reactivex.io/) 131 | * [ImmutableJS](https://facebook.github.io/immutable-js/) 132 | * [Ramda](https://ramdajs.com/) 133 | 12. Pruebas 134 | 1. Pruebas Unitarias 135 | * [Jest](https://facebook.github.io/jest/) 136 | * [Enzyme](http://airbnb.io/enzyme/) 137 | * [Sinon](http://sinonjs.org/) 138 | * [Mocha](https://mochajs.org/) 139 | * [Chai](http://www.chaijs.com/) 140 | * [AVA](https://github.com/avajs/ava) 141 | * [Tape](https://github.com/substack/tape) 142 | 2. Pruebas de extremo a extremo 143 | * [Selenium](https://www.seleniumhq.org/), [Webdriver](http://webdriver.io/) 144 | * [Cypress](https://cypress.io/) 145 | * [Puppeteer](https://pptr.dev/) 146 | * [Cucumber.js](https://github.com/cucumber/cucumber-js) 147 | * [Nightwatch.js](http://nightwatchjs.org/) 148 | 3. Pruebas de integración 149 | * [Karma](https://karma-runner.github.io/) 150 | 13. Internacionalización 151 | * [React Intl](https://github.com/yahoo/react-intl) 152 | * [React i18next](https://react.i18next.com/) 153 | 14. Render del lado del servidor 154 | * [Next.js](https://nextjs.org/) 155 | * [After.js](https://github.com/jaredpalmer/after.js) 156 | * [Rogue](https://github.com/alidcastano/rogue.js) 157 | 15. Generador de sitio estático 158 | * [Gatsby](https://www.gatsbyjs.org/) 159 | 16. Integración con Framework de Backend 160 | * [React on Rails](https://shakacode.gitbooks.io/react-on-rails/content/) 161 | 17. Móvil 162 | * [React Native](https://facebook.github.io/react-native/) 163 | * [Cordova](https://cordova.apache.org/)/[Phonegap](https://phonegap.com/) 164 | 18. Escritorio 165 | * [Proton Native](https://proton-native.js.org/) 166 | * [Electron](https://electronjs.org/) 167 | * [React Native Windows](https://github.com/Microsoft/react-native-windows) 168 | 19. Realidad virtual 169 | * [React 360](https://facebook.github.io/react-360/) 170 | 171 | ## Conclusión 172 | 173 | 174 | Si cree que se puede mejorar el roadmap, abra un PR con cualquier actualización y envíe cualquier problema. Además, continuaré mejorandolo, por lo que es posible que desee darle una estrella a este repositorio para volver a visitarlo. 175 | 176 | ## Contribución 177 | 178 | The roadmap is built using [Draw.io](https://www.draw.io/). Project file can be found at `/src` directory. To modify it, open draw.io, click **Open Existing Diagram** and choose `xml` file with project. It will open the roadmap for you. Update it, upload and update the images in readme and create a PR (export as png). 179 | 180 | - Abrir un pull request con mejoras. 181 | - Discutir ideas en temas (issues). 182 | - Difundir la palabra. 183 | 184 | ## Licencia 185 | 186 | [![License: CC BY-NC-SA 4.0](https://img.shields.io/badge/License-CC%20BY--NC--SA%204.0-lightgrey.svg)](https://creativecommons.org/licenses/by-nc-sa/4.0/) 187 | -------------------------------------------------------------------------------- /README-JA.md: -------------------------------------------------------------------------------- 1 | # React 開発者ロードマップ 2 | 3 | [README in Chinese](README-CN.md) 4 | 5 | [README in English](README.md) 6 | 7 | [README in Korean](README-KO.md) 8 | 9 | [README in Portuguese (Brazil)](README-PTBR.md) 10 | 11 | [README in Russian](README-RU.md) 12 | 13 | [README in Spanish](README-ES.md) 14 | 15 | > Roadmap to becoming a React developer in 2019: 16 | 17 | これはReact開発者になるためにあなたが学ぶべき技術やライブラリを示すチャートです。 このチャートは、「React開発者として次に何を学ぶ必要があるのか」と悩むすべての人へのヒントとして作成しました。 18 | 19 | ## 免責事項 20 | > このロードマップの目的は、あなたに状況を把握するヒントを与えることです。 あなたが次に何を学ぶべきかについて迷っているときにこのロードマップが導いてくれるでしょう。 あるツールがどのようなケースで他よりも適しているのか、その理由について理解を深める必要があります。また、流行しているものが必ずしも最適であるとは限らないことに注意してください。 21 | 22 | ## Roadmap 23 | 24 | ![Roadmap](./roadmap-ja.png) 25 | 26 | ## Resources 27 | 28 | 1. 基礎知識 29 | 1. HTML 30 | * HTMLの基礎知識を学ぶ 31 | * 練習としていくつかページを作成する 32 | 2. CSS 33 | * CSSの基礎知識を学ぶ 34 | * 前項で作成したページにCSSを当てる 35 | * ページを grid 及び flexbox で作成する 36 | 3. JS基礎 37 | * 構文に詳しくなる 38 | * DOMの基本操作を学ぶ 39 | * JSに特徴的なメカニズムを学ぶ (巻き上げ(Hoisting), Event Bubbling, Prototyping) 40 | * AJAX (XHR) を利用する 41 | * 新機能を学ぶ (ECMA Script 6以降) 42 | * jQueryライブラリに詳しくなる 43 | 2. 一般開発技能 44 | 1. GITについて学ぶ。GitHubにいくつかレポジトリを作成し他の人と共有してみる 45 | 2. Know HTTP(S) protocol, request methods (GET, POST, PUT, PATCH, DELETE, OPTIONS) 46 | 2. HTTP(S)について知る。リクエストメソッド (GET, POST, PUT, PATCH, DELETE, OPTIONS) 47 | 3. Googleを活用して検索する。[Power Searching with Google](http://www.powersearchingwithgoogle.com/) 48 | 4. ターミナルに慣れる。shell(bash, zsh, fish)の設定をしてみる。 49 | 5. データ構造とアルゴリズムについての本を読む 50 | 6. デザインパターンについての本を読む 51 | 3. 公式サイトでReactについて学ぶ [official website](https://reactjs.org/tutorial/tutorial.html) or complete some [courses](https://egghead.io/courses/the-beginner-s-guide-to-react) 52 | 4. 利用するツールに詳しくなる 53 | 1. Package Managers 54 | * [npm](https://www.npmjs.com/) 55 | * [yarn](https://yarnpkg.com/lang/en/) 56 | * [pnpm](https://pnpm.js.org/) 57 | 2. Task Runners 58 | * [npm scripts](https://docs.npmjs.com/misc/scripts) 59 | * [gulp](https://gulpjs.com/) 60 | * [Webpack](https://webpack.js.org/) 61 | * [Rollup](https://rollupjs.org/guide/en) 62 | * [Parcel](https://parceljs.org/) 63 | 5. Styling 64 | 1. CSS Preprocessor 65 | * [Sass/CSS](https://sass-lang.com/) 66 | * [PostCSS](https://postcss.org/) 67 | * [Less](http://lesscss.org/) 68 | * [Stylus](http://stylus-lang.com/) 69 | 2. CSS Frameworks 70 | * [Bootstrap](https://getbootstrap.com/) 71 | * [Materialize](https://materializecss.com/), [Material UI](https://material-ui.com/), [Material Design Lite](https://getmdl.io/) 72 | * [Bulma](https://bulma.io/) 73 | * [Semantic UI](https://semantic-ui.com/) 74 | 3. CSS Architecture 75 | * [BEM](http://getbem.com/) 76 | * [CSS Modules](https://github.com/css-modules/css-modules) 77 | * [Atomic](https://acss.io/) 78 | * [OOCSS](https://github.com/stubbornella/oocss/wiki) 79 | * [SMACSS](https://smacss.com/) 80 | * [SUITCSS](https://suitcss.github.io/) 81 | 4. CSS in JS 82 | * [Styled Components](https://www.styled-components.com/) 83 | * [Radium](https://formidable.com/open-source/radium/) 84 | * [Emotion](https://emotion.sh/) 85 | * [JSS](http://cssinjs.org/) 86 | * [Aphrodite](https://github.com/Khan/aphrodite) 87 | 6. State管理 88 | 1. [Component State](https://reactjs.org/docs/faq-state.html)/[Context API](https://reactjs.org/docs/context.html) 89 | 2. [Redux](https://redux.js.org/) 90 | 1. 非同期処理 (副作用) 91 | * [Redux Thunk](https://github.com/reduxjs/redux-thunk) 92 | * [Redux Better Promise](https://github.com/Lukasz-pluszczewski/redux-better-promise) 93 | * [Redux Saga](https://redux-saga.js.org/) 94 | * [Redux Observable](https://redux-observable.js.org) 95 | 2. Helpers 96 | * [Rematch](https://rematch.gitbooks.io/rematch/) 97 | * [Reselect](https://github.com/reduxjs/reselect) 98 | 3. Data persistence 99 | * [Redux Persist](https://github.com/rt2zz/redux-persist) 100 | * [Redux Phoenix](https://github.com/adam-golab/redux-phoenix) 101 | 4. [Redux Form](https://redux-form.com) 102 | 3. [MobX](https://mobx.js.org/) 103 | 7. 型チェッカー 104 | * [PropTypes](https://reactjs.org/docs/typechecking-with-proptypes.html) 105 | * [TypeScript](https://www.typescriptlang.org/) 106 | * [Flow](https://flow.org/en/) 107 | 8. Form Helpers 108 | * [Redux Form](https://redux-form.com) 109 | * [Formik](https://github.com/jaredpalmer/formik) 110 | * [Formsy](https://github.com/formsy/formsy-react) 111 | * [Final Form](https://github.com/final-form/final-form) 112 | 9. Routing 113 | * [React-Router](https://reacttraining.com/react-router/) 114 | * [Router5](https://router5.js.org/) 115 | * [Redux-First Router](https://github.com/faceyspacey/redux-first-router) 116 | * [Reach Router](https://reach.tech/router/) 117 | 10. API Clients 118 | 1. REST 119 | * [Fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) 120 | * [SuperAgent](https://visionmedia.github.io/superagent/) 121 | * [axios](https://github.com/axios/axios) 122 | 2. GraphQL 123 | * [Apollo](https://www.apollographql.com/docs/react/) 124 | * [Relay](https://facebook.github.io/relay/) 125 | * [urql](https://github.com/FormidableLabs/urql) 126 | 11. Utility Libraries 127 | * [Lodash](https://lodash.com/) 128 | * [Moment](https://momentjs.com/) 129 | * [classnames](https://github.com/JedWatson/classnames) 130 | * [Numeral](http://numeraljs.com/) 131 | * [RxJS](http://reactivex.io/) 132 | * [ImmutableJS](https://facebook.github.io/immutable-js/) 133 | * [Ramda](https://ramdajs.com/) 134 | 12. Testing 135 | 1. Unit Testing 136 | * [Jest](https://facebook.github.io/jest/) 137 | * [Enzyme](http://airbnb.io/enzyme/) 138 | * [Sinon](http://sinonjs.org/) 139 | * [Mocha](https://mochajs.org/) 140 | * [Chai](http://www.chaijs.com/) 141 | * [AVA](https://github.com/avajs/ava) 142 | * [Tape](https://github.com/substack/tape) 143 | 2. End to End Testing 144 | * [Selenium](https://www.seleniumhq.org/), [Webdriver](http://webdriver.io/) 145 | * [Cypress](https://cypress.io/) 146 | * [Puppeteer](https://pptr.dev/) 147 | * [Cucumber.js](https://github.com/cucumber/cucumber-js) 148 | * [Nightwatch.js](http://nightwatchjs.org/) 149 | 3. Integration Testing 150 | * [Karma](https://karma-runner.github.io/) 151 | 13. 国際化(Internationalization) 152 | * [React Intl](https://github.com/yahoo/react-intl) 153 | * [React i18next](https://react.i18next.com/) 154 | 14. Server Side Rendering 155 | * [Next.js](https://nextjs.org/) 156 | * [After.js](https://github.com/jaredpalmer/after.js) 157 | * [Rogue](https://github.com/alidcastano/rogue.js) 158 | 15. 静的サイトジェネレータ(Static Site Generator) 159 | * [Gatsby](https://www.gatsbyjs.org/) 160 | 16. Backend Framework Integration 161 | * [React on Rails](https://shakacode.gitbooks.io/react-on-rails/content/) 162 | 17. Mobile 163 | * [React Native](https://facebook.github.io/react-native/) 164 | * [Cordova](https://cordova.apache.org/)/[Phonegap](https://phonegap.com/) 165 | 18. Desktop 166 | * [Proton Native](https://proton-native.js.org/) 167 | * [Electron](https://electronjs.org/) 168 | * [React Native Windows](https://github.com/Microsoft/react-native-windows) 169 | 19. Virtual Reality 170 | * [React 360](https://facebook.github.io/react-360/) 171 | 172 | ## Wrap Up 173 | 174 | ロードマップに改善できる点があれば、Pull Requestを開いてissueを投稿してください。私もあなたがSTARをつけたくなるように、このロードマップを改善し続けます。 175 | 176 | ## Contribution 177 | 178 | このロードマップは [Draw.io](https://www.draw.io/) を利用してつくられています。プロジェクトファイルは `/src` ディレクトリにあります。 修正するときは, draw.ioを開いて **Open Existing Diagram** をクリックし `xml` ファイルを選択してください。ロードマップが開きます。それを更新し `png` としてエクスポートして、ファイルとreadmeを更新し, Pull Requestを作成してください. 179 | 180 | 181 | - 改善のプルリクエストを開く 182 | - 問題のアイデアを話し合う 183 | - 広く周知する 184 | 185 | ## License 186 | 187 | [![License: CC BY-NC-SA 4.0](https://img.shields.io/badge/License-CC%20BY--NC--SA%204.0-lightgrey.svg)](https://creativecommons.org/licenses/by-nc-sa/4.0/) 188 | -------------------------------------------------------------------------------- /README-KO.md: -------------------------------------------------------------------------------- 1 | # React 개발자 로드맵 2 | 3 | [README in Chinese](README-CN.md) 4 | 5 | [README in English](README.md) 6 | 7 | [README in Japanese](README-JA.md) 8 | 9 | [README in Portuguese (Brazil)](README-PTBR.md) 10 | 11 | [README in Russian](README-RU.md) 12 | 13 | [README in Spanish](README-ES.md) 14 | 15 | > 2019년 React 개발자 로드맵: 16 | 17 | 아래에는 React 개발자가 되기 위한 학습 로드맵과 관련 라이브러리들이 적혀있는 차트가 있습니다. React 개발자로서 다음에 무엇을 배워야하는지 묻는 모든 사람들을 위한 팁으로 이 차트를 만들었습니다. 18 | 19 | ## 주의사항 20 | 21 | > 이 로드맵의 목적은 전체에 대한 윤곽을 제공하는 것입니다. 여러분이 무조건 힙하고 트렌디한 것을 선택하기보단, 앞으로 무엇을 배워야할지 혼란스러울때 이 로드맵이 좋은 가이드가 될 것입니다. 기술을 선택함에 있어 하나의 도구가 다른 도구보다 어떤 경우에 적합한지 이해해야하며, 힙하고 트렌디한 기술들이 항상 모든 업무에 적합하진 않다는 것을 염두에 두시기 바랍니다. 22 | 23 | ## 로드맵 24 | 25 | ![Roadmap](./roadmap-ko.png) 26 | 27 | ## 학습 리소스 28 | 29 | 1. 기본기 30 | 1. HTML 31 | - HTML의 기본기를 다져주세요. 32 | - 연습삼아 몇 개의 페이지를 만들어보세요. 33 | 2. CSS 34 | - CSS의 기본기를 다져주세요. 35 | - 이전 단계에서 만들었던 페이지들을 꾸며보세요. 36 | - Grid와 flexbox를 활용해 페이지를 만들어보세요. 37 | 3. JS 기본 38 | - 문법에 익숙해지세요. 39 | - DOM을 활용한 기본적인 작업들을 배우세요. 40 | - JS에 대한 일반적인 메커니즘을 배우세요. (호이스팅, 이벤트 버블링, 프로토타입) 41 | - AJAX (XHR) 요청을 해보세요. 42 | - 새로운 기능을 배우세요. (ECMA Script 6+) 43 | - 선택적으로, jQuery 라이브러리에 익숙해지면 좋습니다. 44 | 2. 기본적인 개발 스킬 45 | 1. GIT에 대해 공부하고, GitHub에 몇 개의 Repository를 만들어도 보고, 다른 사람들에게 여러분의 코드를 공유해보세요. 46 | 2. Request 메소드 (GET, POST, PUT, PATCH, DELETE, OPTIONS)와 더불어 HTTP(S) 프로토콜에 대해 공부하세요. 47 | 3. 구글링을 겁내지 마세요. [구글로 파워서칭 해보기](http://www.powersearchingwithgoogle.com/) 48 | 4. 터미널에 익숙해지시고, 여러분만의 shell (bash, zsh, fish)을 설정해보세요. 49 | 5. 알고리즘과 자료구조에 대한 몇 개의 책을 읽어보세요. 50 | 6. 디자인 패턴에 대한 몇 개의 책을 읽어보세요. 51 | 3. [공식 홈페이지](https://reactjs.org/tutorial/tutorial.html)에서 튜토리얼을 읽어보거나 몇 개의 [코스들](https://egghead.io/courses/the-beginner-s-guide-to-react)을 수강해보세요. 52 | 4. 여러분이 사용할 도구들에 익숙해지세요. 53 | 1. 패키지 관리 54 | - [npm](https://www.npmjs.com/) 55 | - [yarn](https://yarnpkg.com/lang/en/) 56 | - [pnpm](https://pnpm.js.org/) 57 | 2. 태스크 러너 58 | - [npm scripts](https://docs.npmjs.com/misc/scripts) 59 | - [gulp](https://gulpjs.com/) 60 | - [Webpack](https://webpack.js.org/) 61 | - [Rollup](https://rollupjs.org/guide/en) 62 | - [Parcel](https://parceljs.org/) 63 | 5. 스타일링 64 | 1. CSS 전처리기 65 | - [Sass/CSS](https://sass-lang.com/) 66 | - [PostCSS](https://postcss.org/) 67 | - [Less](http://lesscss.org/) 68 | - [Stylus](http://stylus-lang.com/) 69 | 2. CSS 프레임워크 70 | - [Bootstrap](https://getbootstrap.com/) 71 | - [Materialize](https://materializecss.com/), [Material UI](https://material-ui.com/), [Material Design Lite](https://getmdl.io/) 72 | - [Bulma](https://bulma.io/) 73 | - [Semantic UI](https://semantic-ui.com/) 74 | 3. CSS 설계 75 | - [BEM](http://getbem.com/) 76 | - [CSS Modules](https://github.com/css-modules/css-modules) 77 | - [Atomic](https://acss.io/) 78 | - [OOCSS](https://github.com/stubbornella/oocss/wiki) 79 | - [SMACSS](https://smacss.com/) 80 | - [SUITCSS](https://suitcss.github.io/) 81 | 4. CSS in JS 82 | - [Styled Components](https://www.styled-components.com/) 83 | - [Radium](https://formidable.com/open-source/radium/) 84 | - [Emotion](https://emotion.sh/) 85 | - [JSS](http://cssinjs.org/) 86 | - [Aphrodite](https://github.com/Khan/aphrodite) 87 | 6. 상태관리 88 | 1. [컴포넌트 상태관리](https://reactjs.org/docs/faq-state.html)/[Context API](https://reactjs.org/docs/context.html) 89 | 2. [Redux](https://redux.js.org/) 90 | 1. 비동기 액션 (사이드 이펙트) 91 | - [Redux Thunk](https://github.com/reduxjs/redux-thunk) 92 | - [Redux Better Promise](https://github.com/Lukasz-pluszczewski/redux-better-promise) 93 | - [Redux Saga](https://redux-saga.js.org/) 94 | - [Redux Observable](https://redux-observable.js.org) 95 | 2. 헬퍼 라이브러리 96 | - [Rematch](https://rematch.gitbooks.io/rematch/) 97 | - [Reselect](https://github.com/reduxjs/reselect) 98 | 3. 데이터 지속성 99 | - [Redux Persist](https://github.com/rt2zz/redux-persist) 100 | - [Redux Phoenix](https://github.com/adam-golab/redux-phoenix) 101 | 4. [Redux Form](https://redux-form.com) 102 | 3. [MobX](https://mobx.js.org/) 103 | 7. 정적 타입 체킹 104 | - [PropTypes](https://reactjs.org/docs/typechecking-with-proptypes.html) 105 | - [TypeScript](https://www.typescriptlang.org/) 106 | - [Flow](https://flow.org/en/) 107 | 8. 폼(Form) 헬퍼 108 | - [Redux Form](https://redux-form.com) 109 | - [Formik](https://github.com/jaredpalmer/formik) 110 | - [Formsy](https://github.com/formsy/formsy-react) 111 | - [Final Form](https://github.com/final-form/final-form) 112 | 9. 라우팅 113 | - [React-Router](https://reacttraining.com/react-router/) 114 | - [Router5](https://router5.js.org/) 115 | - [Redux-First Router](https://github.com/faceyspacey/redux-first-router) 116 | - [Reach Router](https://reach.tech/router/) 117 | 10. API 클라이언트 118 | 1. REST 119 | - [Fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) 120 | - [SuperAgent](https://visionmedia.github.io/superagent/) 121 | - [axios](https://github.com/axios/axios) 122 | 2. GraphQL 123 | - [Apollo](https://www.apollographql.com/docs/react/) 124 | - [Relay](https://facebook.github.io/relay/) 125 | - [urql](https://github.com/FormidableLabs/urql) 126 | 11. 유틸리티 라이브러리 127 | - [Lodash](https://lodash.com/) 128 | - [Moment](https://momentjs.com/) 129 | - [classnames](https://github.com/JedWatson/classnames) 130 | - [Numeral](http://numeraljs.com/) 131 | - [RxJS](http://reactivex.io/) 132 | - [ImmutableJS](https://facebook.github.io/immutable-js/) 133 | - [Ramda](https://ramdajs.com/) 134 | 12. 테스팅 135 | 1. 유닛 테스팅 136 | - [Jest](https://facebook.github.io/jest/) 137 | - [Enzyme](http://airbnb.io/enzyme/) 138 | - [Sinon](http://sinonjs.org/) 139 | - [Mocha](https://mochajs.org/) 140 | - [Chai](http://www.chaijs.com/) 141 | - [AVA](https://github.com/avajs/ava) 142 | - [Tape](https://github.com/substack/tape) 143 | 2. End to End 테스팅 144 | - [Selenium](https://www.seleniumhq.org/), [Webdriver](http://webdriver.io/) 145 | - [Cypress](https://cypress.io/) 146 | - [Puppeteer](https://pptr.dev/) 147 | - [Cucumber.js](https://github.com/cucumber/cucumber-js) 148 | - [Nightwatch.js](http://nightwatchjs.org/) 149 | 3. 통합 테스팅 150 | - [Karma](https://karma-runner.github.io/) 151 | 13. 국제화 152 | - [React Intl](https://github.com/yahoo/react-intl) 153 | - [React i18next](https://react.i18next.com/) 154 | 14. 서버사이드 렌더링 155 | - [Next.js](https://nextjs.org/) 156 | - [After.js](https://github.com/jaredpalmer/after.js) 157 | - [Rogue](https://github.com/alidcastano/rogue.js) 158 | 15. 정적 사이트 생성기 159 | - [Gatsby](https://www.gatsbyjs.org/) 160 | 16. 백엔드 프레임워크 통합 161 | - [React on Rails](https://shakacode.gitbooks.io/react-on-rails/content/) 162 | 17. 모바일 163 | - [React Native](https://facebook.github.io/react-native/) 164 | - [Cordova](https://cordova.apache.org/)/[Phonegap](https://phonegap.com/) 165 | 18. 데스크탑 166 | - [Proton Native](https://proton-native.js.org/) 167 | - [Electron](https://electronjs.org/) 168 | - [React Native Windows](https://github.com/Microsoft/react-native-windows) 169 | 19. 가상현실 (VR) 170 | - [React 360](https://facebook.github.io/react-360/) 171 | 172 | ## 마무리 173 | 174 | 이 로드맵에 개선이 필요하면 수정사항을 포함한 PR을 보내주시거나 이슈에 의견을 남겨주세요. 저 또한 이것을 계속 개선하려고 노력 중에 있으니, 여러분께서도 다시 찾아오시기 쉽도록 Star을 부탁드립니다. 175 | 176 | ## 컨트리뷰션 177 | 178 | 이 로드맵은 [Draw.io](https://www.draw.io/)를 사용하여 작성되었습니다. 프로젝트 파일들은 `/src` 디렉토리에 있습니다. 수정하기 위해선 draw.io를 열어서, **Open Existing Diagram** 를 누르시고 프로젝트 내의 `xml` 파일을 선택해주세요. 로드맵 파일이 열릴 것입니다. 수정하시고, readme의 image 파일을 변경해주시고 PR을 만들어주세요. (png 파일로 내보내기 해주세요). 179 | 180 | - 수정 / 개선사항과 함께 Pull Request를 남겨주세요. 181 | - Issues에서 의견을 나눠주세요. 182 | - 다른 사람들에게도 알려주세요. 183 | 184 | ## 라이센스 185 | 186 | [![License: CC BY-NC-SA 4.0](https://img.shields.io/badge/License-CC%20BY--NC--SA%204.0-lightgrey.svg)](https://creativecommons.org/licenses/by-nc-sa/4.0/) 187 | -------------------------------------------------------------------------------- /README-PTBR.md: -------------------------------------------------------------------------------- 1 | # Guia do desenvolvedor React 2 | 3 | [README in Chinese](README-CN.md) 4 | 5 | [README in English](README.md) 6 | 7 | [README in Japanese](README-JA.md) 8 | 9 | [README in Korean](README-KO.md) 10 | 11 | [README in Russian](README-RU.md) 12 | 13 | [README in Spanish](README-ES.md) 14 | 15 | > Guia para se tornar um desenvolvedor React em 2019: 16 | > Abaixo, você pode encontrar um diagrama mostrando os caminhos que podem levar, bem como as bibliotecas que você precisa aprender para se tornar um desenvolvedor React. Eu fiz esse esquema como uma dica para qualquer um que me perguntasse: "O que eu deveria aprender mais como desenvolvedor React?" 17 | 18 | ## Aviso 19 | 20 | > O objetivo deste guia é dar uma ideia geral de como se tornar um desenvolvedor React. Este guia irá ajudá-lo se você estiver confuso sobre o que estudar, em vez de encorajá-lo a escolher algo elegante e popular. Você deve entender gradualmente por que uma ferramenta é mais adequada para determinadas situações do que outra, e não se esqueça de que uma ferramenta moderna e popular nem sempre significa que ela é mais adequada para o trabalho. 21 | 22 | ## Roadmap 23 | 24 | ![Roadmap](./roadmap-ptbr.png) 25 | 26 | ## Recursos 27 | 28 | 1. Basico 29 | 1. HTML 30 | - Aprenda o básico do HTML 31 | - Desenvolva algumas paginas como exercícios 32 | 2. CSS 33 | - Aprenda o básico de CSS 34 | - Aplique estilos nas páginas desenvolvidas anteriormente 35 | - Desenvolva uma página com CSS Grid e CSS Flexbox 36 | 3. Javascript 37 | - Se familiarize com a sintaxe 38 | - Aprenda operações basicas com o DOM 39 | - Aprenda mecanismos típicos para JS (Hoisting, Event Bubbling, Prototyping) 40 | - Faça algumas requisições AJAX 41 | - Aprenda as novas features do javascript (ECMA Script 6+) 42 | - Opcional: Conheça a biblioteca JQuery 43 | 2. Conhecimentos de desenvolvimento em geral 44 | 1. Aprenda GIT, crie repositórios no GitHub e compartilhe seu código com outras pessoas. 45 | 2. Aprenda os protocolos HTTP(S) e metodos de request (GET, POST, PUT, PATCH, DELETE, OPTIONS) 46 | 3. Não tenha medo de utilizar o google, veja [o uso avançado do Google](http://www.powersearchingwithgoogle.com/) 47 | 4. Familiarize-se com terminal e configure-o (bash, zsh, fish) 48 | 5. Leia alguns livros sobre algoritmos e estrutura de dados 49 | 6. Leia alguns livros sobre padrões de projeto (design patterns) 50 | 3. Aprenda React no [site oficial](https://reactjs.org/tutorial/tutorial.html) ou realize alguns [cursos](https://egghead.io/courses/the-beginner-s-guide-to-react) 51 | 4. Conheça as ferramentas que voce usará 52 | 1. Gerenciadores de pacote 53 | - [npm](https://www.npmjs.com/) 54 | - [yarn](https://yarnpkg.com/lang/en/) 55 | - [pnpm](https://pnpm.js.org/) 56 | 2. Executadores de tarefas 57 | - [npm scripts](https://docs.npmjs.com/misc/scripts) 58 | - [gulp](https://gulpjs.com/) 59 | - [Webpack](https://webpack.js.org/) 60 | - [Rollup](https://rollupjs.org/guide/en) 61 | - [Parcel](https://parceljs.org/) 62 | 5. Estilização 63 | 1. Pré-processadores CSS 64 | - [Sass/CSS](https://sass-lang.com/) 65 | - [PostCSS](https://postcss.org/) 66 | - [Less](http://lesscss.org/) 67 | - [Stylus](http://stylus-lang.com/) 68 | 2. Frameworks CSS 69 | - [Bootstrap](https://getbootstrap.com/) 70 | - [Materialize](https://materializecss.com/), [Material UI](https://material-ui.com/), [Material Design Lite](https://getmdl.io/) 71 | - [Bulma](https://bulma.io/) 72 | - [Semantic UI](https://semantic-ui.com/) 73 | 3. Arquitetura CSS 74 | - [BEM](http://getbem.com/) 75 | - [CSS Modules](https://github.com/css-modules/css-modules) 76 | - [Atomic](https://acss.io/) 77 | - [OOCSS](https://github.com/stubbornella/oocss/wiki) 78 | - [SMACSS](https://smacss.com/) 79 | - [SUITCSS](https://suitcss.github.io/) 80 | 4. CSS in JS 81 | - [Styled Components](https://www.styled-components.com/) 82 | - [Radium](https://formidable.com/open-source/radium/) 83 | - [Emotion](https://emotion.sh/) 84 | - [JSS](http://cssinjs.org/) 85 | - [Aphrodite](https://github.com/Khan/aphrodite) 86 | 6. Gerenciamento de estado 87 | 1. [Component State](https://reactjs.org/docs/faq-state.html)/[Context API](https://reactjs.org/docs/context.html) 88 | 2. [Redux](https://redux.js.org/) 89 | 1. Async actions (Side Effects) 90 | - [Redux Thunk](https://github.com/reduxjs/redux-thunk) 91 | - [Redux Better Promise](https://github.com/Lukasz-pluszczewski/redux-better-promise) 92 | - [Redux Saga](https://redux-saga.js.org/) 93 | - [Redux Observable](https://redux-observable.js.org) 94 | 2. Helpers 95 | - [Rematch](https://rematch.gitbooks.io/rematch/) 96 | - [Reselect](https://github.com/reduxjs/reselect) 97 | 3. Persistencia de dados 98 | - [Redux Persist](https://github.com/rt2zz/redux-persist) 99 | - [Redux Phoenix](https://github.com/adam-golab/redux-phoenix) 100 | 4. [Redux Form](https://redux-form.com) 101 | 3. [MobX](https://mobx.js.org/) 102 | 7. Tipagem 103 | - [PropTypes](https://reactjs.org/docs/typechecking-with-proptypes.html) 104 | - [TypeScript](https://www.typescriptlang.org/) 105 | - [Flow](https://flow.org/en/) 106 | 8. Form Helpers 107 | - [Redux Form](https://redux-form.com) 108 | - [Formik](https://github.com/jaredpalmer/formik) 109 | - [Formsy](https://github.com/formsy/formsy-react) 110 | - [Final Form](https://github.com/final-form/final-form) 111 | 9. Rotas 112 | - [React-Router](https://reacttraining.com/react-router/) 113 | - [Router5](https://router5.js.org/) 114 | - [Redux-First Router](https://github.com/faceyspacey/redux-first-router) 115 | - [Reach Router](https://reach.tech/router/) 116 | 10. Clientes API 117 | 1. REST 118 | - [Fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) 119 | - [SuperAgent](https://visionmedia.github.io/superagent/) 120 | - [axios](https://github.com/axios/axios) 121 | 2. GraphQL 122 | - [Apollo](https://www.apollographql.com/docs/react/) 123 | - [Relay](https://facebook.github.io/relay/) 124 | - [urql](https://github.com/FormidableLabs/urql) 125 | 11. Bibliotecas uteis 126 | - [Lodash](https://lodash.com/) 127 | - [Moment](https://momentjs.com/) 128 | - [classnames](https://github.com/JedWatson/classnames) 129 | - [Numeral](http://numeraljs.com/) 130 | - [RxJS](http://reactivex.io/) 131 | - [ImmutableJS](https://facebook.github.io/immutable-js/) 132 | - [Ramda](https://ramdajs.com/) 133 | 12. Testes 134 | 1. Teste unitário 135 | - [Jest](https://facebook.github.io/jest/) 136 | - [Enzyme](http://airbnb.io/enzyme/) 137 | - [Sinon](http://sinonjs.org/) 138 | - [Mocha](https://mochajs.org/) 139 | - [Chai](http://www.chaijs.com/) 140 | - [AVA](https://github.com/avajs/ava) 141 | - [Tape](https://github.com/substack/tape) 142 | 2. Teste end-to-end 143 | - [Selenium](https://www.seleniumhq.org/), [Webdriver](http://webdriver.io/) 144 | - [Cypress](https://cypress.io/) 145 | - [Puppeteer](https://pptr.dev/) 146 | - [Cucumber.js](https://github.com/cucumber/cucumber-js) 147 | - [Nightwatch.js](http://nightwatchjs.org/) 148 | 3. Teste de integração 149 | - [Karma](https://karma-runner.github.io/) 150 | 13. Internacionalização 151 | - [React Intl](https://github.com/yahoo/react-intl) 152 | - [React i18next](https://react.i18next.com/) 153 | 14. Renderização no servidor 154 | - [Next.js](https://nextjs.org/) 155 | - [After.js](https://github.com/jaredpalmer/after.js) 156 | - [Rogue](https://github.com/alidcastano/rogue.js) 157 | 15. Gerador de site estático 158 | - [Gatsby](https://www.gatsbyjs.org/) 159 | 16. Integração com estrturas de backend 160 | - [React on Rails](https://shakacode.gitbooks.io/react-on-rails/content/) 161 | 17. Desenvolvimento de aplicativos móveis 162 | - [React Native](https://facebook.github.io/react-native/) 163 | - [Cordova](https://cordova.apache.org/)/[Phonegap](https://phonegap.com/) 164 | 18. Desenvolvimento de aplicativos desktop 165 | - [Proton Native](https://proton-native.js.org/) 166 | - [Electron](https://electronjs.org/) 167 | - [React Native Windows](https://github.com/Microsoft/react-native-windows) 168 | 19. Realidade virtual 169 | - [React 360](https://facebook.github.io/react-360/) 170 | 171 | ## Resumo 172 | 173 | Se você acha que o guia pode ser melhorado, envie um PR com quaisquer atualizações e envie suas dúvidas. Além disso, continuarei a melhorar este repositório, então, favorite esse repositório para sempre revisitar. 174 | 175 | ## Contribuição 176 | 177 | O guia foi criado com a ferramenta online [Draw.io](https://www.draw.io/). O arquivo do projeto pode ser encontrado no diretório `/src`. Para alterá-lo, abra o draw.io, clique em **Open Existing Diagram** e selecione o arquivo `xml`. Ele irá abrir o guia. Atualize o guia, faça update das imagens no readme (exporte como png) e crie um PR. 178 | 179 | - Abra pull request com melhorias 180 | - Discuta novas ideias nas issues 181 | - Compartilhe esse repositorio 182 | 183 | ## Licença 184 | 185 | [![License: CC BY-NC-SA 4.0](https://img.shields.io/badge/License-CC%20BY--NC--SA%204.0-lightgrey.svg)](https://creativecommons.org/licenses/by-nc-sa/4.0/) 186 | -------------------------------------------------------------------------------- /README-RU.md: -------------------------------------------------------------------------------- 1 | # План становления React-разработчиком 2 | 3 | [README in Chinese](README-CN.md) 4 | 5 | [README in English](README.md) 6 | 7 | [README in Japanese](README-JA.md) 8 | 9 | [README in Korean](README-KO.md) 10 | 11 | [README in Portuguese (Brazil)](README-PTBR.md) 12 | 13 | [README in Spanish](README-ES.md) 14 | 15 | > План, чтобы стать React-разработчиком в 2019 году: 16 | 17 | Ниже вы можете найти схему, показывающую пути, которые могут привести, а также библиотеки, которые вам нужно изучить, чтобы стать разработчиком React. Я сделал эту схему в качестве подсказки для всех, кто спрашивает меня: «Что мне стоит изучить ещё в качестве React-разработчика?» 18 | 19 | ## Предупреждение 20 | 21 | > Цель этого плана — дать вам общее представление о том, как стать React-разработчиком. Этот план поможет вам, если вы запутались, что изучать дальше, вместо того, чтобы поощрять вас выбирать что-то модное и популярное. Вам стоит постепенно понимать, почему один инструмент лучше подходит для определённых ситуаций, чем другой, и не забывать, что модный и популярный инструмент не всегда означает, что он лучше всего подходит для работы. 22 | 23 | ## План изучения 24 | 25 | ![План изучения](./roadmap-ru.png) 26 | 27 | ## Ресурсы 28 | 29 | 1. Основы 30 | 1. HTML 31 | * Изучить основы HTML 32 | * Сделать несколько страниц в качестве упражнения 33 | 2. CSS 34 | * Изучить основы CSS 35 | * Стилизовать страницы, созданные в предыдущем шаге 36 | * Создать страницу с использованием сеток и флексбокса 37 | 3. Основы JS 38 | * Познакомиться с синтаксисом 39 | * Изучить основные операции на DOM 40 | * Изучить механизмы, специфичные для JS (Поднятие, всплытие событий, прототипное наследование) 41 | * Выполнить некоторые AJAX-вызовы (XHR) 42 | * Изучить новые возможности (ECMAScript 6+) 43 | * Дополнительно познакомиться с библиотекой jQuery 44 | 2. Общие навыки для разработки 45 | 1. Изучить Git, создать несколько репозиториев на GitHub, поделиться своим кодом с другими 46 | 2. Узнать о протоколе HTTP(S), методами запроса (GET, POST, PUT, PATCH, DELETE, OPTIONS) 47 | 3. Не бояться использовать Google, посмотреть [курс по продвинутому использованию Google](http://www.powersearchingwithgoogle.com/) 48 | 4. Познакомиться с терминалом, настроить оболочку (bash, zsh, fish) 49 | 5. Прочитать несколько книг про алгоритмы и структуры данных 50 | 6. Прочитать несколько книг по паттернам проектирования 51 | 3. Изучить [официальный сайт React](https://reactjs.org/tutorial/tutorial.html), пройти [курсы](https://egghead.io/courses/the-beginner-s-guide-to-react) или прочитать [книги](https://github.com/EbookFoundation/free-programming-books/blob/master/free-programming-books-ru.md#react) 52 | 4. Познакомиться с инструментами, которые вы будете использовать 53 | 1. Менеджеры пакетов 54 | * [npm](https://www.npmjs.com/) 55 | * [yarn](https://yarnpkg.com/lang/en/) 56 | * [pnpm](https://pnpm.js.org/) 57 | 2. Выполнение задач 58 | * [npm-скрипты](https://docs.npmjs.com/misc/scripts) 59 | * [gulp](https://gulpjs.com/) 60 | * [Webpack](https://webpack.js.org/) 61 | * [Rollup](https://rollupjs.org/guide/en) 62 | * [Parcel](https://parceljs.org/) 63 | 5. Стилизация 64 | 1. CSS-препроцессоры 65 | * [Sass/CSS](https://sass-lang.com/) 66 | * [PostCSS](https://postcss.org/) 67 | * [Less](http://lesscss.org/) 68 | * [Stylus](http://stylus-lang.com/) 69 | 2. CSS-фреймворки 70 | * [Bootstrap](https://getbootstrap.com/) 71 | * [Materialize](https://materializecss.com/), [Material UI](https://material-ui.com/), [Material Design Lite](https://getmdl.io/) 72 | * [Bulma](https://bulma.io/) 73 | * [Semantic UI](https://semantic-ui.com/) 74 | 3. Архитектура CSS 75 | * [BEM](http://getbem.com/) 76 | * [CSS Modules](https://github.com/css-modules/css-modules) 77 | * [Atomic](https://acss.io/) 78 | * [OOCSS](https://github.com/stubbornella/oocss/wiki) 79 | * [SMACSS](https://smacss.com/) 80 | * [SUITCSS](https://suitcss.github.io/) 81 | 4. CSS в JS 82 | * [Styled Components](https://www.styled-components.com/) 83 | * [Radium](https://formidable.com/open-source/radium/) 84 | * [Emotion](https://emotion.sh/) 85 | * [JSS](http://cssinjs.org/) 86 | * [Aphrodite](https://github.com/Khan/aphrodite) 87 | 6. Управление состоянием 88 | 1. [Состояние компонента](https://reactjs.org/docs/faq-state.html)/[Context API](https://reactjs.org/docs/context.html) 89 | 2. [Redux](https://redux.js.org/) 90 | 1. Асинхронные действия (побочные эффекты) 91 | * [Redux Thunk](https://github.com/reduxjs/redux-thunk) 92 | * [Redux Better Promise](https://github.com/Lukasz-pluszczewski/redux-better-promise) 93 | * [Redux Saga](https://redux-saga.js.org/) 94 | * [Redux Observable](https://redux-observable.js.org) 95 | 2. Библиотеки-помощники 96 | * [Rematch](https://rematch.gitbooks.io/rematch/) 97 | * [Reselect](https://github.com/reduxjs/reselect) 98 | 3. Постоянное хранение данных 99 | * [Redux Persist](https://github.com/rt2zz/redux-persist) 100 | * [Redux Phoenix](https://github.com/adam-golab/redux-phoenix) 101 | 4. [Redux Form](https://redux-form.com) 102 | 3. [MobX](https://mobx.js.org/) 103 | 7. Проверка типов 104 | * [PropTypes](https://reactjs.org/docs/typechecking-with-proptypes.html) 105 | * [TypeScript](https://www.typescriptlang.org/) 106 | * [Flow](https://flow.org/en/) 107 | 8. Вспомогательные библиотеки для форм 108 | * [Redux Form](https://redux-form.com) 109 | * [Formik](https://github.com/jaredpalmer/formik) 110 | * [Formsy](https://github.com/formsy/formsy-react) 111 | * [Final Form](https://github.com/final-form/final-form) 112 | 9. Маршрутизация 113 | * [React-Router](https://reacttraining.com/react-router/) 114 | * [Router5](https://router5.js.org/) 115 | * [Redux-First Router](https://github.com/faceyspacey/redux-first-router) 116 | * [Reach Router](https://reach.tech/router/) 117 | 10. API-клиенты 118 | 1. REST 119 | * [Fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) 120 | * [SuperAgent](https://visionmedia.github.io/superagent/) 121 | * [axios](https://github.com/axios/axios) 122 | 2. GraphQL 123 | * [Apollo](https://www.apollographql.com/docs/react/) 124 | * [Relay](https://facebook.github.io/relay/) 125 | * [urql](https://github.com/FormidableLabs/urql) 126 | 11. Утилитарные библиотеки 127 | * [Lodash](https://lodash.com/) 128 | * [Moment](https://momentjs.com/) 129 | * [classnames](https://github.com/JedWatson/classnames) 130 | * [Numeral](http://numeraljs.com/) 131 | * [RxJS](http://reactivex.io/) 132 | * [ImmutableJS](https://facebook.github.io/immutable-js/) 133 | * [Ramda](https://ramdajs.com/) 134 | 12. Тестирование 135 | 1. Модульное тестирование 136 | * [Jest](https://facebook.github.io/jest/) 137 | * [Enzyme](http://airbnb.io/enzyme/) 138 | * [Sinon](http://sinonjs.org/) 139 | * [Mocha](https://mochajs.org/) 140 | * [Chai](http://www.chaijs.com/) 141 | * [AVA](https://github.com/avajs/ava) 142 | * [Tape](https://github.com/substack/tape) 143 | 2. Сквозное (end-to-end) тестирование 144 | * [Selenium](https://www.seleniumhq.org/), [Webdriver](http://webdriver.io/) 145 | * [Cypress](https://cypress.io/) 146 | * [Puppeteer](https://pptr.dev/) 147 | * [Cucumber.js](https://github.com/cucumber/cucumber-js) 148 | * [Nightwatch.js](http://nightwatchjs.org/) 149 | 3. Интеграционное тестирование 150 | * [Karma](https://karma-runner.github.io/) 151 | 13. Локализация 152 | * [React Intl](https://github.com/yahoo/react-intl) 153 | * [React i18next](https://react.i18next.com/) 154 | 14. Отрисовка на стороне сервера 155 | * [Next.js](https://nextjs.org/) 156 | * [After.js](https://github.com/jaredpalmer/after.js) 157 | * [Rogue](https://github.com/alidcastano/rogue.js) 158 | 15. Генератор статических сайтов 159 | * [Gatsby](https://www.gatsbyjs.org/) 160 | 16. Интеграция с бэкенд-фреймворками 161 | * [React on Rails](https://shakacode.gitbooks.io/react-on-rails/content/) 162 | 17. Разработка мобильных приложений 163 | * [React Native](https://facebook.github.io/react-native/) 164 | * [Cordova](https://cordova.apache.org/)/[Phonegap](https://phonegap.com/) 165 | 18. Разработка десктопных приложений 166 | * [Proton Native](https://proton-native.js.org/) 167 | * [Electron](https://electronjs.org/) 168 | * [React Native Windows](https://github.com/Microsoft/react-native-windows) 169 | 19. Виртуальная реальность 170 | * [React 360](https://facebook.github.io/react-360/) 171 | 172 | ## Резюме 173 | 174 | Если вы считаете, что план может быть улучшен, пожалуйста, создайте пулреквест с любыми обновлениями и отправляйте любые ишью, если есть вопросы и предложения. Кроме того, я продолжу улучшать его, так что, возможно, стоит отслеживать изменения, происходящие в этом репозитории, либо заглянуть в него спустя некоторое время. 175 | 176 | ## Участие в проекте 177 | 178 | План создан с помощью онлайн-инструмента [Draw.io](https://www.draw.io/). Файл проекта можно найти в каталоге `/src`. Чтобы изменить его, откройте draw.io, нажмите **Open Existing Diagram** и выберите файл `xml` с проектом. Он откроет схему, обновите её, загрузите и обновите изображения в readme и создайте PR (экспортируйте как png). 179 | 180 | - Открыть пулреквест с улучшениями 181 | - Обсуждайте новые идеи в ишью 182 | - Расскажите об этом другим 183 | 184 | ## Лицензия 185 | 186 | [![License: CC BY-NC-SA 4.0](https://img.shields.io/badge/License-CC%20BY--NC--SA%204.0-lightgrey.svg)](https://creativecommons.org/licenses/by-nc-sa/4.0/) 187 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React Developer Roadmap 2 | 3 | [README in Chinese](README-CN.md) 4 | 5 | [README in Japanese](README-JA.md) 6 | 7 | [README in Korean](README-KO.md) 8 | 9 | [README in Portuguese (Brazil)](README-PTBR.md) 10 | 11 | [README in Russian](README-RU.md) 12 | 13 | [README in Spanish](README-ES.md) 14 | 15 | > Roadmap to becoming a React developer in 2019: 16 | 17 | Below you can find a chart demonstrating the paths that you can take and the libraries that you would want to learn to become a React developer. I made this chart as a tip for everyone who asks me, "What should I learn next as a React developer?" 18 | 19 | ## Disclaimer 20 | > The purpose of this roadmap is to give you an idea about the landscape. The road map will guide you if you are confused about what to learn next, rather than encouraging you to pick what is hip and trendy. You should grow some understanding of why one tool would be better suited for some cases than the other and remember hip and trendy does not always mean best suited for the job 21 | 22 | ## Roadmap 23 | 24 | ![Roadmap](./roadmap.png) 25 | 26 | ## Resources 27 | 28 | 1. Basics 29 | 1. HTML 30 | * Learn the basics of HTML 31 | * Make a few pages as an exercise 32 | 2. CSS 33 | * Learn the basics of CSS 34 | * Style pages from previous step 35 | * Build a page with grid and flexbox 36 | 3. JS Basics 37 | * Get familiar with the syntax 38 | * Learn basic operations on DOM 39 | * Learn mechanisms typical for JS (Hoisting, Event Bubbling, Prototyping) 40 | * Make some AJAX (XHR) calls 41 | * Learn new features (ECMA Script 6+) 42 | * Additionally, get familiar with the jQuery library 43 | 2. General Development Skills 44 | 1. Learn GIT, create a few repositories on GitHub, share your code with other people 45 | 2. Know HTTP(S) protocol, request methods (GET, POST, PUT, PATCH, DELETE, OPTIONS) 46 | 3. Don't be afraid of using Google, [Power Searching with Google](http://www.powersearchingwithgoogle.com/) 47 | 4. Get familiar with terminal, configure your shell (bash, zsh, fish) 48 | 5. Read a few books about algorithms and data structures 49 | 6. Read a few books about design patterns 50 | 3. Learn React on [official website](https://reactjs.org/tutorial/tutorial.html) or complete some [courses](https://egghead.io/courses/the-beginner-s-guide-to-react) 51 | 4. Get familiar with tools that you will be using 52 | 1. Package Managers 53 | * [npm](https://www.npmjs.com/) 54 | * [yarn](https://yarnpkg.com/lang/en/) 55 | * [pnpm](https://pnpm.js.org/) 56 | 2. Task Runners 57 | * [npm scripts](https://docs.npmjs.com/misc/scripts) 58 | * [gulp](https://gulpjs.com/) 59 | * [Webpack](https://webpack.js.org/) 60 | * [Rollup](https://rollupjs.org/guide/en) 61 | * [Parcel](https://parceljs.org/) 62 | 5. Styling 63 | 1. CSS Preprocessor 64 | * [Sass/CSS](https://sass-lang.com/) 65 | * [PostCSS](https://postcss.org/) 66 | * [Less](http://lesscss.org/) 67 | * [Stylus](http://stylus-lang.com/) 68 | 2. CSS Frameworks 69 | * [Bootstrap](https://getbootstrap.com/) 70 | * [Materialize](https://materializecss.com/), [Material UI](https://material-ui.com/), [Material Design Lite](https://getmdl.io/) 71 | * [Bulma](https://bulma.io/) 72 | * [Semantic UI](https://semantic-ui.com/) 73 | 3. CSS Architecture 74 | * [BEM](http://getbem.com/) 75 | * [CSS Modules](https://github.com/css-modules/css-modules) 76 | * [Atomic](https://acss.io/) 77 | * [OOCSS](https://github.com/stubbornella/oocss/wiki) 78 | * [SMACSS](https://smacss.com/) 79 | * [SUITCSS](https://suitcss.github.io/) 80 | 4. CSS in JS 81 | * [Styled Components](https://www.styled-components.com/) 82 | * [Radium](https://formidable.com/open-source/radium/) 83 | * [Emotion](https://emotion.sh/) 84 | * [JSS](http://cssinjs.org/) 85 | * [Aphrodite](https://github.com/Khan/aphrodite) 86 | 6. State Management 87 | 1. [Component State](https://reactjs.org/docs/faq-state.html)/[Context API](https://reactjs.org/docs/context.html) 88 | 2. [Redux](https://redux.js.org/) 89 | 1. Async actions (Side Effects) 90 | * [Redux Thunk](https://github.com/reduxjs/redux-thunk) 91 | * [Redux Better Promise](https://github.com/Lukasz-pluszczewski/redux-better-promise) 92 | * [Redux Saga](https://redux-saga.js.org/) 93 | * [Redux Observable](https://redux-observable.js.org) 94 | 2. Helpers 95 | * [Rematch](https://rematch.gitbooks.io/rematch/) 96 | * [Reselect](https://github.com/reduxjs/reselect) 97 | 3. Data persistence 98 | * [Redux Persist](https://github.com/rt2zz/redux-persist) 99 | * [Redux Phoenix](https://github.com/adam-golab/redux-phoenix) 100 | 4. [Redux Form](https://redux-form.com) 101 | 3. [MobX](https://mobx.js.org/) 102 | 7. Type Checkers 103 | * [PropTypes](https://reactjs.org/docs/typechecking-with-proptypes.html) 104 | * [TypeScript](https://www.typescriptlang.org/) 105 | * [Flow](https://flow.org/en/) 106 | 8. Form Helpers 107 | * [Redux Form](https://redux-form.com) 108 | * [Formik](https://github.com/jaredpalmer/formik) 109 | * [Formsy](https://github.com/formsy/formsy-react) 110 | * [Final Form](https://github.com/final-form/final-form) 111 | 9. Routing 112 | * [React-Router](https://reacttraining.com/react-router/) 113 | * [Router5](https://router5.js.org/) 114 | * [Redux-First Router](https://github.com/faceyspacey/redux-first-router) 115 | * [Reach Router](https://reach.tech/router/) 116 | 10. API Clients 117 | 1. REST 118 | * [Fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) 119 | * [SuperAgent](https://visionmedia.github.io/superagent/) 120 | * [axios](https://github.com/axios/axios) 121 | 2. GraphQL 122 | * [Apollo](https://www.apollographql.com/docs/react/) 123 | * [Relay](https://facebook.github.io/relay/) 124 | * [urql](https://github.com/FormidableLabs/urql) 125 | 11. Utility Libraries 126 | * [Lodash](https://lodash.com/) 127 | * [Moment](https://momentjs.com/) 128 | * [classnames](https://github.com/JedWatson/classnames) 129 | * [Numeral](http://numeraljs.com/) 130 | * [RxJS](http://reactivex.io/) 131 | * [ImmutableJS](https://facebook.github.io/immutable-js/) 132 | * [Ramda](https://ramdajs.com/) 133 | 12. Testing 134 | 1. Unit Testing 135 | * [Jest](https://facebook.github.io/jest/) 136 | * [Enzyme](http://airbnb.io/enzyme/) 137 | * [Sinon](http://sinonjs.org/) 138 | * [Mocha](https://mochajs.org/) 139 | * [Chai](http://www.chaijs.com/) 140 | * [AVA](https://github.com/avajs/ava) 141 | * [Tape](https://github.com/substack/tape) 142 | 2. End to End Testing 143 | * [Selenium](https://www.seleniumhq.org/), [Webdriver](http://webdriver.io/) 144 | * [Cypress](https://cypress.io/) 145 | * [Puppeteer](https://pptr.dev/) 146 | * [Cucumber.js](https://github.com/cucumber/cucumber-js) 147 | * [Nightwatch.js](http://nightwatchjs.org/) 148 | 3. Integration Testing 149 | * [Karma](https://karma-runner.github.io/) 150 | 13. Internationalization 151 | * [React Intl](https://github.com/yahoo/react-intl) 152 | * [React i18next](https://react.i18next.com/) 153 | 14. Server Side Rendering 154 | * [Next.js](https://nextjs.org/) 155 | * [After.js](https://github.com/jaredpalmer/after.js) 156 | * [Rogue](https://github.com/alidcastano/rogue.js) 157 | 15. Static Site Generator 158 | * [Gatsby](https://www.gatsbyjs.org/) 159 | 16. Backend Framework Integration 160 | * [React on Rails](https://shakacode.gitbooks.io/react-on-rails/content/) 161 | 17. Mobile 162 | * [React Native](https://facebook.github.io/react-native/) 163 | * [Cordova](https://cordova.apache.org/)/[Phonegap](https://phonegap.com/) 164 | 18. Desktop 165 | * [Proton Native](https://proton-native.js.org/) 166 | * [Electron](https://electronjs.org/) 167 | * [React Native Windows](https://github.com/Microsoft/react-native-windows) 168 | 19. Virtual Reality 169 | * [React 360](https://facebook.github.io/react-360/) 170 | 171 | ## Wrap Up 172 | 173 | If you think the roadmap can be improved, please do open a PR with any updates and submit any issues. Also, I will continue to improve this, so you might want to star this repository to revisit. 174 | 175 | ## Contribution 176 | 177 | The roadmap is built using [Draw.io](https://www.draw.io/). Project file can be found at `/src` directory. To modify it, open draw.io, click **Open Existing Diagram** and choose `xml` file with project. It will open the roadmap for you. Update it, upload and update the images in readme and create a PR (export as png). 178 | 179 | - Open a pull request with improvements 180 | - Discuss ideas in issues 181 | - Spread the word 182 | 183 | ## License 184 | 185 | [![License: CC BY-NC-SA 4.0](https://img.shields.io/badge/License-CC%20BY--NC--SA%204.0-lightgrey.svg)](https://creativecommons.org/licenses/by-nc-sa/4.0/) 186 | -------------------------------------------------------------------------------- /roadmap-cn.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adam-golab/react-developer-roadmap/6f5f7cf24711637e2ad3f9d6b001cfa19e9e7e92/roadmap-cn.png -------------------------------------------------------------------------------- /roadmap-es.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adam-golab/react-developer-roadmap/6f5f7cf24711637e2ad3f9d6b001cfa19e9e7e92/roadmap-es.png -------------------------------------------------------------------------------- /roadmap-ja.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adam-golab/react-developer-roadmap/6f5f7cf24711637e2ad3f9d6b001cfa19e9e7e92/roadmap-ja.png -------------------------------------------------------------------------------- /roadmap-ko.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adam-golab/react-developer-roadmap/6f5f7cf24711637e2ad3f9d6b001cfa19e9e7e92/roadmap-ko.png -------------------------------------------------------------------------------- /roadmap-ptbr.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adam-golab/react-developer-roadmap/6f5f7cf24711637e2ad3f9d6b001cfa19e9e7e92/roadmap-ptbr.png -------------------------------------------------------------------------------- /roadmap-ru.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adam-golab/react-developer-roadmap/6f5f7cf24711637e2ad3f9d6b001cfa19e9e7e92/roadmap-ru.png -------------------------------------------------------------------------------- /roadmap.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adam-golab/react-developer-roadmap/6f5f7cf24711637e2ad3f9d6b001cfa19e9e7e92/roadmap.png -------------------------------------------------------------------------------- /src/react-developer-roadmap-ko.xml: -------------------------------------------------------------------------------- 1 | 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 -------------------------------------------------------------------------------- /translations/cn.json: -------------------------------------------------------------------------------- 1 | { 2 | "React Developer in 2019": "2019 React 开发者", 3 | "Legends": "图例", 4 | "Personal must know": "必须掌握", 5 | "Good to know": "最好掌握", 6 | "Possibilities": "可以掌握", 7 | "Learn the Basics": "学习基础知识", 8 | "Learn the basics of HTML": "学习 HTML 的基础知识", 9 | "Semantic HTML": "HTML 语法", 10 | "Dividing page into sections and structuring the DOM properly": "将页面划分为多个部分并正确构建 DOM", 11 | "Learn the basics of CSS": "学习 CSS 的基础知识", 12 | "Grid and Flexbox": "Grid 布局和 Flexbox 布局", 13 | "Responsive Web Design and Media Queries": "响应式 Web 设计和媒体查询", 14 | "Syntax and basic operations": "语法和基本的操作", 15 | "DOM manipulation": "DOM 操作", 16 | "Hoisting, Event Bubbling, Prototyping": "变量提升，事件冒泡，原型", 17 | "ECMA Script 6+, learn new features": "ECMA Script 6+, 学习新的特性", 18 | "JS Basics": "JS 基础", 19 | "jQuery (Optional)": "jQuery (可选)", 20 | "General Development Skills": "常用开发技能", 21 | "GIT - Version Control (GitHub, Bitbucket, GitLab)": "GIT - 版本控制 (GitHub, Bitbucket, GitLab)", 22 | "HTTP/HTTPS protocol": "HTTP/HTTPS 协议", 23 | "Learn to search for solutions": "学会寻找解决方案", 24 | "Terminal usage": "终端的使用", 25 | "Data Structures and Algorithms": "数据结构和算法", 26 | "Design patterns": "设计模式", 27 | "Build Tools": "构建工具", 28 | "Package Managers": "包管理器", 29 | "Task Runners": "任务运行器", 30 | "npm scripts": "npm 脚本", 31 | "Styling": "样式", 32 | "CSS Preprocessors": "CSS 预处理器", 33 | "CSS Frameworks": "CSS 框架", 34 | "CSS Architecture": "CSS 架构", 35 | "State Management": "状态管理", 36 | "Component State / Context": "组件状态 / 上下文", 37 | "Async actions": "异步操作", 38 | "Form Helpers": "表单助手", 39 | "Helpers": "助手", 40 | "API Clients": "API 客户端", 41 | "fetch (native)": "fetch (原生)", 42 | "Utility Libraries": "实用工具库", 43 | "i18n": "国际化(i18n)", 44 | "Server Side Rendering": "服务器端渲染(SSR)", 45 | "Backend Framework Integration": "后端集成框架", 46 | "Desktop": "桌面端", 47 | "Type Checkers": "类型检查器", 48 | "Routing": "路由", 49 | "Testing": "测试", 50 | "Unit Testing": "单元(Unit)测试", 51 | "Integration Testing": "集成测试", 52 | "E2E Testing": "端到端(E2E)测试", 53 | "Static Site Generator": "静态网站生成器", 54 | "Mobile": "移动端", 55 | "Virtual Reality": "虚拟现实(VR)", 56 | "Keep Learning :)": "坚持学习 :)" 57 | } 58 | -------------------------------------------------------------------------------- /translations/es.json: -------------------------------------------------------------------------------- 1 | { 2 | "React Developer in 2019": "Desarrollador React en 2019", 3 | "Legends": "Legendas", 4 | "Personal must know": "Debe saber", 5 | "Good to know": "Bueno saber", 6 | "Possibilities": "Opcional", 7 | "Learn the Basics": "Aprende lo básico", 8 | "Learn the basics of HTML": "Aprende lo básico de HTML", 9 | "Semantic HTML": "Semántica HTML", 10 | "Dividing page into sections and structuring the DOM properly": "Dividir la página en secciones y estructurar el DOM correctamente", 11 | "Learn the basics of CSS": "Aprende lo básico de CSS", 12 | "Grid and Flexbox": "Grids y Flexbox", 13 | "Responsive Web Design and Media Queries": "Diseño resposivo y Media Queries", 14 | "Syntax and basic operations": "Sintaxis y operaciones básicas", 15 | "DOM manipulation": "Manipulación del DOM", 16 | "Hoisting, Event Bubbling, Prototyping": "Hoisting, Event Bubbling, Prototyping", 17 | "ECMA Script 6+, learn new features": "Aprende las nuevas característica de ES6+", 18 | "JS Basics": "Javascript básico", 19 | "jQuery (Optional)": "jQuery (opcional)", 20 | "General Development Skills": "Habilidades generales de desarrollo", 21 | "GIT - Version Control (GitHub, Bitbucket, GitLab)": "GIT - Control de versiones (GitHub, Bitbucket, GitLab)", 22 | "HTTP/HTTPS protocol": "Protocolo HTTP/HTTPS", 23 | "Learn to search for solutions": "Aprende a buscar soluciones", 24 | "Terminal usage": "Uso del terminal", 25 | "Data Structures and Algorithms": "Estructura de datos y Algoritmos", 26 | "Design patterns": "Patrones de diseño", 27 | "Build Tools": "Herramientas de construcción", 28 | "Package Managers": "Gestores de paquetes", 29 | "Task Runners": "Corredores de tareas", 30 | "npm scripts": "npm scripts", 31 | "Styling": "Estilo", 32 | "CSS Preprocessors": "Preprocesadores CSS", 33 | "CSS Frameworks": "Frameworks CSS", 34 | "CSS Architecture": "Arquitectura CSS", 35 | "State Management": "Manejo del Estado", 36 | "Component State / Context": "Estado del componente / Contexto", 37 | "Async actions": "Acciones asincrónicas", 38 | "Form Helpers": "Helpers de formulario", 39 | "Helpers": "Helpers", 40 | "API Clients": "API Clients", 41 | "fetch (native)": "fetch (nativo)", 42 | "Utility Libraries": "Bibliotecas útiles", 43 | "i18n": "i18n", 44 | "Server Side Rendering": "Renderizar del lado del servidor", 45 | "Backend Framework Integration": "Framework de integración con el back-end", 46 | "Desktop": "Escritorio", 47 | "Type Checkers": "Type Checkers", 48 | "Routing": "Enrutamiento", 49 | "Testing": "Pruebas", 50 | "Unit Testing": "Pruebas unitarias", 51 | "Integration Testing": "Pruebas de integración", 52 | "E2E Testing": "Pruebas end-to-end", 53 | "Static Site Generator": "Generador de sitio estático", 54 | "Mobile": "Móvil", 55 | "Virtual Reality": "Realidad virtual", 56 | "Keep Learning :)": "Continua aprendendo :)" 57 | } -------------------------------------------------------------------------------- /translations/ja.json: -------------------------------------------------------------------------------- 1 | { 2 | "React Developer in 2019": "2019 React 開発者", 3 | "Legends": "凡例", 4 | "Personal must know": "必須", 5 | "Good to know": "知るべき", 6 | "Possibilities": "可能であれば", 7 | "Learn the Basics": "基礎知識", 8 | "Learn the basics of HTML": "HTMLの基礎知識", 9 | "Semantic HTML": "Semantic HTML", 10 | "Dividing page into sections and structuring the DOM properly": "ページコンテンツを適切なDOM要素で構成", 11 | "Learn the basics of CSS": "CSSの基礎知識", 12 | "Grid and Flexbox": "GridとFlexbox", 13 | "Responsive Web Design and Media Queries": "レスポンシブWebデザインとメディアクエリ", 14 | "Syntax and basic operations": "基礎的な文法", 15 | "DOM manipulation": "DOM操作", 16 | "Hoisting, Event Bubbling, Prototyping": "巻き上げ(Hoisting), イベントバブリング, Prototype", 17 | "ECMA Script 6+, learn new features": "ECMA Script 6以降の新機能", 18 | "JS Basics": "JS基礎", 19 | "jQuery (Optional)": "jQuery (任意)", 20 | "General Development Skills": "一般開発技能", 21 | "GIT - Version Control (GitHub, Bitbucket, GitLab)": "GIT - バージョン管理 (GitHub, Bitbucket, GitLab)", 22 | "HTTP/HTTPS protocol": "HTTP/HTTPS プロトコル", 23 | "Learn to search for solutions": "問題解决能力", 24 | "Terminal usage": "ターミナルの使い方", 25 | "Data Structures and Algorithms": "データ構造とアルゴリズム", 26 | "Design patterns": "デザインパターン", 27 | "Build Tools": "ビルドツール", 28 | "Package Managers": "パッケージマネージャ", 29 | "Task Runners": "タスクランナー", 30 | "CSS Preprocessors": "CSS プリプロセッサ", 31 | "CSS Frameworks": "CSS フレームワーク", 32 | "CSS Architecture": "CSS アーキテクチャ", 33 | "State Management": "State管理", 34 | "Async actions": "非同期処理", 35 | "Form Helpers": "フォームヘルパー", 36 | "Helpers": "ヘルパー", 37 | "API Clients": "APIクライアント", 38 | "fetch (native)": "fetch (native)", 39 | "Utility Libraries": "Utility Libraries", 40 | "i18n": "国際化(i18n)", 41 | "Server Side Rendering": "サーバサイドレンダリング", 42 | "Desktop": "Desktop", 43 | "Type Checkers": "型チェッカー", 44 | "Testing": "テスト", 45 | "Unit Testing": "Unitテスト", 46 | "Integration Testing": "結合テスト", 47 | "E2E Testing": "E2Eテスト", 48 | "Static Site Generator": "静的サイトジェネレータ", 49 | "Mobile": "モバイル", 50 | "Virtual Reality": "仮想現実(VR)", 51 | "Keep Learning :)": "継続学習 ＼(^o^)／" 52 | } 53 | -------------------------------------------------------------------------------- /translations/ko.json: -------------------------------------------------------------------------------- 1 | { 2 | "React Developer in 2019": "2019년 React 개발자", 3 | "Legends": "중요도", 4 | "Personal must know": "(주관적이지만) 꼭 배우세요", 5 | "Good to know": "배우면 좋습니다", 6 | "Possibilities": "배워야 할수도", 7 | "Learn the Basics": "기본기 다지기", 8 | "Learn the basics of HTML": "HTML 기분 문법 및 사용법", 9 | "Semantic HTML": "시멘틱(Semantic) HTML", 10 | "Dividing page into sections and structuring the DOM properly": "페이지를 나누고 DOM을 올바르게 설계하기", 11 | "Learn the basics of CSS": "CSS 기본 문법 및 사용법", 12 | "Grid and Flexbox": "Grid와 Flexbox를 활용한 레이아웃", 13 | "Responsive Web Design and Media Queries": "반응형 웹 디자인과 미디어 쿼리 사용법", 14 | "Syntax and basic operations": "기본적인 문법과 코드 작성법", 15 | "DOM manipulation": "DOM 조작", 16 | "Hoisting, Event Bubbling, Prototyping": "호이스팅(Hoisting), 이벤트 버블링, 프로토타입", 17 | "ECMA Script 6+, learn new features": "ECMA Script 6+, 새로 추가된 기능 배우기", 18 | "JS Basics": "JS 기본기", 19 | "jQuery (Optional)": "jQuery(선택)", 20 | "General Development Skills": "기본적인 개발 스킬", 21 | "GIT - Version Control (GitHub, Bitbucket, GitLab)": "GIT - 버전관리(Github, Bitbucket, Gitlab)", 22 | "HTTP/HTTPS protocol": "HTTP/HTTPS 프로토콜", 23 | "Learn to search for solutions": "문제해결을 위한 검색", 24 | "Terminal usage": "터미널 사용법", 25 | "Data Structures and Algorithms": "자료구조 / 알고리즘", 26 | "Design patterns": "디자인 패턴", 27 | "Build Tools": "빌드 도구", 28 | "Package Managers": "패키지 관리", 29 | "Task Runners": "태스크 러너", 30 | "npm scripts": "npm scripts", 31 | "Styling": "스타일링", 32 | "CSS Preprocessors": "CSS 전처리기", 33 | "CSS Frameworks": "CSS 프레임워크", 34 | "CSS Architecture": "CSS 설계", 35 | "CSS in JS": "CSS in JS", 36 | "State Management": "상태관리", 37 | "Component State / Context": "컴포넌트 상태관리 / Context", 38 | "Async actions": "비동기 액션", 39 | "Form Helpers": "폼(Form) 헬퍼", 40 | "Helpers": "헬퍼 라이브러리", 41 | "API Clients": "API 클라이언트", 42 | "fetch (native)": "fetch(내장)", 43 | "Utility Libraries": "유틸리티 라이브러리", 44 | "i18n": "국제화(i18n)", 45 | "Server Side Rendering": "서버 사이드 렌더링", 46 | "Backend Framework Integration": "백엔드 프레임워크 통합", 47 | "Desktop": "데스크탑", 48 | "Type Checkers": "정적 타입 체킹", 49 | "Routing": "라우팅", 50 | "Testing": "테스팅", 51 | "Unit Testing": "유닛 테스팅", 52 | "Integration Testing": "통합 테스팅", 53 | "E2E Testing": "E2E 테스팅", 54 | "Static Site Generator": "정적 사이트 생성기", 55 | "Mobile": "모바일", 56 | "Virtual Reality": "가상현실(VR)", 57 | "Keep Learning :)": "계속 배우세요 :)" 58 | } 59 | -------------------------------------------------------------------------------- /translations/pt-br.json: -------------------------------------------------------------------------------- 1 | { 2 | "React Developer in 2019": "Desenvolvedor React em 2019", 3 | "Legends": "Legendas", 4 | "Personal must know": "Deve saber", 5 | "Good to know": "Bom saber", 6 | "Possibilities": "Opcional", 7 | "Learn the Basics": "Aprenda o básico", 8 | "Learn the basics of HTML": "Aprenda o básico de HTML", 9 | "Semantic HTML": "Semântica HTML", 10 | "Dividing page into sections and structuring the DOM properly": "Divida a página em sections e estruture o DOM adequadamente", 11 | "Learn the basics of CSS": "Aprenda o básico de CSS", 12 | "Grid and Flexbox": "Grids e Flexbox", 13 | "Responsive Web Design and Media Queries": "Design resposivo e Media Queries", 14 | "Syntax and basic operations": "Sintaxe e operações básicas", 15 | "DOM manipulation": "Manipulação do DOM", 16 | "Hoisting, Event Bubbling, Prototyping": "Hoisting, Event Bubbling, Prototyping", 17 | "ECMA Script 6+, learn new features": "Aprenda as novas features do ES6+", 18 | "JS Basics": "Javascript básico", 19 | "jQuery (Optional)": "jQuery (opcional)", 20 | "General Development Skills": "Conhecimentos de desenvolvimento em geral", 21 | "GIT - Version Control (GitHub, Bitbucket, GitLab)": "GIT - Controle de versionamento (GitHub, Bitbucket, GitLab)", 22 | "HTTP/HTTPS protocol": "Protocolo HTTP/HTTPS", 23 | "Learn to search for solutions": "Aprenda procurar por soluções", 24 | "Terminal usage": "Utilização de terminal", 25 | "Data Structures and Algorithms": "Estrutura de dados e Algoritmos", 26 | "Design patterns": "Design Patterns", 27 | "Build Tools": "Ferramentas de build", 28 | "Package Managers": "Gerenciadores de pacote", 29 | "Task Runners": "Executadores de tarefas", 30 | "npm scripts": "npm scripts", 31 | "Styling": "Estilização", 32 | "CSS Preprocessors": "Pré-processadores CSS", 33 | "CSS Frameworks": "Frameworks CSS", 34 | "CSS Architecture": "Arquitetura CSS", 35 | "State Management": "Gerenciamento de estado", 36 | "Component State / Context": "Component State / Context", 37 | "Async actions": "Async actions", 38 | "Form Helpers": "Form Helpers", 39 | "Helpers": "Helpers", 40 | "API Clients": "API Clients", 41 | "fetch (native)": "fetch (nativo)", 42 | "Utility Libraries": "Bibliotecas úteis", 43 | "i18n": "i18n", 44 | "Server Side Rendering": "Renderização no servidor", 45 | "Backend Framework Integration": "Framework de integração com back-end", 46 | "Desktop": "Desktop", 47 | "Type Checkers": "Tipagem", 48 | "Routing": "Rotas", 49 | "Testing": "Testes", 50 | "Unit Testing": "Teste unitário", 51 | "Integration Testing": "Teste de integração", 52 | "E2E Testing": "Teste end-to-end", 53 | "Static Site Generator": "Gerador de site estático", 54 | "Mobile": "Mobile", 55 | "Virtual Reality": "Realidade virtual", 56 | "Keep Learning :)": "Continue aprendendo :)" 57 | } -------------------------------------------------------------------------------- /translations/ru.json: -------------------------------------------------------------------------------- 1 | { 2 | "React Developer in 2019": "React-разработчик в 2019 году", 3 | "Legends": "Обозначения", 4 | "Personal must know": "Обязательно для изучения", 5 | "Good to know": "Полезно знать", 6 | "Possibilities": "Вариант на будущее", 7 | "Learn the Basics": "Изучение основ", 8 | "Learn the basics of HTML": "Изучить основы HTML", 9 | "Semantic HTML": "Семантический HTML", 10 | "Dividing page into sections and structuring the DOM properly": "Разделение страницы на разделы и правильное структурирование DOM", 11 | "Learn the basics of CSS": "Изучить основы CSS", 12 | "Grid and Flexbox": "Гриды и флексбоксы", 13 | "Responsive Web Design and Media Queries": "Адаптивный веб-дизайн и медиавыражения", 14 | "Syntax and basic operations": "Синтаксис и основные операции", 15 | "DOM manipulation": "Манипуляция с DOM", 16 | "Hoisting, Event Bubbling, Prototyping": "Поднятие, всплытие событий, прототипы", 17 | "ECMA Script 6+, learn new features": "ECMAScript 6+, изучить новые возможности", 18 | "JS Basics": "Основы JS", 19 | "jQuery (Optional)": "jQuery (необязательно)", 20 | "General Development Skills": "Общие навыки для разработки", 21 | "GIT - Version Control (GitHub, Bitbucket, GitLab)": "Git — система управление версиями (GitHub, Bitbucket, GitLab)", 22 | "HTTP/HTTPS protocol": "Протокол HTTP/HTTPS", 23 | "Learn to search for solutions": "Научиться искать решения", 24 | "Terminal usage": "Использование терминала", 25 | "Data Structures and Algorithms": "Структуры данных и алгоритмы", 26 | "Design patterns": "Паттерны проектирования", 27 | "Build Tools": "Инструменты сборки", 28 | "Package Managers": "Менеджеры пакетов", 29 | "Task Runners": "Выполнение задач", 30 | "npm scripts": "npm-скрипты", 31 | "Styling": "Стилизация", 32 | "CSS Preprocessors": "CSS-препроцессоры", 33 | "CSS Frameworks": "CSS-фреймворки", 34 | "CSS Architecture": "Архитектура CSS", 35 | "CSS in JS": "CSS в JS", 36 | "State Management": "Управление состоянием", 37 | "Component State / Context": "Состояние компонента / Контекст", 38 | "Async actions": "Асинхронные действия", 39 | "Form Helpers": "Вспомогательные библиотеки для форм", 40 | "Helpers": "Библиотеки-помощники", 41 | "API Clients": "API-клиенты", 42 | "fetch (native)": "fetch (нативный)", 43 | "Utility Libraries": "Утилитарные библиотеки", 44 | "i18n": "Локализация", 45 | "Server Side Rendering": "Отрисовка на стороне сервера", 46 | "Backend Framework Integration": "Интеграция с бэкенд-фреймворками", 47 | "Desktop": "Разработка десктопных приложений", 48 | "Type Checkers": "Проверка типов", 49 | "Routing": "Маршрутизация", 50 | "Testing": "Тестирование", 51 | "Unit Testing": "Модульное тестирование", 52 | "Integration Testing": "Интеграционное тестирование", 53 | "E2E Testing": "Сквозное (end-to-end) тестирование", 54 | "Static Site Generator": "Генератор статических сайтов", 55 | "Mobile": "Разработка мобильных приложений", 56 | "Virtual Reality": "Виртуальная реальность", 57 | "Keep Learning :)": "Продолжать учиться :)" 58 | } 59 | -------------------------------------------------------------------------------- /translations/translate.js: -------------------------------------------------------------------------------- 1 | const { readFile, writeFile, existsSync } = require('fs'); 2 | const { join } = require('path'); 3 | 4 | if (!process.argv[2]) { 5 | console.error('Please provide language for translation') 6 | console.log('Usage: node ./translate.js lang') 7 | console.log('Example: node ./translate.js cn'); 8 | process.exit(1); 9 | } 10 | 11 | const lang = process.argv[2].toLowerCase(); 12 | 13 | if (!existsSync(join(__dirname, `./${lang}.json`))) { 14 | console.error('Make sure that file with translation exists') 15 | process.exit(1); 16 | } 17 | 18 | function escapeRegExp(str) { 19 | return str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&"); 20 | } 21 | 22 | readFile(join(__dirname, '../src/react-developer-roadmap.xml'), 'utf-8', (error, xmlData) => { 23 | if (!error) { 24 | readFile(join(__dirname, `./${lang}.json`), 'utf-8', (error, translationsFile) => { 25 | if (!error) { 26 | const translations = JSON.parse(translationsFile); 27 | 28 | let translatedXML = xmlData; 29 | Object.keys(translations).forEach(key => 30 | translatedXML = translatedXML.replace( 31 | new RegExp(escapeRegExp(`value=\"${key}\"`), 'g'), 32 | `value="${translations[key]}"` 33 | ) 34 | ); 35 | writeFile(join(__dirname, `../src/react-developer-roadmap-${lang}.xml`), translatedXML, 'utf-8', error => { 36 | if (!error) { 37 | console.log(`Translated to ${lang}`); 38 | } 39 | }); 40 | } 41 | }); 42 | } 43 | }); 44 | --------------------------------------------------------------------------------