Showing preview only (892K chars total). Download the full file or copy to clipboard to get everything.
Repository: adam-golab/react-developer-roadmap
Branch: master
Commit: 6f5f7cf24711
Files: 24
Total size: 867.0 KB
Directory structure:
gitextract_2uiqh3vv/
├── .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
├── 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
================================================
FILE CONTENTS
================================================
================================================
FILE: .gitignore
================================================
.DS_Store
._*
Thumbs.db
*.sublime-project
*.sublime-workspace
.idea
================================================
FILE: LICENSE
================================================
## creative commons
# Attribution-NonCommercial-ShareAlike 4.0 International
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.
### Using Creative Commons Public Licenses
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.
* __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).
* __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).
## Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International Public License
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.
### Section 1 – Definitions.
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.
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.
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.
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.
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.
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.
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.
h. __Licensed Material__ means the artistic or literary work, database, or other material to which the Licensor applied this Public License.
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.
h. __Licensor__ means the individual(s) or entity(ies) granting rights under this Public License.
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.
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.
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.
l. __You__ means the individual or entity exercising the Licensed Rights under this Public License. Your has a corresponding meaning.
### Section 2 – Scope.
a. ___License grant.___
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:
A. reproduce and Share the Licensed Material, in whole or in part, for NonCommercial purposes only; and
B. produce, reproduce, and Share Adapted Material for NonCommercial purposes only.
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.
3. __Term.__ The term of this Public License is specified in Section 6(a).
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.
5. __Downstream recipients.__
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.
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.
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.
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).
b. ___Other rights.___
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.
2. Patent and trademark rights are not licensed under this Public License.
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.
### Section 3 – License Conditions.
Your exercise of the Licensed Rights is expressly made subject to the following conditions.
a. ___Attribution.___
1. If You Share the Licensed Material (including in modified form), You must:
A. retain the following if it is supplied by the Licensor with the Licensed Material:
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);
ii. a copyright notice;
iii. a notice that refers to this Public License;
iv. a notice that refers to the disclaimer of warranties;
v. a URI or hyperlink to the Licensed Material to the extent reasonably practicable;
B. indicate if You modified the Licensed Material and retain an indication of any previous modifications; and
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.
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.
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.
b. ___ShareAlike.___
In addition to the conditions in Section 3(a), if You Share Adapted Material You produce, the following conditions also apply.
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.
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.
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.
### Section 4 – Sui Generis Database Rights.
Where the Licensed Rights include Sui Generis Database Rights that apply to Your use of the Licensed Material:
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;
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
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.
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.
### Section 5 – Disclaimer of Warranties and Limitation of Liability.
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.__
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.__
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.
### Section 6 – Term and Termination.
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.
b. Where Your right to use the Licensed Material has terminated under Section 6(a), it reinstates:
1. automatically as of the date the violation is cured, provided it is cured within 30 days of Your discovery of the violation; or
2. upon express reinstatement by the Licensor.
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.
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.
d. Sections 1, 5, 6, 7, and 8 survive termination of this Public License.
### Section 7 – Other Terms and Conditions.
a. The Licensor shall not be bound by any additional or different terms or conditions communicated by You unless expressly agreed.
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.
### Section 8 – Interpretation.
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.
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.
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.
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.
> 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.
>
> Creative Commons may be contacted at creativecommons.org
================================================
FILE: PULL_REQUEST_TEMPLATE.md
================================================
**What this PR does?**
**Why are you adding given library? (Short description why do you think that this library is important)**
**Screenshots (the part that you modified is enough)**
Before:
After changes:
================================================
FILE: README-CN.md
================================================
# React 开发者指南
[README in English](README.md)
[README in Japanese](README-JA.md)
[README in Korean](README-KO.md)
[README in Portuguese (Brazil)](README-PTBR.md)
[README in Russian](README-RU.md)
[README in Spanish](README-ES.md)
> 该指南将助你在 2019 成为一名 React 开发者
你可以在下面找到一张图，该图展示了你可以选取的路径及你想学习的库，从而成为一名 React 开发者。“作为 React 开发者，我接下来应该学习什么？”，我把这张图作为建议给每个问过我这一问题的人。
## 免责声明
> 该指南的目的是为了给你心有个大概的轮廓。如果你对接下来要学习的内容感到困惑，指南将指导你而不是鼓励你选择时髦和新颖的东西。
> 你应该逐渐理解为什么一种工具比另一种工具更适合某些情况，并且记住时髦和新颖的东西并不总是意味着最适合这个工作。
## Roadmap
## 资源
1. 基础
1. HTML
- 学习 HTML 基础知识
- 做几个页面来练习
2. CSS
- 学习 CSS 基础知识
- 完成上一步的样式页面
- 使用 grid 布局和 flexbox 布局构建页面
3. JS 基础
- 熟悉语法
- 学习 DOM 的基本操作
- 学习 JS 的典型机制（状态提升，事件冒泡，原型）
- 实现一些 AJAX（XHR）调用
- 学习新特性 (ECMA Script 6+)
- 另外，熟悉 jQuery 库
2. 常用开发技能
1. 学习 GIT 的使用, 在 GitHub 上创建一些仓库, 并和其他人分享你的代码
2. 掌握 HTTP(S) 协议, 及其请求方法 (GET, POST, PUT, PATCH, DELETE, OPTIONS)
3. 不要害怕使用 Google, [使用 Google 进行强力搜索](http://www.powersearchingwithgoogle.com/)
4. 熟悉终端，并配置你的 shell (bash, zsh, fish)
5. 阅读一些关于算法和数据结构的书籍
6. 阅读一些关于设计模式的书籍
3. 在[官网](https://reactjs.org/tutorial/tutorial.html)上学习 React 或者完成一些[课程](https://egghead.io/courses/the-beginner-s-guide-to-react)
4. 熟悉你将用到的工具
1. 包管理器
- [npm](https://www.npmjs.com/)
- [yarn](https://yarnpkg.com/lang/en/)
- [pnpm](https://pnpm.js.org/)
2. 任务运行器
- [npm 脚本](https://docs.npmjs.com/misc/scripts)
- [gulp](https://gulpjs.com/)
- [Webpack](https://webpack.js.org/)
- [Rollup](https://rollupjs.org/guide/en)
- [Parcel](https://parceljs.org/)
5. 样式
1. CSS 预处理器
- [Sass/CSS](https://sass-lang.com/)
- [PostCSS](https://postcss.org/)
- [Less](http://lesscss.org/)
- [Stylus](http://stylus-lang.com/)
2. CSS 框架
- [Bootstrap](https://getbootstrap.com/)
- [Materialize](https://materializecss.com/), [Material UI](https://material-ui.com/), [Material Design Lite](https://getmdl.io/)
- [Bulma](https://bulma.io/)
- [Semantic UI](https://semantic-ui.com/)
3. CSS 架构
- [BEM](http://getbem.com/)
- [CSS Modules](https://github.com/css-modules/css-modules)
- [Atomic](https://acss.io/)
- [OOCSS](https://github.com/stubbornella/oocss/wiki)
- [SMACSS](https://smacss.com/)
- [SUITCSS](https://suitcss.github.io/)
4. JS 编写 CSS
- [Styled Components](https://www.styled-components.com/)
- [Radium](https://formidable.com/open-source/radium/)
- [Emotion](https://emotion.sh/)
- [JSS](http://cssinjs.org/)
- [Aphrodite](https://github.com/Khan/aphrodite)
6. 状态管理
1. [组件状态](https://reactjs.org/docs/faq-state.html)/[上下文 API](https://reactjs.org/docs/context.html)
2. [Redux](https://redux.js.org/)
1. 异步操作 (Side Effects)
- [Redux Thunk](https://github.com/reduxjs/redux-thunk)
- [Redux Better Promise](https://github.com/Lukasz-pluszczewski/redux-better-promise)
- [Redux Saga](https://redux-saga.js.org/)
- [Redux Observable](https://redux-observable.js.org)
2. 助手
* [Rematch](https://rematch.gitbooks.io/rematch/)
* [Reselect](https://github.com/reduxjs/reselect)
3. 数据持久化
- [Redux Persist](https://github.com/rt2zz/redux-persist)
- [Redux Phoenix](https://github.com/adam-golab/redux-phoenix)
4. [Redux Form](https://redux-form.com)
3. [MobX](https://mobx.js.org/)
7. 类型检查器
- [PropTypes](https://reactjs.org/docs/typechecking-with-proptypes.html)
- [TypeScript](https://www.typescriptlang.org/)
- [Flow](https://flow.org/en/)
8. 表单助手
- [Redux Form](https://redux-form.com)
- [Formik](https://github.com/jaredpalmer/formik)
- [Formsy](https://github.com/formsy/formsy-react)
- [Final Form](https://github.com/final-form/final-form)
9. 路由
- [React-Router](https://reacttraining.com/react-router/)
- [Router5](https://router5.js.org/)
- [Redux-First Router](https://github.com/faceyspacey/redux-first-router)
- [Reach Router](https://reach.tech/router/)
10. API 客户端
1. REST
- [Fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)
- [SuperAgent](https://visionmedia.github.io/superagent/)
- [axios](https://github.com/axios/axios)
2. GraphQL
- [Apollo](https://www.apollographql.com/docs/react/)
- [Relay](https://facebook.github.io/relay/)
- [urql](https://github.com/FormidableLabs/urql)
11. 实用工具库
- [Lodash](https://lodash.com/)
- [Moment](https://momentjs.com/)
- [classnames](https://github.com/JedWatson/classnames)
- [Numeral](http://numeraljs.com/)
- [RxJS](http://reactivex.io/)
- [ImmutableJS](https://facebook.github.io/immutable-js/)
- [Ramda](https://ramdajs.com/)
12. 测试
1. 单元（Unit）测试
- [Jest](https://facebook.github.io/jest/)
- [Enzyme](http://airbnb.io/enzyme/)
- [Sinon](http://sinonjs.org/)
- [Mocha](https://mochajs.org/)
- [Chai](http://www.chaijs.com/)
- [AVA](https://github.com/avajs/ava)
- [Tape](https://github.com/substack/tape)
2. 端到端（E2E）测试
- [Selenium](https://www.seleniumhq.org/), [Webdriver](http://webdriver.io/)
- [Cypress](https://cypress.io/)
- [Puppeteer](https://pptr.dev/)
- [Cucumber.js](https://github.com/cucumber/cucumber-js)
- [Nightwatch.js](http://nightwatchjs.org/)
3. 集成测试
- [Karma](https://karma-runner.github.io/)
13. 国际化（i18n)
- [React Intl](https://github.com/yahoo/react-intl)
- [React i18next](https://react.i18next.com/)
14. 服务端渲染（SSR)
- [Next.js](https://nextjs.org/)
- [After.js](https://github.com/jaredpalmer/after.js)
- [Rogue](https://github.com/alidcastano/rogue.js)
15. 静态网站生成器
- [Gatsby](https://www.gatsbyjs.org/)
16. 后端集成框架
- [React on Rails](https://shakacode.gitbooks.io/react-on-rails/content/)
17. 移动端
- [React Native](https://facebook.github.io/react-native/)
- [Cordova](https://cordova.apache.org/)/[Phonegap](https://phonegap.com/)
18. 桌面端
- [Proton Native](https://proton-native.js.org/)
- [Electron](https://electronjs.org/)
- [React Native Windows](https://github.com/Microsoft/react-native-windows)
19. 虚拟现实（VR)
- [React 360](https://facebook.github.io/react-360/)
## 总结
如果你认为指南可以改进，请提交包含任何更新的 PR 并提交任何问题。此外，我将继续改进这个仓库，因此你可以 star 这个仓库以便于重新访问。
## 贡献
该指南是使用[Draw.io](https://www.draw.io/)构建的。项目文件可以在 `/src` 目录中找到。要修改它, 请打开 draw.io, 点击 **Open Existing Diagram** 并选择项目中的 `xml` 文件。它将为你打开指南，更新它，上传和更新自述文件中的图像并创建一个 PR（导出为 png）。
- 改进后提交 PR
- 讨论问题中的想法
- 传播消息
## 版权许可
[](https://creativecommons.org/licenses/by-nc-sa/4.0/)
================================================
FILE: README-ES.md
================================================
# React Developer Roadmap
[README in Chinese](README-CN.md)
[README in English](README.md)
[README in Japanese](README-JA.md)
[README in Korean](README-KO.md)
[README in Portuguese (Brazil)](README-PTBR.md)
[README in Russian](README-RU.md)
> Roadmap para convertirse en un desarrollador React en 2019::
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?"
## Descargo
> 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
## Roadmap
## Resources
1. Básico
1. HTML
* Aprender los conceptos básicos de HTML.
* Hacer unas pocas páginas como ejercicio.
2. CSS
* Aprender los conceptos básicos de CSS
* Páginas de estilo del paso anterior.
* Construir una página con grid y flexbox.
3. Javascript Básico
* Familiarizarse con la sintaxis.
* Aprender operaciones básicas en DOM
* Aprender los mecanismos típicos de JS (Hoisting, Event Bubbling, creación de prototipos)
* Hacer algunas llamadas AJAX (XHR)
* Aprender nuevas características (ECMA Script 6+)
* Además, familiarícese con la biblioteca jQuery
2. Habilidades generales de desarrollo
1. Aprenda GIT, cree algunos repositorios en GitHub, comparta su código con otras personas
2. Conozca el protocolo HTTP (S), métodos de solicitud (GET, POST, PUT, PATCH, DELETE, OPTIONS)
3. No tengas miedo de usar Google, [Power Searching with Google](http://www.powersearchingwithgoogle.com/)
4. Familiarícese con el terminal, configure su shell (bash, zsh, fish)
5. Lee algunos libros sobre algoritmos y estructuras de datos
6. Lee algunos libros sobre patrones de diseño
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)
4. Familiarízate con las herramientas que utilizarás.
1. Gestores de paquetes
* [npm](https://www.npmjs.com/)
* [yarn](https://yarnpkg.com/lang/en/)
* [pnpm](https://pnpm.js.org/)
2. Task Runners
* [npm scripts](https://docs.npmjs.com/misc/scripts)
* [gulp](https://gulpjs.com/)
* [Webpack](https://webpack.js.org/)
* [Rollup](https://rollupjs.org/guide/en)
* [Parcel](https://parceljs.org/)
5. Estilo
1. Preprocesadores CSS
* [Sass/CSS](https://sass-lang.com/)
* [PostCSS](https://postcss.org/)
* [Less](http://lesscss.org/)
* [Stylus](http://stylus-lang.com/)
2. Frameworks CSS
* [Bootstrap](https://getbootstrap.com/)
* [Materialize](https://materializecss.com/), [Material UI](https://material-ui.com/), [Material Design Lite](https://getmdl.io/)
* [Bulma](https://bulma.io/)
* [Semantic UI](https://semantic-ui.com/)
3. Arquitectura CSS
* [BEM](http://getbem.com/)
* [CSS Modules](https://github.com/css-modules/css-modules)
* [Atomic](https://acss.io/)
* [OOCSS](https://github.com/stubbornella/oocss/wiki)
* [SMACSS](https://smacss.com/)
* [SUITCSS](https://suitcss.github.io/)
4. CSS en JS
* [Styled Components](https://www.styled-components.com/)
* [Radium](https://formidable.com/open-source/radium/)
* [Emotion](https://emotion.sh/)
* [JSS](http://cssinjs.org/)
* [Aphrodite](https://github.com/Khan/aphrodite)
6. Manejo del estado
1. [Component State](https://reactjs.org/docs/faq-state.html)/[Context API](https://reactjs.org/docs/context.html)
2. [Redux](https://redux.js.org/)
1. Acciones asincrónicas (Efectos secundarios)
* [Redux Thunk](https://github.com/reduxjs/redux-thunk)
* [Redux Better Promise](https://github.com/Lukasz-pluszczewski/redux-better-promise)
* [Redux Saga](https://redux-saga.js.org/)
* [Redux Observable](https://redux-observable.js.org)
2. Helpers
* [Rematch](https://rematch.gitbooks.io/rematch/)
* [Reselect](https://github.com/reduxjs/reselect)
3. Persistencia de datos
* [Redux Persist](https://github.com/rt2zz/redux-persist)
* [Redux Phoenix](https://github.com/adam-golab/redux-phoenix)
4. [Redux Form](https://redux-form.com)
3. [MobX](https://mobx.js.org/)
7. Comprobadores de tipos
* [PropTypes](https://reactjs.org/docs/typechecking-with-proptypes.html)
* [TypeScript](https://www.typescriptlang.org/)
* [Flow](https://flow.org/en/)
8. Helpers de formularios
* [Redux Form](https://redux-form.com)
* [Formik](https://github.com/jaredpalmer/formik)
* [Formsy](https://github.com/formsy/formsy-react)
* [Final Form](https://github.com/final-form/final-form)
9. Enrutamiento
* [React-Router](https://reacttraining.com/react-router/)
* [Router5](https://router5.js.org/)
* [Redux-First Router](https://github.com/faceyspacey/redux-first-router)
* [Reach Router](https://reach.tech/router/)
10. Consumo de API
1. REST
* [Fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)
* [SuperAgent](https://visionmedia.github.io/superagent/)
* [axios](https://github.com/axios/axios)
2. GraphQL
* [Apollo](https://www.apollographql.com/docs/react/)
* [Relay](https://facebook.github.io/relay/)
* [urql](https://github.com/FormidableLabs/urql)
11. Librerías útiles
* [Lodash](https://lodash.com/)
* [Moment](https://momentjs.com/)
* [classnames](https://github.com/JedWatson/classnames)
* [Numeral](http://numeraljs.com/)
* [RxJS](http://reactivex.io/)
* [ImmutableJS](https://facebook.github.io/immutable-js/)
* [Ramda](https://ramdajs.com/)
12. Pruebas
1. Pruebas Unitarias
* [Jest](https://facebook.github.io/jest/)
* [Enzyme](http://airbnb.io/enzyme/)
* [Sinon](http://sinonjs.org/)
* [Mocha](https://mochajs.org/)
* [Chai](http://www.chaijs.com/)
* [AVA](https://github.com/avajs/ava)
* [Tape](https://github.com/substack/tape)
2. Pruebas de extremo a extremo
* [Selenium](https://www.seleniumhq.org/), [Webdriver](http://webdriver.io/)
* [Cypress](https://cypress.io/)
* [Puppeteer](https://pptr.dev/)
* [Cucumber.js](https://github.com/cucumber/cucumber-js)
* [Nightwatch.js](http://nightwatchjs.org/)
3. Pruebas de integración
* [Karma](https://karma-runner.github.io/)
13. Internacionalización
* [React Intl](https://github.com/yahoo/react-intl)
* [React i18next](https://react.i18next.com/)
14. Render del lado del servidor
* [Next.js](https://nextjs.org/)
* [After.js](https://github.com/jaredpalmer/after.js)
* [Rogue](https://github.com/alidcastano/rogue.js)
15. Generador de sitio estático
* [Gatsby](https://www.gatsbyjs.org/)
16. Integración con Framework de Backend
* [React on Rails](https://shakacode.gitbooks.io/react-on-rails/content/)
17. Móvil
* [React Native](https://facebook.github.io/react-native/)
* [Cordova](https://cordova.apache.org/)/[Phonegap](https://phonegap.com/)
18. Escritorio
* [Proton Native](https://proton-native.js.org/)
* [Electron](https://electronjs.org/)
* [React Native Windows](https://github.com/Microsoft/react-native-windows)
19. Realidad virtual
* [React 360](https://facebook.github.io/react-360/)
## Conclusión
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.
## Contribución
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).
- Abrir un pull request con mejoras.
- Discutir ideas en temas (issues).
- Difundir la palabra.
## Licencia
[](https://creativecommons.org/licenses/by-nc-sa/4.0/)
================================================
FILE: README-JA.md
================================================
# React 開発者ロードマップ
[README in Chinese](README-CN.md)
[README in English](README.md)
[README in Korean](README-KO.md)
[README in Portuguese (Brazil)](README-PTBR.md)
[README in Russian](README-RU.md)
[README in Spanish](README-ES.md)
> Roadmap to becoming a React developer in 2019:
これはReact開発者になるためにあなたが学ぶべき技術やライブラリを示すチャートです。 このチャートは、「React開発者として次に何を学ぶ必要があるのか」と悩むすべての人へのヒントとして作成しました。
## 免責事項
> このロードマップの目的は、あなたに状況を把握するヒントを与えることです。 あなたが次に何を学ぶべきかについて迷っているときにこのロードマップが導いてくれるでしょう。 あるツールがどのようなケースで他よりも適しているのか、その理由について理解を深める必要があります。また、流行しているものが必ずしも最適であるとは限らないことに注意してください。
## Roadmap
## Resources
1. 基礎知識
1. HTML
* HTMLの基礎知識を学ぶ
* 練習としていくつかページを作成する
2. CSS
* CSSの基礎知識を学ぶ
* 前項で作成したページにCSSを当てる
* ページを grid 及び flexbox で作成する
3. JS基礎
* 構文に詳しくなる
* DOMの基本操作を学ぶ
* JSに特徴的なメカニズムを学ぶ (巻き上げ(Hoisting), Event Bubbling, Prototyping)
* AJAX (XHR) を利用する
* 新機能を学ぶ (ECMA Script 6以降)
* jQueryライブラリに詳しくなる
2. 一般開発技能
1. GITについて学ぶ。GitHubにいくつかレポジトリを作成し他の人と共有してみる
2. Know HTTP(S) protocol, request methods (GET, POST, PUT, PATCH, DELETE, OPTIONS)
2. HTTP(S)について知る。リクエストメソッド (GET, POST, PUT, PATCH, DELETE, OPTIONS)
3. Googleを活用して検索する。[Power Searching with Google](http://www.powersearchingwithgoogle.com/)
4. ターミナルに慣れる。shell(bash, zsh, fish)の設定をしてみる。
5. データ構造とアルゴリズムについての本を読む
6. デザインパターンについての本を読む
3. 公式サイトでReactについて学ぶ [official website](https://reactjs.org/tutorial/tutorial.html) or complete some [courses](https://egghead.io/courses/the-beginner-s-guide-to-react)
4. 利用するツールに詳しくなる
1. Package Managers
* [npm](https://www.npmjs.com/)
* [yarn](https://yarnpkg.com/lang/en/)
* [pnpm](https://pnpm.js.org/)
2. Task Runners
* [npm scripts](https://docs.npmjs.com/misc/scripts)
* [gulp](https://gulpjs.com/)
* [Webpack](https://webpack.js.org/)
* [Rollup](https://rollupjs.org/guide/en)
* [Parcel](https://parceljs.org/)
5. Styling
1. CSS Preprocessor
* [Sass/CSS](https://sass-lang.com/)
* [PostCSS](https://postcss.org/)
* [Less](http://lesscss.org/)
* [Stylus](http://stylus-lang.com/)
2. CSS Frameworks
* [Bootstrap](https://getbootstrap.com/)
* [Materialize](https://materializecss.com/), [Material UI](https://material-ui.com/), [Material Design Lite](https://getmdl.io/)
* [Bulma](https://bulma.io/)
* [Semantic UI](https://semantic-ui.com/)
3. CSS Architecture
* [BEM](http://getbem.com/)
* [CSS Modules](https://github.com/css-modules/css-modules)
* [Atomic](https://acss.io/)
* [OOCSS](https://github.com/stubbornella/oocss/wiki)
* [SMACSS](https://smacss.com/)
* [SUITCSS](https://suitcss.github.io/)
4. CSS in JS
* [Styled Components](https://www.styled-components.com/)
* [Radium](https://formidable.com/open-source/radium/)
* [Emotion](https://emotion.sh/)
* [JSS](http://cssinjs.org/)
* [Aphrodite](https://github.com/Khan/aphrodite)
6. State管理
1. [Component State](https://reactjs.org/docs/faq-state.html)/[Context API](https://reactjs.org/docs/context.html)
2. [Redux](https://redux.js.org/)
1. 非同期処理 (副作用)
* [Redux Thunk](https://github.com/reduxjs/redux-thunk)
* [Redux Better Promise](https://github.com/Lukasz-pluszczewski/redux-better-promise)
* [Redux Saga](https://redux-saga.js.org/)
* [Redux Observable](https://redux-observable.js.org)
2. Helpers
* [Rematch](https://rematch.gitbooks.io/rematch/)
* [Reselect](https://github.com/reduxjs/reselect)
3. Data persistence
* [Redux Persist](https://github.com/rt2zz/redux-persist)
* [Redux Phoenix](https://github.com/adam-golab/redux-phoenix)
4. [Redux Form](https://redux-form.com)
3. [MobX](https://mobx.js.org/)
7. 型チェッカー
* [PropTypes](https://reactjs.org/docs/typechecking-with-proptypes.html)
* [TypeScript](https://www.typescriptlang.org/)
* [Flow](https://flow.org/en/)
8. Form Helpers
* [Redux Form](https://redux-form.com)
* [Formik](https://github.com/jaredpalmer/formik)
* [Formsy](https://github.com/formsy/formsy-react)
* [Final Form](https://github.com/final-form/final-form)
9. Routing
* [React-Router](https://reacttraining.com/react-router/)
* [Router5](https://router5.js.org/)
* [Redux-First Router](https://github.com/faceyspacey/redux-first-router)
* [Reach Router](https://reach.tech/router/)
10. API Clients
1. REST
* [Fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)
* [SuperAgent](https://visionmedia.github.io/superagent/)
* [axios](https://github.com/axios/axios)
2. GraphQL
* [Apollo](https://www.apollographql.com/docs/react/)
* [Relay](https://facebook.github.io/relay/)
* [urql](https://github.com/FormidableLabs/urql)
11. Utility Libraries
* [Lodash](https://lodash.com/)
* [Moment](https://momentjs.com/)
* [classnames](https://github.com/JedWatson/classnames)
* [Numeral](http://numeraljs.com/)
* [RxJS](http://reactivex.io/)
* [ImmutableJS](https://facebook.github.io/immutable-js/)
* [Ramda](https://ramdajs.com/)
12. Testing
1. Unit Testing
* [Jest](https://facebook.github.io/jest/)
* [Enzyme](http://airbnb.io/enzyme/)
* [Sinon](http://sinonjs.org/)
* [Mocha](https://mochajs.org/)
* [Chai](http://www.chaijs.com/)
* [AVA](https://github.com/avajs/ava)
* [Tape](https://github.com/substack/tape)
2. End to End Testing
* [Selenium](https://www.seleniumhq.org/), [Webdriver](http://webdriver.io/)
* [Cypress](https://cypress.io/)
* [Puppeteer](https://pptr.dev/)
* [Cucumber.js](https://github.com/cucumber/cucumber-js)
* [Nightwatch.js](http://nightwatchjs.org/)
3. Integration Testing
* [Karma](https://karma-runner.github.io/)
13. 国際化(Internationalization)
* [React Intl](https://github.com/yahoo/react-intl)
* [React i18next](https://react.i18next.com/)
14. Server Side Rendering
* [Next.js](https://nextjs.org/)
* [After.js](https://github.com/jaredpalmer/after.js)
* [Rogue](https://github.com/alidcastano/rogue.js)
15. 静的サイトジェネレータ(Static Site Generator)
* [Gatsby](https://www.gatsbyjs.org/)
16. Backend Framework Integration
* [React on Rails](https://shakacode.gitbooks.io/react-on-rails/content/)
17. Mobile
* [React Native](https://facebook.github.io/react-native/)
* [Cordova](https://cordova.apache.org/)/[Phonegap](https://phonegap.com/)
18. Desktop
* [Proton Native](https://proton-native.js.org/)
* [Electron](https://electronjs.org/)
* [React Native Windows](https://github.com/Microsoft/react-native-windows)
19. Virtual Reality
* [React 360](https://facebook.github.io/react-360/)
## Wrap Up
ロードマップに改善できる点があれば、Pull Requestを開いてissueを投稿してください。私もあなたがSTARをつけたくなるように、このロードマップを改善し続けます。
## Contribution
このロードマップは [Draw.io](https://www.draw.io/) を利用してつくられています。プロジェクトファイルは `/src` ディレクトリにあります。 修正するときは, draw.ioを開いて **Open Existing Diagram** をクリックし `xml` ファイルを選択してください。ロードマップが開きます。それを更新し `png` としてエクスポートして、ファイルとreadmeを更新し, Pull Requestを作成してください.
- 改善のプルリクエストを開く
- 問題のアイデアを話し合う
- 広く周知する
## License
[](https://creativecommons.org/licenses/by-nc-sa/4.0/)
================================================
FILE: README-KO.md
================================================
# React 개발자 로드맵
[README in Chinese](README-CN.md)
[README in English](README.md)
[README in Japanese](README-JA.md)
[README in Portuguese (Brazil)](README-PTBR.md)
[README in Russian](README-RU.md)
[README in Spanish](README-ES.md)
> 2019년 React 개발자 로드맵:
아래에는 React 개발자가 되기 위한 학습 로드맵과 관련 라이브러리들이 적혀있는 차트가 있습니다. React 개발자로서 다음에 무엇을 배워야하는지 묻는 모든 사람들을 위한 팁으로 이 차트를 만들었습니다.
## 주의사항
> 이 로드맵의 목적은 전체에 대한 윤곽을 제공하는 것입니다. 여러분이 무조건 힙하고 트렌디한 것을 선택하기보단, 앞으로 무엇을 배워야할지 혼란스러울때 이 로드맵이 좋은 가이드가 될 것입니다. 기술을 선택함에 있어 하나의 도구가 다른 도구보다 어떤 경우에 적합한지 이해해야하며, 힙하고 트렌디한 기술들이 항상 모든 업무에 적합하진 않다는 것을 염두에 두시기 바랍니다.
## 로드맵
## 학습 리소스
1. 기본기
1. HTML
- HTML의 기본기를 다져주세요.
- 연습삼아 몇 개의 페이지를 만들어보세요.
2. CSS
- CSS의 기본기를 다져주세요.
- 이전 단계에서 만들었던 페이지들을 꾸며보세요.
- Grid와 flexbox를 활용해 페이지를 만들어보세요.
3. JS 기본
- 문법에 익숙해지세요.
- DOM을 활용한 기본적인 작업들을 배우세요.
- JS에 대한 일반적인 메커니즘을 배우세요. (호이스팅, 이벤트 버블링, 프로토타입)
- AJAX (XHR) 요청을 해보세요.
- 새로운 기능을 배우세요. (ECMA Script 6+)
- 선택적으로, jQuery 라이브러리에 익숙해지면 좋습니다.
2. 기본적인 개발 스킬
1. GIT에 대해 공부하고, GitHub에 몇 개의 Repository를 만들어도 보고, 다른 사람들에게 여러분의 코드를 공유해보세요.
2. Request 메소드 (GET, POST, PUT, PATCH, DELETE, OPTIONS)와 더불어 HTTP(S) 프로토콜에 대해 공부하세요.
3. 구글링을 겁내지 마세요. [구글로 파워서칭 해보기](http://www.powersearchingwithgoogle.com/)
4. 터미널에 익숙해지시고, 여러분만의 shell (bash, zsh, fish)을 설정해보세요.
5. 알고리즘과 자료구조에 대한 몇 개의 책을 읽어보세요.
6. 디자인 패턴에 대한 몇 개의 책을 읽어보세요.
3. [공식 홈페이지](https://reactjs.org/tutorial/tutorial.html)에서 튜토리얼을 읽어보거나 몇 개의 [코스들](https://egghead.io/courses/the-beginner-s-guide-to-react)을 수강해보세요.
4. 여러분이 사용할 도구들에 익숙해지세요.
1. 패키지 관리
- [npm](https://www.npmjs.com/)
- [yarn](https://yarnpkg.com/lang/en/)
- [pnpm](https://pnpm.js.org/)
2. 태스크 러너
- [npm scripts](https://docs.npmjs.com/misc/scripts)
- [gulp](https://gulpjs.com/)
- [Webpack](https://webpack.js.org/)
- [Rollup](https://rollupjs.org/guide/en)
- [Parcel](https://parceljs.org/)
5. 스타일링
1. CSS 전처리기
- [Sass/CSS](https://sass-lang.com/)
- [PostCSS](https://postcss.org/)
- [Less](http://lesscss.org/)
- [Stylus](http://stylus-lang.com/)
2. CSS 프레임워크
- [Bootstrap](https://getbootstrap.com/)
- [Materialize](https://materializecss.com/), [Material UI](https://material-ui.com/), [Material Design Lite](https://getmdl.io/)
- [Bulma](https://bulma.io/)
- [Semantic UI](https://semantic-ui.com/)
3. CSS 설계
- [BEM](http://getbem.com/)
- [CSS Modules](https://github.com/css-modules/css-modules)
- [Atomic](https://acss.io/)
- [OOCSS](https://github.com/stubbornella/oocss/wiki)
- [SMACSS](https://smacss.com/)
- [SUITCSS](https://suitcss.github.io/)
4. CSS in JS
- [Styled Components](https://www.styled-components.com/)
- [Radium](https://formidable.com/open-source/radium/)
- [Emotion](https://emotion.sh/)
- [JSS](http://cssinjs.org/)
- [Aphrodite](https://github.com/Khan/aphrodite)
6. 상태관리
1. [컴포넌트 상태관리](https://reactjs.org/docs/faq-state.html)/[Context API](https://reactjs.org/docs/context.html)
2. [Redux](https://redux.js.org/)
1. 비동기 액션 (사이드 이펙트)
- [Redux Thunk](https://github.com/reduxjs/redux-thunk)
- [Redux Better Promise](https://github.com/Lukasz-pluszczewski/redux-better-promise)
- [Redux Saga](https://redux-saga.js.org/)
- [Redux Observable](https://redux-observable.js.org)
2. 헬퍼 라이브러리
- [Rematch](https://rematch.gitbooks.io/rematch/)
- [Reselect](https://github.com/reduxjs/reselect)
3. 데이터 지속성
- [Redux Persist](https://github.com/rt2zz/redux-persist)
- [Redux Phoenix](https://github.com/adam-golab/redux-phoenix)
4. [Redux Form](https://redux-form.com)
3. [MobX](https://mobx.js.org/)
7. 정적 타입 체킹
- [PropTypes](https://reactjs.org/docs/typechecking-with-proptypes.html)
- [TypeScript](https://www.typescriptlang.org/)
- [Flow](https://flow.org/en/)
8. 폼(Form) 헬퍼
- [Redux Form](https://redux-form.com)
- [Formik](https://github.com/jaredpalmer/formik)
- [Formsy](https://github.com/formsy/formsy-react)
- [Final Form](https://github.com/final-form/final-form)
9. 라우팅
- [React-Router](https://reacttraining.com/react-router/)
- [Router5](https://router5.js.org/)
- [Redux-First Router](https://github.com/faceyspacey/redux-first-router)
- [Reach Router](https://reach.tech/router/)
10. API 클라이언트
1. REST
- [Fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)
- [SuperAgent](https://visionmedia.github.io/superagent/)
- [axios](https://github.com/axios/axios)
2. GraphQL
- [Apollo](https://www.apollographql.com/docs/react/)
- [Relay](https://facebook.github.io/relay/)
- [urql](https://github.com/FormidableLabs/urql)
11. 유틸리티 라이브러리
- [Lodash](https://lodash.com/)
- [Moment](https://momentjs.com/)
- [classnames](https://github.com/JedWatson/classnames)
- [Numeral](http://numeraljs.com/)
- [RxJS](http://reactivex.io/)
- [ImmutableJS](https://facebook.github.io/immutable-js/)
- [Ramda](https://ramdajs.com/)
12. 테스팅
1. 유닛 테스팅
- [Jest](https://facebook.github.io/jest/)
- [Enzyme](http://airbnb.io/enzyme/)
- [Sinon](http://sinonjs.org/)
- [Mocha](https://mochajs.org/)
- [Chai](http://www.chaijs.com/)
- [AVA](https://github.com/avajs/ava)
- [Tape](https://github.com/substack/tape)
2. End to End 테스팅
- [Selenium](https://www.seleniumhq.org/), [Webdriver](http://webdriver.io/)
- [Cypress](https://cypress.io/)
- [Puppeteer](https://pptr.dev/)
- [Cucumber.js](https://github.com/cucumber/cucumber-js)
- [Nightwatch.js](http://nightwatchjs.org/)
3. 통합 테스팅
- [Karma](https://karma-runner.github.io/)
13. 국제화
- [React Intl](https://github.com/yahoo/react-intl)
- [React i18next](https://react.i18next.com/)
14. 서버사이드 렌더링
- [Next.js](https://nextjs.org/)
- [After.js](https://github.com/jaredpalmer/after.js)
- [Rogue](https://github.com/alidcastano/rogue.js)
15. 정적 사이트 생성기
- [Gatsby](https://www.gatsbyjs.org/)
16. 백엔드 프레임워크 통합
- [React on Rails](https://shakacode.gitbooks.io/react-on-rails/content/)
17. 모바일
- [React Native](https://facebook.github.io/react-native/)
- [Cordova](https://cordova.apache.org/)/[Phonegap](https://phonegap.com/)
18. 데스크탑
- [Proton Native](https://proton-native.js.org/)
- [Electron](https://electronjs.org/)
- [React Native Windows](https://github.com/Microsoft/react-native-windows)
19. 가상현실 (VR)
- [React 360](https://facebook.github.io/react-360/)
## 마무리
이 로드맵에 개선이 필요하면 수정사항을 포함한 PR을 보내주시거나 이슈에 의견을 남겨주세요. 저 또한 이것을 계속 개선하려고 노력 중에 있으니, 여러분께서도 다시 찾아오시기 쉽도록 Star을 부탁드립니다.
## 컨트리뷰션
이 로드맵은 [Draw.io](https://www.draw.io/)를 사용하여 작성되었습니다. 프로젝트 파일들은 `/src` 디렉토리에 있습니다. 수정하기 위해선 draw.io를 열어서, **Open Existing Diagram** 를 누르시고 프로젝트 내의 `xml` 파일을 선택해주세요. 로드맵 파일이 열릴 것입니다. 수정하시고, readme의 image 파일을 변경해주시고 PR을 만들어주세요. (png 파일로 내보내기 해주세요).
- 수정 / 개선사항과 함께 Pull Request를 남겨주세요.
- Issues에서 의견을 나눠주세요.
- 다른 사람들에게도 알려주세요.
## 라이센스
[](https://creativecommons.org/licenses/by-nc-sa/4.0/)
================================================
FILE: README-PTBR.md
================================================
# Guia do desenvolvedor React
[README in Chinese](README-CN.md)
[README in English](README.md)
[README in Japanese](README-JA.md)
[README in Korean](README-KO.md)
[README in Russian](README-RU.md)
[README in Spanish](README-ES.md)
> Guia para se tornar um desenvolvedor React em 2019:
> 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?"
## Aviso
> 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.
## Roadmap
## Recursos
1. Basico
1. HTML
- Aprenda o básico do HTML
- Desenvolva algumas paginas como exercícios
2. CSS
- Aprenda o básico de CSS
- Aplique estilos nas páginas desenvolvidas anteriormente
- Desenvolva uma página com CSS Grid e CSS Flexbox
3. Javascript
- Se familiarize com a sintaxe
- Aprenda operações basicas com o DOM
- Aprenda mecanismos típicos para JS (Hoisting, Event Bubbling, Prototyping)
- Faça algumas requisições AJAX
- Aprenda as novas features do javascript (ECMA Script 6+)
- Opcional: Conheça a biblioteca JQuery
2. Conhecimentos de desenvolvimento em geral
1. Aprenda GIT, crie repositórios no GitHub e compartilhe seu código com outras pessoas.
2. Aprenda os protocolos HTTP(S) e metodos de request (GET, POST, PUT, PATCH, DELETE, OPTIONS)
3. Não tenha medo de utilizar o google, veja [o uso avançado do Google](http://www.powersearchingwithgoogle.com/)
4. Familiarize-se com terminal e configure-o (bash, zsh, fish)
5. Leia alguns livros sobre algoritmos e estrutura de dados
6. Leia alguns livros sobre padrões de projeto (design patterns)
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)
4. Conheça as ferramentas que voce usará
1. Gerenciadores de pacote
- [npm](https://www.npmjs.com/)
- [yarn](https://yarnpkg.com/lang/en/)
- [pnpm](https://pnpm.js.org/)
2. Executadores de tarefas
- [npm scripts](https://docs.npmjs.com/misc/scripts)
- [gulp](https://gulpjs.com/)
- [Webpack](https://webpack.js.org/)
- [Rollup](https://rollupjs.org/guide/en)
- [Parcel](https://parceljs.org/)
5. Estilização
1. Pré-processadores CSS
- [Sass/CSS](https://sass-lang.com/)
- [PostCSS](https://postcss.org/)
- [Less](http://lesscss.org/)
- [Stylus](http://stylus-lang.com/)
2. Frameworks CSS
- [Bootstrap](https://getbootstrap.com/)
- [Materialize](https://materializecss.com/), [Material UI](https://material-ui.com/), [Material Design Lite](https://getmdl.io/)
- [Bulma](https://bulma.io/)
- [Semantic UI](https://semantic-ui.com/)
3. Arquitetura CSS
- [BEM](http://getbem.com/)
- [CSS Modules](https://github.com/css-modules/css-modules)
- [Atomic](https://acss.io/)
- [OOCSS](https://github.com/stubbornella/oocss/wiki)
- [SMACSS](https://smacss.com/)
- [SUITCSS](https://suitcss.github.io/)
4. CSS in JS
- [Styled Components](https://www.styled-components.com/)
- [Radium](https://formidable.com/open-source/radium/)
- [Emotion](https://emotion.sh/)
- [JSS](http://cssinjs.org/)
- [Aphrodite](https://github.com/Khan/aphrodite)
6. Gerenciamento de estado
1. [Component State](https://reactjs.org/docs/faq-state.html)/[Context API](https://reactjs.org/docs/context.html)
2. [Redux](https://redux.js.org/)
1. Async actions (Side Effects)
- [Redux Thunk](https://github.com/reduxjs/redux-thunk)
- [Redux Better Promise](https://github.com/Lukasz-pluszczewski/redux-better-promise)
- [Redux Saga](https://redux-saga.js.org/)
- [Redux Observable](https://redux-observable.js.org)
2. Helpers
- [Rematch](https://rematch.gitbooks.io/rematch/)
- [Reselect](https://github.com/reduxjs/reselect)
3. Persistencia de dados
- [Redux Persist](https://github.com/rt2zz/redux-persist)
- [Redux Phoenix](https://github.com/adam-golab/redux-phoenix)
4. [Redux Form](https://redux-form.com)
3. [MobX](https://mobx.js.org/)
7. Tipagem
- [PropTypes](https://reactjs.org/docs/typechecking-with-proptypes.html)
- [TypeScript](https://www.typescriptlang.org/)
- [Flow](https://flow.org/en/)
8. Form Helpers
- [Redux Form](https://redux-form.com)
- [Formik](https://github.com/jaredpalmer/formik)
- [Formsy](https://github.com/formsy/formsy-react)
- [Final Form](https://github.com/final-form/final-form)
9. Rotas
- [React-Router](https://reacttraining.com/react-router/)
- [Router5](https://router5.js.org/)
- [Redux-First Router](https://github.com/faceyspacey/redux-first-router)
- [Reach Router](https://reach.tech/router/)
10. Clientes API
1. REST
- [Fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)
- [SuperAgent](https://visionmedia.github.io/superagent/)
- [axios](https://github.com/axios/axios)
2. GraphQL
- [Apollo](https://www.apollographql.com/docs/react/)
- [Relay](https://facebook.github.io/relay/)
- [urql](https://github.com/FormidableLabs/urql)
11. Bibliotecas uteis
- [Lodash](https://lodash.com/)
- [Moment](https://momentjs.com/)
- [classnames](https://github.com/JedWatson/classnames)
- [Numeral](http://numeraljs.com/)
- [RxJS](http://reactivex.io/)
- [ImmutableJS](https://facebook.github.io/immutable-js/)
- [Ramda](https://ramdajs.com/)
12. Testes
1. Teste unitário
- [Jest](https://facebook.github.io/jest/)
- [Enzyme](http://airbnb.io/enzyme/)
- [Sinon](http://sinonjs.org/)
- [Mocha](https://mochajs.org/)
- [Chai](http://www.chaijs.com/)
- [AVA](https://github.com/avajs/ava)
- [Tape](https://github.com/substack/tape)
2. Teste end-to-end
- [Selenium](https://www.seleniumhq.org/), [Webdriver](http://webdriver.io/)
- [Cypress](https://cypress.io/)
- [Puppeteer](https://pptr.dev/)
- [Cucumber.js](https://github.com/cucumber/cucumber-js)
- [Nightwatch.js](http://nightwatchjs.org/)
3. Teste de integração
- [Karma](https://karma-runner.github.io/)
13. Internacionalização
- [React Intl](https://github.com/yahoo/react-intl)
- [React i18next](https://react.i18next.com/)
14. Renderização no servidor
- [Next.js](https://nextjs.org/)
- [After.js](https://github.com/jaredpalmer/after.js)
- [Rogue](https://github.com/alidcastano/rogue.js)
15. Gerador de site estático
- [Gatsby](https://www.gatsbyjs.org/)
16. Integração com estrturas de backend
- [React on Rails](https://shakacode.gitbooks.io/react-on-rails/content/)
17. Desenvolvimento de aplicativos móveis
- [React Native](https://facebook.github.io/react-native/)
- [Cordova](https://cordova.apache.org/)/[Phonegap](https://phonegap.com/)
18. Desenvolvimento de aplicativos desktop
- [Proton Native](https://proton-native.js.org/)
- [Electron](https://electronjs.org/)
- [React Native Windows](https://github.com/Microsoft/react-native-windows)
19. Realidade virtual
- [React 360](https://facebook.github.io/react-360/)
## Resumo
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.
## Contribuição
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.
- Abra pull request com melhorias
- Discuta novas ideias nas issues
- Compartilhe esse repositorio
## Licença
[](https://creativecommons.org/licenses/by-nc-sa/4.0/)
================================================
FILE: README-RU.md
================================================
# План становления React-разработчиком
[README in Chinese](README-CN.md)
[README in English](README.md)
[README in Japanese](README-JA.md)
[README in Korean](README-KO.md)
[README in Portuguese (Brazil)](README-PTBR.md)
[README in Spanish](README-ES.md)
> План, чтобы стать React-разработчиком в 2019 году:
Ниже вы можете найти схему, показывающую пути, которые могут привести, а также библиотеки, которые вам нужно изучить, чтобы стать разработчиком React. Я сделал эту схему в качестве подсказки для всех, кто спрашивает меня: «Что мне стоит изучить ещё в качестве React-разработчика?»
## Предупреждение
> Цель этого плана — дать вам общее представление о том, как стать React-разработчиком. Этот план поможет вам, если вы запутались, что изучать дальше, вместо того, чтобы поощрять вас выбирать что-то модное и популярное. Вам стоит постепенно понимать, почему один инструмент лучше подходит для определённых ситуаций, чем другой, и не забывать, что модный и популярный инструмент не всегда означает, что он лучше всего подходит для работы.
## План изучения
## Ресурсы
1. Основы
1. HTML
* Изучить основы HTML
* Сделать несколько страниц в качестве упражнения
2. CSS
* Изучить основы CSS
* Стилизовать страницы, созданные в предыдущем шаге
* Создать страницу с использованием сеток и флексбокса
3. Основы JS
* Познакомиться с синтаксисом
* Изучить основные операции на DOM
* Изучить механизмы, специфичные для JS (Поднятие, всплытие событий, прототипное наследование)
* Выполнить некоторые AJAX-вызовы (XHR)
* Изучить новые возможности (ECMAScript 6+)
* Дополнительно познакомиться с библиотекой jQuery
2. Общие навыки для разработки
1. Изучить Git, создать несколько репозиториев на GitHub, поделиться своим кодом с другими
2. Узнать о протоколе HTTP(S), методами запроса (GET, POST, PUT, PATCH, DELETE, OPTIONS)
3. Не бояться использовать Google, посмотреть [курс по продвинутому использованию Google](http://www.powersearchingwithgoogle.com/)
4. Познакомиться с терминалом, настроить оболочку (bash, zsh, fish)
5. Прочитать несколько книг про алгоритмы и структуры данных
6. Прочитать несколько книг по паттернам проектирования
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)
4. Познакомиться с инструментами, которые вы будете использовать
1. Менеджеры пакетов
* [npm](https://www.npmjs.com/)
* [yarn](https://yarnpkg.com/lang/en/)
* [pnpm](https://pnpm.js.org/)
2. Выполнение задач
* [npm-скрипты](https://docs.npmjs.com/misc/scripts)
* [gulp](https://gulpjs.com/)
* [Webpack](https://webpack.js.org/)
* [Rollup](https://rollupjs.org/guide/en)
* [Parcel](https://parceljs.org/)
5. Стилизация
1. CSS-препроцессоры
* [Sass/CSS](https://sass-lang.com/)
* [PostCSS](https://postcss.org/)
* [Less](http://lesscss.org/)
* [Stylus](http://stylus-lang.com/)
2. CSS-фреймворки
* [Bootstrap](https://getbootstrap.com/)
* [Materialize](https://materializecss.com/), [Material UI](https://material-ui.com/), [Material Design Lite](https://getmdl.io/)
* [Bulma](https://bulma.io/)
* [Semantic UI](https://semantic-ui.com/)
3. Архитектура CSS
* [BEM](http://getbem.com/)
* [CSS Modules](https://github.com/css-modules/css-modules)
* [Atomic](https://acss.io/)
* [OOCSS](https://github.com/stubbornella/oocss/wiki)
* [SMACSS](https://smacss.com/)
* [SUITCSS](https://suitcss.github.io/)
4. CSS в JS
* [Styled Components](https://www.styled-components.com/)
* [Radium](https://formidable.com/open-source/radium/)
* [Emotion](https://emotion.sh/)
* [JSS](http://cssinjs.org/)
* [Aphrodite](https://github.com/Khan/aphrodite)
6. Управление состоянием
1. [Состояние компонента](https://reactjs.org/docs/faq-state.html)/[Context API](https://reactjs.org/docs/context.html)
2. [Redux](https://redux.js.org/)
1. Асинхронные действия (побочные эффекты)
* [Redux Thunk](https://github.com/reduxjs/redux-thunk)
* [Redux Better Promise](https://github.com/Lukasz-pluszczewski/redux-better-promise)
* [Redux Saga](https://redux-saga.js.org/)
* [Redux Observable](https://redux-observable.js.org)
2. Библиотеки-помощники
* [Rematch](https://rematch.gitbooks.io/rematch/)
* [Reselect](https://github.com/reduxjs/reselect)
3. Постоянное хранение данных
* [Redux Persist](https://github.com/rt2zz/redux-persist)
* [Redux Phoenix](https://github.com/adam-golab/redux-phoenix)
4. [Redux Form](https://redux-form.com)
3. [MobX](https://mobx.js.org/)
7. Проверка типов
* [PropTypes](https://reactjs.org/docs/typechecking-with-proptypes.html)
* [TypeScript](https://www.typescriptlang.org/)
* [Flow](https://flow.org/en/)
8. Вспомогательные библиотеки для форм
* [Redux Form](https://redux-form.com)
* [Formik](https://github.com/jaredpalmer/formik)
* [Formsy](https://github.com/formsy/formsy-react)
* [Final Form](https://github.com/final-form/final-form)
9. Маршрутизация
* [React-Router](https://reacttraining.com/react-router/)
* [Router5](https://router5.js.org/)
* [Redux-First Router](https://github.com/faceyspacey/redux-first-router)
* [Reach Router](https://reach.tech/router/)
10. API-клиенты
1. REST
* [Fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)
* [SuperAgent](https://visionmedia.github.io/superagent/)
* [axios](https://github.com/axios/axios)
2. GraphQL
* [Apollo](https://www.apollographql.com/docs/react/)
* [Relay](https://facebook.github.io/relay/)
* [urql](https://github.com/FormidableLabs/urql)
11. Утилитарные библиотеки
* [Lodash](https://lodash.com/)
* [Moment](https://momentjs.com/)
* [classnames](https://github.com/JedWatson/classnames)
* [Numeral](http://numeraljs.com/)
* [RxJS](http://reactivex.io/)
* [ImmutableJS](https://facebook.github.io/immutable-js/)
* [Ramda](https://ramdajs.com/)
12. Тестирование
1. Модульное тестирование
* [Jest](https://facebook.github.io/jest/)
* [Enzyme](http://airbnb.io/enzyme/)
* [Sinon](http://sinonjs.org/)
* [Mocha](https://mochajs.org/)
* [Chai](http://www.chaijs.com/)
* [AVA](https://github.com/avajs/ava)
* [Tape](https://github.com/substack/tape)
2. Сквозное (end-to-end) тестирование
* [Selenium](https://www.seleniumhq.org/), [Webdriver](http://webdriver.io/)
* [Cypress](https://cypress.io/)
* [Puppeteer](https://pptr.dev/)
* [Cucumber.js](https://github.com/cucumber/cucumber-js)
* [Nightwatch.js](http://nightwatchjs.org/)
3. Интеграционное тестирование
* [Karma](https://karma-runner.github.io/)
13. Локализация
* [React Intl](https://github.com/yahoo/react-intl)
* [React i18next](https://react.i18next.com/)
14. Отрисовка на стороне сервера
* [Next.js](https://nextjs.org/)
* [After.js](https://github.com/jaredpalmer/after.js)
* [Rogue](https://github.com/alidcastano/rogue.js)
15. Генератор статических сайтов
* [Gatsby](https://www.gatsbyjs.org/)
16. Интеграция с бэкенд-фреймворками
* [React on Rails](https://shakacode.gitbooks.io/react-on-rails/content/)
17. Разработка мобильных приложений
* [React Native](https://facebook.github.io/react-native/)
* [Cordova](https://cordova.apache.org/)/[Phonegap](https://phonegap.com/)
18. Разработка десктопных приложений
* [Proton Native](https://proton-native.js.org/)
* [Electron](https://electronjs.org/)
* [React Native Windows](https://github.com/Microsoft/react-native-windows)
19. Виртуальная реальность
* [React 360](https://facebook.github.io/react-360/)
## Резюме
Если вы считаете, что план может быть улучшен, пожалуйста, создайте пулреквест с любыми обновлениями и отправляйте любые ишью, если есть вопросы и предложения. Кроме того, я продолжу улучшать его, так что, возможно, стоит отслеживать изменения, происходящие в этом репозитории, либо заглянуть в него спустя некоторое время.
## Участие в проекте
План создан с помощью онлайн-инструмента [Draw.io](https://www.draw.io/). Файл проекта можно найти в каталоге `/src`. Чтобы изменить его, откройте draw.io, нажмите **Open Existing Diagram** и выберите файл `xml` с проектом. Он откроет схему, обновите её, загрузите и обновите изображения в readme и создайте PR (экспортируйте как png).
- Открыть пулреквест с улучшениями
- Обсуждайте новые идеи в ишью
- Расскажите об этом другим
## Лицензия
[](https://creativecommons.org/licenses/by-nc-sa/4.0/)
================================================
FILE: README.md
================================================
# React Developer Roadmap
[README in Chinese](README-CN.md)
[README in Japanese](README-JA.md)
[README in Korean](README-KO.md)
[README in Portuguese (Brazil)](README-PTBR.md)
[README in Russian](README-RU.md)
[README in Spanish](README-ES.md)
> Roadmap to becoming a React developer in 2019:
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?"
## Disclaimer
> 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
## Roadmap
## Resources
1. Basics
1. HTML
* Learn the basics of HTML
* Make a few pages as an exercise
2. CSS
* Learn the basics of CSS
* Style pages from previous step
* Build a page with grid and flexbox
3. JS Basics
* Get familiar with the syntax
* Learn basic operations on DOM
* Learn mechanisms typical for JS (Hoisting, Event Bubbling, Prototyping)
* Make some AJAX (XHR) calls
* Learn new features (ECMA Script 6+)
* Additionally, get familiar with the jQuery library
2. General Development Skills
1. Learn GIT, create a few repositories on GitHub, share your code with other people
2. Know HTTP(S) protocol, request methods (GET, POST, PUT, PATCH, DELETE, OPTIONS)
3. Don't be afraid of using Google, [Power Searching with Google](http://www.powersearchingwithgoogle.com/)
4. Get familiar with terminal, configure your shell (bash, zsh, fish)
5. Read a few books about algorithms and data structures
6. Read a few books about design patterns
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)
4. Get familiar with tools that you will be using
1. Package Managers
* [npm](https://www.npmjs.com/)
* [yarn](https://yarnpkg.com/lang/en/)
* [pnpm](https://pnpm.js.org/)
2. Task Runners
* [npm scripts](https://docs.npmjs.com/misc/scripts)
* [gulp](https://gulpjs.com/)
* [Webpack](https://webpack.js.org/)
* [Rollup](https://rollupjs.org/guide/en)
* [Parcel](https://parceljs.org/)
5. Styling
1. CSS Preprocessor
* [Sass/CSS](https://sass-lang.com/)
* [PostCSS](https://postcss.org/)
* [Less](http://lesscss.org/)
* [Stylus](http://stylus-lang.com/)
2. CSS Frameworks
* [Bootstrap](https://getbootstrap.com/)
* [Materialize](https://materializecss.com/), [Material UI](https://material-ui.com/), [Material Design Lite](https://getmdl.io/)
* [Bulma](https://bulma.io/)
* [Semantic UI](https://semantic-ui.com/)
3. CSS Architecture
* [BEM](http://getbem.com/)
* [CSS Modules](https://github.com/css-modules/css-modules)
* [Atomic](https://acss.io/)
* [OOCSS](https://github.com/stubbornella/oocss/wiki)
* [SMACSS](https://smacss.com/)
* [SUITCSS](https://suitcss.github.io/)
4. CSS in JS
* [Styled Components](https://www.styled-components.com/)
* [Radium](https://formidable.com/open-source/radium/)
* [Emotion](https://emotion.sh/)
* [JSS](http://cssinjs.org/)
* [Aphrodite](https://github.com/Khan/aphrodite)
6. State Management
1. [Component State](https://reactjs.org/docs/faq-state.html)/[Context API](https://reactjs.org/docs/context.html)
2. [Redux](https://redux.js.org/)
1. Async actions (Side Effects)
* [Redux Thunk](https://github.com/reduxjs/redux-thunk)
* [Redux Better Promise](https://github.com/Lukasz-pluszczewski/redux-better-promise)
* [Redux Saga](https://redux-saga.js.org/)
* [Redux Observable](https://redux-observable.js.org)
2. Helpers
* [Rematch](https://rematch.gitbooks.io/rematch/)
* [Reselect](https://github.com/reduxjs/reselect)
3. Data persistence
* [Redux Persist](https://github.com/rt2zz/redux-persist)
* [Redux Phoenix](https://github.com/adam-golab/redux-phoenix)
4. [Redux Form](https://redux-form.com)
3. [MobX](https://mobx.js.org/)
7. Type Checkers
* [PropTypes](https://reactjs.org/docs/typechecking-with-proptypes.html)
* [TypeScript](https://www.typescriptlang.org/)
* [Flow](https://flow.org/en/)
8. Form Helpers
* [Redux Form](https://redux-form.com)
* [Formik](https://github.com/jaredpalmer/formik)
* [Formsy](https://github.com/formsy/formsy-react)
* [Final Form](https://github.com/final-form/final-form)
9. Routing
* [React-Router](https://reacttraining.com/react-router/)
* [Router5](https://router5.js.org/)
* [Redux-First Router](https://github.com/faceyspacey/redux-first-router)
* [Reach Router](https://reach.tech/router/)
10. API Clients
1. REST
* [Fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)
* [SuperAgent](https://visionmedia.github.io/superagent/)
* [axios](https://github.com/axios/axios)
2. GraphQL
* [Apollo](https://www.apollographql.com/docs/react/)
* [Relay](https://facebook.github.io/relay/)
* [urql](https://github.com/FormidableLabs/urql)
11. Utility Libraries
* [Lodash](https://lodash.com/)
* [Moment](https://momentjs.com/)
* [classnames](https://github.com/JedWatson/classnames)
* [Numeral](http://numeraljs.com/)
* [RxJS](http://reactivex.io/)
* [ImmutableJS](https://facebook.github.io/immutable-js/)
* [Ramda](https://ramdajs.com/)
12. Testing
1. Unit Testing
* [Jest](https://facebook.github.io/jest/)
* [Enzyme](http://airbnb.io/enzyme/)
* [Sinon](http://sinonjs.org/)
* [Mocha](https://mochajs.org/)
* [Chai](http://www.chaijs.com/)
* [AVA](https://github.com/avajs/ava)
* [Tape](https://github.com/substack/tape)
2. End to End Testing
* [Selenium](https://www.seleniumhq.org/), [Webdriver](http://webdriver.io/)
* [Cypress](https://cypress.io/)
* [Puppeteer](https://pptr.dev/)
* [Cucumber.js](https://github.com/cucumber/cucumber-js)
* [Nightwatch.js](http://nightwatchjs.org/)
3. Integration Testing
* [Karma](https://karma-runner.github.io/)
13. Internationalization
* [React Intl](https://github.com/yahoo/react-intl)
* [React i18next](https://react.i18next.com/)
14. Server Side Rendering
* [Next.js](https://nextjs.org/)
* [After.js](https://github.com/jaredpalmer/after.js)
* [Rogue](https://github.com/alidcastano/rogue.js)
15. Static Site Generator
* [Gatsby](https://www.gatsbyjs.org/)
16. Backend Framework Integration
* [React on Rails](https://shakacode.gitbooks.io/react-on-rails/content/)
17. Mobile
* [React Native](https://facebook.github.io/react-native/)
* [Cordova](https://cordova.apache.org/)/[Phonegap](https://phonegap.com/)
18. Desktop
* [Proton Native](https://proton-native.js.org/)
* [Electron](https://electronjs.org/)
* [React Native Windows](https://github.com/Microsoft/react-native-windows)
19. Virtual Reality
* [React 360](https://facebook.github.io/react-360/)
## Wrap Up
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.
## Contribution
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).
- Open a pull request with improvements
- Discuss ideas in issues
- Spread the word
## License
[](https://creativecommons.org/licenses/by-nc-sa/4.0/)
================================================
FILE: src/react-developer-roadmap-cn.xml
================================================
<?xml version="1.0" encoding="UTF-8"?>
<mxGraphModel dx="1430" dy="844" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" background="#ffffff" math="0" shadow="0">
<root>
<mxCell id="0"/>
<mxCell id="1" parent="0"/>
<mxCell id="4" value="2019 React 开发者" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;comic=0;fontFamily=Verdana;fontSize=16;fontStyle=0" parent="1" vertex="1">
<mxGeometry x="273.5" y="30" width="280" height="30" as="geometry"/>
</mxCell>
<mxCell id="5" value="图例" style="text;html=1;strokeColor=none;fillColor=none;align=right;verticalAlign=middle;whiteSpace=wrap;rounded=0;comic=0;fontFamily=Verdana;fontSize=12;" parent="1" vertex="1">
<mxGeometry x="720" y="40" width="80" height="20" as="geometry"/>
</mxCell>
<mxCell id="7" value="必须掌握" style="rounded=1;whiteSpace=wrap;html=1;comic=0;fontFamily=Verdana;fontSize=10;fillColor=#FFFF66;" parent="1" vertex="1">
<mxGeometry x="680" y="70" width="120" height="20" as="geometry"/>
</mxCell>
<mxCell id="9" value="最好掌握" style="rounded=1;whiteSpace=wrap;html=1;comic=0;fontFamily=Verdana;fontSize=10;fillColor=#FFCC99;" parent="1" vertex="1">
<mxGeometry x="680" y="100" width="120" height="20" as="geometry"/>
</mxCell>
<mxCell id="10" value="可以掌握" style="rounded=1;whiteSpace=wrap;html=1;comic=0;fontFamily=Verdana;fontSize=10;fillColor=#CCCCCC;" parent="1" vertex="1">
<mxGeometry x="680" y="130" width="120" height="20" as="geometry"/>
</mxCell>
<mxCell id="12" value="学习基础知识" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;comic=0;fontFamily=Verdana;fontSize=10;fontStyle=0" parent="1" vertex="1">
<mxGeometry x="250" y="115" width="280" height="15" as="geometry"/>
</mxCell>
<mxCell id="15" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=10;exitX=0.5;exitY=1;entryX=0.5;entryY=0;endFill=0;" parent="1" source="12" target="17" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="270" y="210" as="sourcePoint"/>
<mxPoint x="360" y="190" as="targetPoint"/>
<Array as="points">
<mxPoint x="390" y="140"/>
<mxPoint x="414" y="170"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="16" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=10;exitX=0.5;exitY=1;entryX=0.5;entryY=0;endFill=0;" parent="1" source="4" target="12" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="414" y="100" as="sourcePoint"/>
<mxPoint x="310" y="210" as="targetPoint"/>
<Array as="points">
<mxPoint x="390" y="80"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="17" value="HTML" style="rounded=1;whiteSpace=wrap;html=1;comic=0;fontFamily=Verdana;fontSize=10;fillColor=#FFFF66;" parent="1" vertex="1">
<mxGeometry x="348.5" y="190" width="130" height="20" as="geometry"/>
</mxCell>
<mxCell id="18" value="CSS" style="rounded=1;whiteSpace=wrap;html=1;comic=0;fontFamily=Verdana;fontSize=10;fillColor=#FFFF66;" parent="1" vertex="1">
<mxGeometry x="348.5" y="215" width="130" height="20" as="geometry"/>
</mxCell>
<mxCell id="20" value="JS 基础" style="rounded=1;whiteSpace=wrap;html=1;comic=0;fontFamily=Verdana;fontSize=10;fillColor=#FFFF66;" parent="1" vertex="1">
<mxGeometry x="348.5" y="240" width="130" height="20" as="geometry"/>
</mxCell>
<mxCell id="22" value="学习 HTML 的基础知识" style="text;html=1;strokeColor=none;fillColor=none;align=right;verticalAlign=middle;whiteSpace=wrap;rounded=0;comic=0;fontFamily=Verdana;fontSize=8;" parent="1" vertex="1">
<mxGeometry x="20" y="145" width="260" height="15" as="geometry"/>
</mxCell>
<mxCell id="23" value="HTML 语法" style="text;html=1;strokeColor=none;fillColor=none;align=right;verticalAlign=middle;whiteSpace=wrap;rounded=0;comic=0;fontFamily=Verdana;fontSize=8;" parent="1" vertex="1">
<mxGeometry x="20" y="158" width="260" height="15" as="geometry"/>
</mxCell>
<mxCell id="24" value="将页面划分为多个部分并正确构建 DOM" style="text;html=1;strokeColor=none;fillColor=none;align=right;verticalAlign=middle;whiteSpace=wrap;rounded=0;comic=0;fontFamily=Verdana;fontSize=8;" parent="1" vertex="1">
<mxGeometry x="20" y="170" width="260" height="15" as="geometry"/>
</mxCell>
<mxCell id="27" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=8;exitX=0;exitY=0.25;entryX=1;entryY=0.5;endFill=0;dashed=1;" parent="1" source="17" target="22" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="110" y="330" as="sourcePoint"/>
<mxPoint x="160" y="280" as="targetPoint"/>
<Array as="points">
<mxPoint x="330" y="160"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="28" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=8;exitX=0;exitY=0.5;entryX=1;entryY=0.5;endFill=0;dashed=1;" parent="1" source="17" target="23" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="358.5" y="205" as="sourcePoint"/>
<mxPoint x="290" y="162.5" as="targetPoint"/>
<Array as="points">
<mxPoint x="320" y="170"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="29" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=8;exitX=0;exitY=0.75;entryX=1;entryY=0.5;endFill=0;dashed=1;" parent="1" source="17" target="24" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="368.5" y="215" as="sourcePoint"/>
<mxPoint x="300" y="172.5" as="targetPoint"/>
<Array as="points">
<mxPoint x="310" y="178"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="31" value="学习 CSS 的基础知识" style="text;html=1;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;whiteSpace=wrap;rounded=0;comic=0;fontFamily=Verdana;fontSize=8;" parent="1" vertex="1">
<mxGeometry x="540" y="185" width="260" height="15" as="geometry"/>
</mxCell>
<mxCell id="32" value="Grid 布局和 Flexbox 布局" style="text;html=1;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;whiteSpace=wrap;rounded=0;comic=0;fontFamily=Verdana;fontSize=8;" parent="1" vertex="1">
<mxGeometry x="540" y="197" width="260" height="15" as="geometry"/>
</mxCell>
<mxCell id="33" value="响应式 Web 设计和媒体查询" style="text;html=1;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;whiteSpace=wrap;rounded=0;comic=0;fontFamily=Verdana;fontSize=8;" parent="1" vertex="1">
<mxGeometry x="540" y="210" width="260" height="15" as="geometry"/>
</mxCell>
<mxCell id="34" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=8;exitX=1;exitY=0.25;entryX=0;entryY=0.5;endFill=0;dashed=1;" parent="1" source="18" target="31" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="358.5" y="205" as="sourcePoint"/>
<mxPoint x="290" y="162.5" as="targetPoint"/>
<Array as="points">
<mxPoint x="500" y="193"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="35" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=8;exitX=1;exitY=0.5;entryX=0;entryY=0.5;endFill=0;dashed=1;" parent="1" source="18" target="32" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="488.5" y="205" as="sourcePoint"/>
<mxPoint x="550" y="187.5" as="targetPoint"/>
<Array as="points">
<mxPoint x="510" y="205"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="36" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=8;exitX=1;exitY=0.75;entryX=0;entryY=0.5;endFill=0;dashed=1;" parent="1" source="18" target="33" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="498.5" y="215" as="sourcePoint"/>
<mxPoint x="560" y="197.5" as="targetPoint"/>
<Array as="points">
<mxPoint x="520" y="218"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="39" value="语法和基本的操作" style="text;html=1;strokeColor=none;fillColor=none;align=right;verticalAlign=middle;whiteSpace=wrap;rounded=0;comic=0;fontFamily=Verdana;fontSize=8;" parent="1" vertex="1">
<mxGeometry y="220" width="260" height="15" as="geometry"/>
</mxCell>
<mxCell id="40" value="DOM 操作" style="text;html=1;strokeColor=none;fillColor=none;align=right;verticalAlign=middle;whiteSpace=wrap;rounded=0;comic=0;fontFamily=Verdana;fontSize=8;" parent="1" vertex="1">
<mxGeometry y="233" width="260" height="15" as="geometry"/>
</mxCell>
<mxCell id="41" value="变量提升，事件冒泡，原型" style="text;html=1;strokeColor=none;fillColor=none;align=right;verticalAlign=middle;whiteSpace=wrap;rounded=0;comic=0;fontFamily=Verdana;fontSize=8;" parent="1" vertex="1">
<mxGeometry y="245" width="260" height="15" as="geometry"/>
</mxCell>
<mxCell id="42" value="AJAX (XHR)" style="text;html=1;strokeColor=none;fillColor=none;align=right;verticalAlign=middle;whiteSpace=wrap;rounded=0;comic=0;fontFamily=Verdana;fontSize=8;" parent="1" vertex="1">
<mxGeometry y="257" width="260" height="15" as="geometry"/>
</mxCell>
<mxCell id="43" value="ECMA Script 6+, 学习新的特性" style="text;html=1;strokeColor=none;fillColor=none;align=right;verticalAlign=middle;whiteSpace=wrap;rounded=0;comic=0;fontFamily=Verdana;fontSize=8;" parent="1" vertex="1">
<mxGeometry y="270" width="260" height="15" as="geometry"/>
</mxCell>
<mxCell id="44" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=8;exitX=0;exitY=0.25;entryX=1;entryY=0.5;endFill=0;dashed=1;" parent="1" source="20" target="39" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="358.5" y="215" as="sourcePoint"/>
<mxPoint x="290" y="187.5" as="targetPoint"/>
<Array as="points">
<mxPoint x="310" y="220"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="45" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=8;exitX=0;exitY=0.25;entryX=1;entryY=0.5;endFill=0;dashed=1;" parent="1" source="20" target="40" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="358.5" y="255" as="sourcePoint"/>
<mxPoint x="270" y="237.5" as="targetPoint"/>
<Array as="points">
<mxPoint x="300" y="230"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="46" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=8;entryX=1;entryY=0.5;endFill=0;dashed=1;exitX=0;exitY=0.5;" parent="1" source="20" target="41" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="350" y="253" as="sourcePoint"/>
<mxPoint x="270" y="250.5" as="targetPoint"/>
<Array as="points">
<mxPoint x="300" y="240"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="47" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=8;exitX=0;exitY=0.75;entryX=1;entryY=0.5;endFill=0;dashed=1;" parent="1" source="20" target="42" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="368.5" y="265" as="sourcePoint"/>
<mxPoint x="280" y="260.5" as="targetPoint"/>
<Array as="points">
<mxPoint x="300" y="250"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="48" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=8;exitX=0;exitY=0.75;entryX=1;entryY=0.5;endFill=0;dashed=1;" parent="1" source="20" target="43" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="378.5" y="275" as="sourcePoint"/>
<mxPoint x="290" y="270.5" as="targetPoint"/>
<Array as="points">
<mxPoint x="290" y="260"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="49" value="jQuery (可选)" style="rounded=1;whiteSpace=wrap;html=1;comic=0;fontFamily=Verdana;fontSize=10;fillColor=#ffffff;strokeColor=#000000;" parent="1" vertex="1">
<mxGeometry x="590" y="262" width="120" height="20" as="geometry"/>
</mxCell>
<mxCell id="50" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=10;exitX=0;exitY=0.5;entryX=1;entryY=0.5;endFill=0;" parent="1" source="49" target="20" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="400" y="140" as="sourcePoint"/>
<mxPoint x="423.5" y="200" as="targetPoint"/>
<Array as="points">
<mxPoint x="560" y="272"/>
<mxPoint x="520" y="240"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="51" value="常用开发技能" style="rounded=1;whiteSpace=wrap;html=1;comic=0;fontFamily=Verdana;fontSize=10;fillColor=#FFFF66;" parent="1" vertex="1">
<mxGeometry x="393.5" y="380" width="170" height="20" as="geometry"/>
</mxCell>
<mxCell id="52" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=10;exitX=0.5;exitY=1;entryX=0.5;entryY=0;endFill=0;" parent="1" source="20" target="51" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="400" y="140" as="sourcePoint"/>
<mxPoint x="423.5" y="200" as="targetPoint"/>
<Array as="points">
<mxPoint x="410" y="300"/>
<mxPoint x="480" y="340"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="15a4b3893f7299b4-52" value="GIT - 版本控制 (GitHub, Bitbucket, GitLab)" style="text;html=1;strokeColor=none;fillColor=none;align=right;verticalAlign=middle;whiteSpace=wrap;rounded=0;comic=0;fontFamily=Verdana;fontSize=8;" parent="1" vertex="1">
<mxGeometry x="30" y="350" width="260" height="15" as="geometry"/>
</mxCell>
<mxCell id="15a4b3893f7299b4-53" value="HTTP/HTTPS 协议" style="text;html=1;strokeColor=none;fillColor=none;align=right;verticalAlign=middle;whiteSpace=wrap;rounded=0;comic=0;fontFamily=Verdana;fontSize=8;" parent="1" vertex="1">
<mxGeometry x="30" y="365" width="260" height="15" as="geometry"/>
</mxCell>
<mxCell id="15a4b3893f7299b4-54" value="学会寻找解决方案" style="text;html=1;strokeColor=none;fillColor=none;align=right;verticalAlign=middle;whiteSpace=wrap;rounded=0;comic=0;fontFamily=Verdana;fontSize=8;" parent="1" vertex="1">
<mxGeometry x="30" y="380" width="260" height="15" as="geometry"/>
</mxCell>
<mxCell id="15a4b3893f7299b4-56" value="数据结构和算法" style="text;html=1;strokeColor=none;fillColor=none;align=right;verticalAlign=middle;whiteSpace=wrap;rounded=0;comic=0;fontFamily=Verdana;fontSize=8;" parent="1" vertex="1">
<mxGeometry x="30" y="410" width="260" height="15" as="geometry"/>
</mxCell>
<mxCell id="15a4b3893f7299b4-57" value="设计模式" style="text;html=1;strokeColor=none;fillColor=none;align=right;verticalAlign=middle;whiteSpace=wrap;rounded=0;comic=0;fontFamily=Verdana;fontSize=8;" parent="1" vertex="1">
<mxGeometry x="30" y="425" width="260" height="15" as="geometry"/>
</mxCell>
<mxCell id="15a4b3893f7299b4-59" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=8;exitX=0;exitY=0.25;entryX=1;entryY=0.5;endFill=0;dashed=1;" parent="1" source="51" target="15a4b3893f7299b4-52" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="358.5" y="265" as="sourcePoint"/>
<mxPoint x="270" y="287.5" as="targetPoint"/>
<Array as="points">
<mxPoint x="350" y="350"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="15a4b3893f7299b4-60" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=8;exitX=0;exitY=0.25;endFill=0;dashed=1;entryX=1;entryY=0.5;" parent="1" source="51" target="15a4b3893f7299b4-53" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="393.5" y="400" as="sourcePoint"/>
<mxPoint x="300" y="380" as="targetPoint"/>
<Array as="points">
<mxPoint x="350" y="365"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="15a4b3893f7299b4-61" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=8;exitX=0;exitY=0.5;entryX=1;entryY=0.5;endFill=0;dashed=1;" parent="1" source="51" target="15a4b3893f7299b4-54" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="393.5" y="412.5" as="sourcePoint"/>
<mxPoint x="290" y="385" as="targetPoint"/>
<Array as="points">
<mxPoint x="340" y="370"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="15a4b3893f7299b4-62" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=8;exitX=0;exitY=0.75;entryX=1;entryY=0.5;endFill=0;dashed=1;" parent="1" source="51" target="15a4b3893f7299b4-56" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="400.5" y="425" as="sourcePoint"/>
<mxPoint x="297" y="397.5" as="targetPoint"/>
<Array as="points">
<mxPoint x="330" y="390"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="15a4b3893f7299b4-63" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=8;exitX=0;exitY=0.75;entryX=1;entryY=0.5;endFill=0;dashed=1;" parent="1" source="51" target="15a4b3893f7299b4-57" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="433.5" y="425" as="sourcePoint"/>
<mxPoint x="330" y="397.5" as="targetPoint"/>
<Array as="points">
<mxPoint x="330" y="395"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="15a4b3893f7299b4-64" value="React" style="rounded=1;whiteSpace=wrap;html=1;comic=0;fontFamily=Verdana;fontSize=14;fillColor=#FFFF66;" parent="1" vertex="1">
<mxGeometry x="420" y="500" width="70" height="25" as="geometry"/>
</mxCell>
<mxCell id="15a4b3893f7299b4-65" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=10;exitX=0.5;exitY=1;entryX=0.5;entryY=0;endFill=0;" parent="1" source="51" target="15a4b3893f7299b4-64" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="603.5" y="440" as="sourcePoint"/>
<mxPoint x="668.5" y="560" as="targetPoint"/>
<Array as="points">
<mxPoint x="479" y="430"/>
<mxPoint x="455" y="460"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="111" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=8;endFill=0;dashed=1;exitX=0;exitY=0.5;entryX=1.006;entryY=0.967;entryPerimeter=0;" parent="1" source="109" target="15a4b3893f7299b4-74" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="337.30952380952385" y="985.3571428571429" as="sourcePoint"/>
<mxPoint x="310" y="910" as="targetPoint"/>
<Array as="points">
<mxPoint x="330" y="943"/>
<mxPoint x="320" y="894"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="15a4b3893f7299b4-66" value="状态管理" style="rounded=1;whiteSpace=wrap;html=1;comic=0;fontFamily=Verdana;fontSize=10;fillColor=#FFFF66;" parent="1" vertex="1">
<mxGeometry x="200" y="707.6666666666665" width="110" height="20" as="geometry"/>
</mxCell>
<mxCell id="15a4b3893f7299b4-68" value="Redux" style="rounded=1;whiteSpace=wrap;html=1;comic=0;fontFamily=Verdana;fontSize=8;fillColor=#FFFF66;" parent="1" vertex="1">
<mxGeometry x="160" y="810" width="70" height="15" as="geometry"/>
</mxCell>
<mxCell id="15a4b3893f7299b4-72" value="MobX" style="rounded=1;whiteSpace=wrap;html=1;comic=0;fontFamily=Verdana;fontSize=8;fillColor=#FFCC99;" parent="1" vertex="1">
<mxGeometry x="240" y="810" width="70" height="15" as="geometry"/>
</mxCell>
<mxCell id="118" value="rematch" style="rounded=1;whiteSpace=wrap;html=1;comic=0;fontFamily=Verdana;fontSize=8;fillColor=#FFCC99;" parent="1" vertex="1">
<mxGeometry x="205" y="1014" width="70" height="15" as="geometry"/>
</mxCell>
<mxCell id="15a4b3893f7299b4-73" value="RxJS" style="rounded=1;whiteSpace=wrap;html=1;comic=0;fontFamily=Verdana;fontSize=8;fillColor=#FFCC99;" parent="1" vertex="1">
<mxGeometry x="23.5" y="1465" width="65" height="15" as="geometry"/>
</mxCell>
<mxCell id="15a4b3893f7299b4-74" value="异步操作" style="rounded=1;whiteSpace=wrap;html=1;comic=0;fontFamily=Verdana;fontSize=10;fillColor=#FFFF66;" parent="1" vertex="1">
<mxGeometry x="212.5" y="874.6666666666665" width="90" height="20" as="geometry"/>
</mxCell>
<mxCell id="15a4b3893f7299b4-75" value="Redux Thunk" style="rounded=1;whiteSpace=wrap;html=1;comic=0;fontFamily=Verdana;fontSize=8;fillColor=#FFCC99;" parent="1" vertex="1">
<mxGeometry x="348.5" y="875.1666666666665" width="100" height="15" as="geometry"/>
</mxCell>
<mxCell id="15a4b3893f7299b4-77" value="Redux Saga" style="rounded=1;whiteSpace=wrap;html=1;comic=0;fontFamily=Verdana;fontSize=8;fillColor=#FFCC99;" parent="1" vertex="1">
<mxGeometry x="348.5" y="915.1666666666665" width="100" height="15" as="geometry"/>
</mxCell>
<mxCell id="109" value="Redux Observable" style="rounded=1;whiteSpace=wrap;html=1;comic=0;fontFamily=Verdana;fontSize=8;fillColor=#FFCC99;" parent="1" vertex="1">
<mxGeometry x="348.5" y="935.6666666666665" width="100" height="15" as="geometry"/>
</mxCell>
<mxCell id="15a4b3893f7299b4-78" value="Redux Better Promise" style="rounded=1;whiteSpace=wrap;html=1;comic=0;fontFamily=Verdana;fontSize=8;fillColor=#FFCC99;" parent="1" vertex="1">
<mxGeometry x="348.5" y="895.1666666666665" width="100" height="15" as="geometry"/>
</mxCell>
<mxCell id="15a4b3893f7299b4-79" value="Data persistence" style="rounded=1;whiteSpace=wrap;html=1;comic=0;fontFamily=Verdana;fontSize=10;fillColor=#CCCCCC;" parent="1" vertex="1">
<mxGeometry x="33.5" y="902.6666666666665" width="110" height="20" as="geometry"/>
</mxCell>
<mxCell id="15a4b3893f7299b4-80" value="Redux Persist" style="rounded=1;whiteSpace=wrap;html=1;comic=0;fontFamily=Verdana;fontSize=8;fillColor=#CCCCCC;" parent="1" vertex="1">
<mxGeometry x="33.5" y="973.1666666666665" width="70" height="15" as="geometry"/>
</mxCell>
<mxCell id="15a4b3893f7299b4-82" value="Redux Phoenix" style="rounded=1;whiteSpace=wrap;html=1;comic=0;fontFamily=Verdana;fontSize=8;fillColor=#CCCCCC;" parent="1" vertex="1">
<mxGeometry x="112.5" y="973.1666666666665" width="70" height="15" as="geometry"/>
</mxCell>
<mxCell id="15a4b3893f7299b4-83" value="包管理器" style="rounded=1;whiteSpace=wrap;html=1;comic=0;fontFamily=Verdana;fontSize=10;fillColor=#FFFF66;" parent="1" vertex="1">
<mxGeometry x="205" y="537.5" width="110" height="20" as="geometry"/>
</mxCell>
<mxCell id="15a4b3893f7299b4-84" value="npm" style="rounded=1;whiteSpace=wrap;html=1;comic=0;fontFamily=Verdana;fontSize=8;fillColor=#FFFF66;" parent="1" vertex="1">
<mxGeometry x="120" y="475" width="45" height="15" as="geometry"/>
</mxCell>
<mxCell id="15a4b3893f7299b4-85" value="Yarn" style="rounded=1;whiteSpace=wrap;html=1;comic=0;fontFamily=Verdana;fontSize=8;fillColor=#FFCC99;" parent="1" vertex="1">
<mxGeometry x="175" y="475" width="45" height="15" as="geometry"/>
</mxCell>
<mxCell id="15a4b3893f7299b4-86" value="pnpm" style="rounded=1;whiteSpace=wrap;html=1;comic=0;fontFamily=Verdana;fontSize=8;fillColor=#CCCCCC;" parent="1" vertex="1">
<mxGeometry x="230" y="475" width="45" height="15" as="geometry"/>
</mxCell>
<mxCell id="15a4b3893f7299b4-88" value="构建工具" style="rounded=1;whiteSpace=wrap;html=1;comic=0;fontFamily=Verdana;fontSize=10;fillColor=#FFFF66;" parent="1" vertex="1">
<mxGeometry x="270" y="597" width="80" height="20" as="geometry"/>
</mxCell>
<mxCell id="15a4b3893f7299b4-91" value="gulp" style="rounded=1;whiteSpace=wrap;html=1;comic=0;fontFamily=Verdana;fontSize=8;fillColor=#CCCCCC;" parent="1" vertex="1">
<mxGeometry x="45" y="680" width="65" height="15" as="geometry"/>
</mxCell>
<mxCell id="15a4b3893f7299b4-92" value="样式" style="rounded=1;whiteSpace=wrap;html=1;comic=0;fontFamily=Verdana;fontSize=10;fillColor=#FFFF66;" parent="1" vertex="1">
<mxGeometry x="517.5" y="605" width="70" height="20" as="geometry"/>
</mxCell>
<mxCell id="15a4b3893f7299b4-93" value="CSS 预处理器" style="rounded=1;whiteSpace=wrap;html=1;comic=0;fontFamily=Verdana;fontSize=10;fillColor=#FFFF66;" parent="1" vertex="1">
<mxGeometry x="615" y="530" width="110" height="20" as="geometry"/>
</mxCell>
<mxCell id="15a4b3893f7299b4-94" value="npm 脚本" style="rounded=1;whiteSpace=wrap;html=1;comic=0;fontFamily=Verdana;fontSize=8;fillColor=#FFFF66;" parent="1" vertex="1">
<mxGeometry x="45" y="660" width="65" height="15" as="geometry"/>
</mxCell>
<mxCell id="15a4b3893f7299b4-95" value="Sass/SCSS" style="rounded=1;whiteSpace=wrap;html=1;comic=0;fontFamily=Verdana;fontSize=8;fillColor=#FFFF66;" parent="1" vertex="1">
<mxGeometry x="520" y="460" width="65" height="15" as="geometry"/>
</mxCell>
<mxCell id="15a4b3893f7299b4-96" value="PostCSS" style="rounded=1;whiteSpace=wrap;html=1;comic=0;fontFamily=Verdana;fontSize=8;fillColor=#FFFF66;" parent="1" vertex="1">
<mxGeometry x="595" y="460" width="65" height="15" as="geometry"/>
</mxCell>
<mxCell id="15a4b3893f7299b4-97" value="Less" style="rounded=1;whiteSpace=wrap;html=1;comic=0;fontFamily=Verdana;fontSize=8;fillColor=#CCCCCC;" parent="1" vertex="1">
<mxGeometry x="670" y="460" width="65" height="15" as="geometry"/>
</mxCell>
<mxCell id="15a4b3893f7299b4-100" value="Stylus" style="rounded=1;whiteSpace=wrap;html=1;comic=0;fontFamily=Verdana;fontSize=8;fillColor=#CCCCCC;" parent="1" vertex="1">
<mxGeometry x="745" y="460" width="65" height="15" as="geometry"/>
</mxCell>
<mxCell id="15a4b3893f7299b4-101" value="任务运行器" style="rounded=1;whiteSpace=wrap;html=1;comic=0;fontFamily=Verdana;fontSize=10;fillColor=#FFFF66;" parent="1" vertex="1">
<mxGeometry x="177.5" y="659" width="80" height="20" as="geometry"/>
</mxCell>
<mxCell id="15a4b3893f7299b4-102" value="Webpack" style="rounded=1;whiteSpace=wrap;html=1;comic=0;fontFamily=Verdana;fontSize=8;fillColor=#FFFF66;" parent="1" vertex="1">
<mxGeometry x="73" y="550" width="65" height="15" as="geometry"/>
</mxCell>
<mxCell id="15a4b3893f7299b4-103" value="Rollup" style="rounded=1;whiteSpace=wrap;html=1;comic=0;fontFamily=Verdana;fontSize=8;fillColor=#CCCCCC;" parent="1" vertex="1">
<mxGeometry x="72.5" y="570" width="65" height="15" as="geometry"/>
</mxCell>
<mxCell id="15a4b3893f7299b4-104" value="Parcel" style="rounded=1;whiteSpace=wrap;html=1;comic=0;fontFamily=Verdana;fontSize=8;fillColor=#CCCCCC;" parent="1" vertex="1">
<mxGeometry x="72.5" y="590" width="65" height="15" as="geometry"/>
</mxCell>
<mxCell id="15a4b3893f7299b4-105" value="CSS 框架" style="rounded=1;whiteSpace=wrap;html=1;comic=0;fontFamily=Verdana;fontSize=10;fillColor=#FFCC99;" parent="1" vertex="1">
<mxGeometry x="685" y="605" width="110" height="20" as="geometry"/>
</mxCell>
<mxCell id="15a4b3893f7299b4-106" value="Bootstrap" style="rounded=1;whiteSpace=wrap;html=1;comic=0;fontFamily=Verdana;fontSize=8;fillColor=#FFCC99;" parent="1" vertex="1">
<mxGeometry x="870" y="555" width="90" height="15" as="geometry"/>
</mxCell>
<mxCell id="15a4b3893f7299b4-107" value="Materialize MaterialUI<br>Material Design Lite" style="rounded=1;whiteSpace=wrap;html=1;comic=0;fontFamily=Verdana;fontSize=8;fillColor=#FFCC99;" parent="1" vertex="1">
<mxGeometry x="870" y="575" width="90" height="35" as="geometry"/>
</mxCell>
<mxCell id="15a4b3893f7299b4-108" value="Bulma" style="rounded=1;whiteSpace=wrap;html=1;comic=0;fontFamily=Verdana;fontSize=8;fillColor=#CCCCCC;" parent="1" vertex="1">
<mxGeometry x="870" y="615" width="90" height="15" as="geometry"/>
</mxCell>
<mxCell id="15a4b3893f7299b4-109" value="Semantic UI" style="rounded=1;whiteSpace=wrap;html=1;comic=0;fontFamily=Verdana;fontSize=8;fillColor=#CCCCCC;" parent="1" vertex="1">
<mxGeometry x="870" y="635" width="90" height="15" as="geometry"/>
</mxCell>
<mxCell id="15a4b3893f7299b4-110" value="测试" style="rounded=1;whiteSpace=wrap;html=1;comic=0;fontFamily=Verdana;fontSize=10;fillColor=#FFFF66;" parent="1" vertex="1">
<mxGeometry x="533" y="1335" width="70" height="20" as="geometry"/>
</mxCell>
<mxCell id="15a4b3893f7299b4-111" value="API 客户端" style="rounded=1;whiteSpace=wrap;html=1;comic=0;fontFamily=Verdana;fontSize=10;fillColor=#FFFF66;" parent="1" vertex="1">
<mxGeometry x="237.5" y="1144.3333333333333" width="70" height="20" as="geometry"/>
</mxCell>
<mxCell id="15a4b3893f7299b4-114" value="服务器端渲染(SSR)" style="rounded=1;whiteSpace=wrap;html=1;comic=0;fontFamily=Verdana;fontSize=10;fillColor=#FFCC99;" parent="1" vertex="1">
<mxGeometry x="207.5" y="1646.5" width="130" height="20" as="geometry"/>
</mxCell>
<mxCell id="15a4b3893f7299b4-116" value="类型检查器" style="rounded=1;whiteSpace=wrap;html=1;comic=0;fontFamily=Verdana;fontSize=10;fillColor=#FFFF66;" parent="1" vertex="1">
<mxGeometry x="622.5" y="955" width="130" height="20" as="geometry"/>
</mxCell>
<mxCell id="15a4b3893f7299b4-117" value="CSS 架构" style="rounded=1;whiteSpace=wrap;html=1;comic=0;fontFamily=Verdana;fontSize=10;fillColor=#FFFF66;" parent="1" vertex="1">
<mxGeometry x="665" y="727.5" width="130" height="20" as="geometry"/>
</mxCell>
<mxCell id="15a4b3893f7299b4-118" value="CSS in JS" style="rounded=1;whiteSpace=wrap;html=1;comic=0;fontFamily=Verdana;fontSize=10;fillColor=#FFCC99;" parent="1" vertex="1">
<mxGeometry x="490" y="730" width="80" height="20" as="geometry"/>
</mxCell>
<mxCell id="15a4b3893f7299b4-119" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=10;exitX=0.5;exitY=1;endFill=0;fillColor=#FFFFFF;strokeColor=#000000;" parent="1" source="15a4b3893f7299b4-64" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="488.5" y="410" as="sourcePoint"/>
<mxPoint x="440" y="1850" as="targetPoint"/>
<Array as="points">
<mxPoint x="455" y="560"/>
<mxPoint x="420" y="700"/>
<mxPoint x="490" y="960"/>
<mxPoint x="420" y="1280"/>
<mxPoint x="490" y="1610"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="15a4b3893f7299b4-120" value="" style="curved=1;endArrow=none;html=1;dashed=1;fontFamily=Verdana;fontSize=14;endFill=0;entryX=0;entryY=0.5;" parent="1" target="15a4b3893f7299b4-121" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="440" y="1850" as="sourcePoint"/>
<mxPoint x="590" y="1550" as="targetPoint"/>
<Array as="points">
<mxPoint x="410" y="1950"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="15a4b3893f7299b4-121" value="坚持学习 :)" style="text;html=1;strokeColor=#000000;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=1;comic=0;fontFamily=Verdana;fontSize=14;labelBorderColor=none;glass=0;arcSize=50;perimeterSpacing=1;" parent="1" vertex="1">
<mxGeometry x="573" y="1900" width="147" height="28" as="geometry"/>
</mxCell>
<mxCell id="15a4b3893f7299b4-124" value="BEM" style="rounded=1;whiteSpace=wrap;html=1;comic=0;fontFamily=Verdana;fontSize=8;fillColor=#FFFF66;" parent="1" vertex="1">
<mxGeometry x="870" y="740" width="70" height="15" as="geometry"/>
</mxCell>
<mxCell id="15a4b3893f7299b4-125" value="Atomic" style="rounded=1;whiteSpace=wrap;html=1;comic=0;fontFamily=Verdana;fontSize=8;fillColor=#CCCCCC;" parent="1" vertex="1">
<mxGeometry x="870" y="780" width="70" height="15" as="geometry"/>
</mxCell>
<mxCell id="15a4b3893f7299b4-127" value="OOCSS" style="rounded=1;whiteSpace=wrap;html=1;comic=0;fontFamily=Verdana;fontSize=8;fillColor=#CCCCCC;" parent="1" vertex="1">
<mxGeometry x="870" y="800" width="70" height="15" as="geometry"/>
</mxCell>
<mxCell id="15a4b3893f7299b4-128" value="SMACSS" style="rounded=1;whiteSpace=wrap;html=1;comic=0;fontFamily=Verdana;fontSize=8;fillColor=#CCCCCC;" parent="1" vertex="1">
<mxGeometry x="870" y="820" width="70" height="15" as="geometry"/>
</mxCell>
<mxCell id="15a4b3893f7299b4-129" value="SUITCSS" style="rounded=1;whiteSpace=wrap;html=1;comic=0;fontFamily=Verdana;fontSize=8;fillColor=#CCCCCC;" parent="1" vertex="1">
<mxGeometry x="870" y="840" width="70" height="15" as="geometry"/>
</mxCell>
<mxCell id="15a4b3893f7299b4-130" value="CSS Modules" style="rounded=1;whiteSpace=wrap;html=1;comic=0;fontFamily=Verdana;fontSize=8;fillColor=#FFCC99;" parent="1" vertex="1">
<mxGeometry x="870" y="760" width="70" height="15" as="geometry"/>
</mxCell>
<mxCell id="15a4b3893f7299b4-131" value="Styled Components" style="rounded=1;whiteSpace=wrap;html=1;comic=0;fontFamily=Verdana;fontSize=8;fillColor=#FFCC99;" parent="1" vertex="1">
<mxGeometry x="590" y="795" width="100" height="15" as="geometry"/>
</mxCell>
<mxCell id="15a4b3893f7299b4-132" value="Radium" style="rounded=1;whiteSpace=wrap;html=1;comic=0;fontFamily=Verdana;fontSize=8;fillColor=#FFCC99;" parent="1" vertex="1">
<mxGeometry x="590" y="815" width="100" height="15" as="geometry"/>
</mxCell>
<mxCell id="15a4b3893f7299b4-133" value="Emotion" style="rounded=1;whiteSpace=wrap;html=1;comic=0;fontFamily=Verdana;fontSize=8;fillColor=#FFCC99;" parent="1" vertex="1">
<mxGeometry x="590" y="835" width="100" height="15" as="geometry"/>
</mxCell>
<mxCell id="15a4b3893f7299b4-134" value="JSS" style="rounded=1;whiteSpace=wrap;html=1;comic=0;fontFamily=Verdana;fontSize=8;fillColor=#CCCCCC;" parent="1" vertex="1">
<mxGeometry x="590" y="855" width="100" height="15" as="geometry"/>
</mxCell>
<mxCell id="15a4b3893f7299b4-135" value="Aphrodite" style="rounded=1;whiteSpace=wrap;html=1;comic=0;fontFamily=Verdana;fontSize=8;fillColor=#CCCCCC;" parent="1" vertex="1">
<mxGeometry x="590" y="875" width="100" height="15" as="geometry"/>
</mxCell>
<mxCell id="15a4b3893f7299b4-136" value="fetch (原生)" style="rounded=1;whiteSpace=wrap;html=1;comic=0;fontFamily=Verdana;fontSize=8;fillColor=#FFFF66;" parent="1" vertex="1">
<mxGeometry x="8" y="1213.8333333333333" width="65" height="15" as="geometry"/>
</mxCell>
<mxCell id="15a4b3893f7299b4-137" value="SuperAgent" style="rounded=1;whiteSpace=wrap;html=1;comic=0;fontFamily=Verdana;fontSize=8;fillColor=#FFCC99;" parent="1" vertex="1">
<mxGeometry x="8" y="1233.8333333333333" width="65" height="15" as="geometry"/>
</mxCell>
<mxCell id="15a4b3893f7299b4-138" value="axios" style="rounded=1;whiteSpace=wrap;html=1;comic=0;fontFamily=Verdana;fontSize=8;fillColor=#FFCC99;" parent="1" vertex="1">
<mxGeometry x="8" y="1253.8333333333333" width="65" height="15" as="geometry"/>
</mxCell>
<mxCell id="15a4b3893f7299b4-140" value="PropTypes" style="rounded=1;whiteSpace=wrap;html=1;comic=0;fontFamily=Verdana;fontSize=8;fillColor=#FFFF66;" parent="1" vertex="1">
<mxGeometry x="582.5" y="1035" width="65" height="15" as="geometry"/>
</mxCell>
<mxCell id="15a4b3893f7299b4-141" value="TypeScript" style="rounded=1;whiteSpace=wrap;html=1;comic=0;fontFamily=Verdana;fontSize=8;fillColor=#FFCC99;" parent="1" vertex="1">
<mxGeometry x="657.5" y="1035" width="65" height="15" as="geometry"/>
</mxCell>
<mxCell id="15a4b3893f7299b4-142" value="Flow" style="rounded=1;whiteSpace=wrap;html=1;comic=0;fontFamily=Verdana;fontSize=8;fillColor=#FFCC99;" parent="1" vertex="1">
<mxGeometry x="732.5" y="1035" width="65" height="15" as="geometry"/>
</mxCell>
<mxCell id="15a4b3893f7299b4-144" value="单元(Unit)测试" style="rounded=1;whiteSpace=wrap;html=1;comic=0;fontFamily=Verdana;fontSize=10;fillColor=#FFFF66;" parent="1" vertex="1">
<mxGeometry x="665" y="1242" width="85" height="20" as="geometry"/>
</mxCell>
<mxCell id="15a4b3893f7299b4-145" value="Jest" style="rounded=1;whiteSpace=wrap;html=1;comic=0;fontFamily=Verdana;fontSize=8;fillColor=#FFFF66;" parent="1" vertex="1">
<mxGeometry x="855" y="1216.5" width="65" height="15" as="geometry"/>
</mxCell>
<mxCell id="15a4b3893f7299b4-146" value="Enzyme" style="rounded=1;whiteSpace=wrap;html=1;comic=0;fontFamily=Verdana;fontSize=8;fillColor=#FFFF66;" parent="1" vertex="1">
<mxGeometry x="855" y="1236.5" width="65" height="15" as="geometry"/>
</mxCell>
<mxCell id="15a4b3893f7299b4-148" value="Sinon" style="rounded=1;whiteSpace=wrap;html=1;comic=0;fontFamily=Verdana;fontSize=8;fillColor=#FFFF66;" parent="1" vertex="1">
<mxGeometry x="855" y="1256.5" width="65" height="15" as="geometry"/>
</mxCell>
<mxCell id="15a4b3893f7299b4-149" value="Mocha" style="rounded=1;whiteSpace=wrap;html=1;comic=0;fontFamily=Verdana;fontSize=8;fillColor=#FFCC99;" parent="1" vertex="1">
<mxGeometry x="855" y="1276.5" width="65" height="15" as="geometry"/>
</mxCell>
<mxCell id="15a4b3893f7299b4-150" value="Chai" style="rounded=1;whiteSpace=wrap;html=1;comic=0;fontFamily=Verdana;fontSize=8;fillColor=#FFCC99;" parent="1" vertex="1">
<mxGeometry x="855" y="1296.5" width="65" height="15" as="geometry"/>
</mxCell>
<mxCell id="15a4b3893f7299b4-151" value="AVA" style="rounded=1;whiteSpace=wrap;html=1;comic=0;fontFamily=Verdana;fontSize=8;fillColor=#CCCCCC;" parent="1" vertex="1">
<mxGeometry x="855" y="1316.5" width="65" height="15" as="geometry"/>
</mxCell>
<mxCell id="15a4b3893f7299b4-152" value="Tape" style="rounded=1;whiteSpace=wrap;html=1;comic=0;fontFamily=Verdana;fontSize=8;fillColor=#CCCCCC;" parent="1" vertex="1">
<mxGeometry x="855" y="1336.5" width="65" height="15" as="geometry"/>
</mxCell>
<mxCell id="15a4b3893f7299b4-153" value="集成测试" style="rounded=1;whiteSpace=wrap;html=1;comic=0;fontFamily=Verdana;fontSize=10;fillColor=#FFCC99;" parent="1" vertex="1">
<mxGeometry x="677.5" y="1392" width="120" height="20" as="geometry"/>
</mxCell>
<mxCell id="15a4b3893f7299b4-154" value="Karma" style="rounded=1;whiteSpace=wrap;html=1;comic=0;fontFamily=Verdana;fontSize=8;fillColor=#FFCC99;" parent="1" vertex="1">
<mxGeometry x="877.5" y="1434.5" width="65" height="15" as="geometry"/>
</mxCell>
<mxCell id="15a4b3893f7299b4-155" value="端到端(E2E)测试" style="rounded=1;whiteSpace=wrap;html=1;comic=0;fontFamily=Verdana;fontSize=10;fillColor=#FFFF66;" parent="1" vertex="1">
<mxGeometry x="502.5" y="1460" width="85" height="20" as="geometry"/>
</mxCell>
<mxCell id="15a4b3893f7299b4-156" value="Cypress" style="rounded=1;whiteSpace=wrap;html=1;comic=0;fontFamily=Verdana;fontSize=8;fillColor=#FFCC99;" parent="1" vertex="1">
<mxGeometry x="715" y="1467" width="80" height="15" as="geometry"/>
</mxCell>
<mxCell id="15a4b3893f7299b4-157" value="Cucumber.js" style="rounded=1;whiteSpace=wrap;html=1;comic=0;fontFamily=Verdana;fontSize=8;fillColor=#FFCC99;" parent="1" vertex="1">
<mxGeometry x="715" y="1507" width="80" height="15" as="geometry"/>
</mxCell>
<mxCell id="15a4b3893f7299b4-158" value="Puppeteer" style="rounded=1;whiteSpace=wrap;html=1;comic=0;fontFamily=Verdana;fontSize=8;fillColor=#FFCC99;" parent="1" vertex="1">
<mxGeometry x="715" y="1487" width="80" height="15" as="geometry"/>
</mxCell>
<mxCell id="15a4b3893f7299b4-159" value="Next.js" style="rounded=1;whiteSpace=wrap;html=1;comic=0;fontFamily=Verdana;fontSize=8;fillColor=#FFCC99;" parent="1" vertex="1">
<mxGeometry x="35" y="1648.8333333333333" width="65" height="15" as="geometry"/>
</mxCell>
<mxCell id="15a4b3893f7299b4-160" value="After.js" style="rounded=1;whiteSpace=wrap;html=1;comic=0;fontFamily=Verdana;fontSize=8;fillColor=#CCCCCC;" parent="1" vertex="1">
<mxGeometry x="35" y="1668.8333333333333" width="65" height="15" as="geometry"/>
</mxCell>
<mxCell id="15a4b3893f7299b4-161" value="后端集成框架" style="rounded=1;whiteSpace=wrap;html=1;comic=0;fontFamily=Verdana;fontSize=10;fillColor=#CCCCCC;" parent="1" vertex="1">
<mxGeometry x="215" y="1720" width="130" height="30" as="geometry"/>
</mxCell>
<mxCell id="15a4b3893f7299b4-162" value="React on Rails" style="rounded=1;whiteSpace=wrap;html=1;comic=0;fontFamily=Verdana;fontSize=8;fillColor=#CCCCCC;" parent="1" vertex="1">
<mxGeometry x="25" y="1767.5" width="90" height="15" as="geometry"/>
</mxCell>
<mxCell id="15a4b3893f7299b4-163" value="" style="ellipse;whiteSpace=wrap;html=1;aspect=fixed;rounded=1;comic=0;strokeColor=#000000;fillColor=#FFFFFF;fontFamily=Verdana;fontSize=14;align=center;" parent="1" vertex="1">
<mxGeometry x="434" y="585" width="23" height="23" as="geometry"/>
</mxCell>
<mxCell id="15a4b3893f7299b4-166" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=10;exitX=1;exitY=0.5;entryX=0;entryY=0.5;endFill=0;" parent="1" source="15a4b3893f7299b4-88" target="15a4b3893f7299b4-163" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="346.33333333333326" y="654.8333333333334" as="sourcePoint"/>
<mxPoint x="323" y="754.8333333333333" as="targetPoint"/>
<Array as="points">
<mxPoint x="390" y="590"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="15a4b3893f7299b4-167" value="" style="ellipse;whiteSpace=wrap;html=1;aspect=fixed;rounded=1;comic=0;strokeColor=#000000;fillColor=#FFFFFF;fontFamily=Verdana;fontSize=14;align=center;" parent="1" vertex="1">
<mxGeometry x="423" y="637" width="23" height="23" as="geometry"/>
</mxCell>
<mxCell id="15a4b3893f7299b4-168" value="" style="ellipse;whiteSpace=wrap;html=1;aspect=fixed;rounded=1;comic=0;strokeColor=#000000;fillColor=#FFFFFF;fontFamily=Verdana;fontSize=14;align=center;" parent="1" vertex="1">
<mxGeometry x="434" y="779.5" width="23" height="23" as="geometry"/>
</mxCell>
<mxCell id="15a4b3893f7299b4-169" value="" style="ellipse;whiteSpace=wrap;html=1;aspect=fixed;rounded=1;comic=0;strokeColor=#000000;fillColor=#FFFFFF;fontFamily=Verdana;fontSize=14;align=center;" parent="1" vertex="1">
<mxGeometry x="461" y="957.5" width="23" height="23" as="geometry"/>
</mxCell>
<mxCell id="15a4b3893f7299b4-170" value="" style="ellipse;whiteSpace=wrap;html=1;aspect=fixed;rounded=1;comic=0;strokeColor=#000000;fillColor=#FFFFFF;fontFamily=Verdana;fontSize=14;align=center;" parent="1" vertex="1">
<mxGeometry x="436" y="1155" width="23" height="23" as="geometry"/>
</mxCell>
<mxCell id="15a4b3893f7299b4-171" value="" style="ellipse;whiteSpace=wrap;html=1;aspect=fixed;rounded=1;comic=0;strokeColor=#000000;fillColor=#FFFFFF;fontFamily=Verdana;fontSize=14;align=center;" parent="1" vertex="1">
<mxGeometry x="445" y="1442.5" width="23" height="23" as="geometry"/>
</mxCell>
<mxCell id="15a4b3893f7299b4-172" value="" style="ellipse;whiteSpace=wrap;html=1;aspect=fixed;rounded=1;comic=0;strokeColor=#000000;fillColor=#FFFFFF;fontFamily=Verdana;fontSize=14;align=center;" parent="1" vertex="1">
<mxGeometry x="429" y="1325" width="23" height="23" as="geometry"/>
</mxCell>
<mxCell id="15a4b3893f7299b4-173" value="" style="ellipse;whiteSpace=wrap;html=1;aspect=fixed;rounded=1;comic=0;strokeColor=#000000;fillColor=#FFFFFF;fontFamily=Verdana;fontSize=14;align=center;" parent="1" vertex="1">
<mxGeometry x="453.5" y="1501" width="23" height="23" as="geometry"/>
</mxCell>
<mxCell id="15a4b3893f7299b4-174" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=10;exitX=0.5;exitY=1;entryX=0.5;entryY=0;endFill=0;" parent="1" source="15a4b3893f7299b4-83" target="15a4b3893f7299b4-88" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="360.33333333333326" y="617" as="sourcePoint"/>
<mxPoint x="444.33333333333326" y="606.3333333333333" as="targetPoint"/>
<Array as="points">
<mxPoint x="270" y="570"/>
<mxPoint x="310" y="580"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="15a4b3893f7299b4-175" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=10;exitX=0.5;exitY=0;entryX=0.5;entryY=1;endFill=0;" parent="1" source="15a4b3893f7299b4-101" target="15a4b3893f7299b4-88" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="270.33333333333326" y="567.6666666666667" as="sourcePoint"/>
<mxPoint x="320.33333333333326" y="607" as="targetPoint"/>
<Array as="points">
<mxPoint x="230" y="630"/>
<mxPoint x="300" y="659"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="15a4b3893f7299b4-176" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=10;exitX=1;exitY=0.5;entryX=0;entryY=0.5;endFill=0;" parent="1" source="15a4b3893f7299b4-167" target="15a4b3893f7299b4-92" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="360.33333333333326" y="617" as="sourcePoint"/>
<mxPoint x="444.33333333333326" y="606.3333333333333" as="targetPoint"/>
<Array as="points">
<mxPoint x="480" y="648"/>
<mxPoint x="500" y="615"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="15a4b3893f7299b4-177" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=8;exitX=0.25;exitY=0;entryX=0.5;entryY=1;endFill=0;dashed=1;" parent="1" source="15a4b3893f7299b4-83" target="15a4b3893f7299b4-84" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="256.66666666666674" y="515" as="sourcePoint"/>
<mxPoint x="153.33333333333326" y="537.6666666666666" as="targetPoint"/>
<Array as="points">
<mxPoint x="210" y="520"/>
<mxPoint x="150" y="520"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="15a4b3893f7299b4-178" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=8;exitX=0.5;exitY=0;entryX=0.5;entryY=1;endFill=0;dashed=1;" parent="1" source="15a4b3893f7299b4-83" target="15a4b3893f7299b4-85" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="242.33333333333326" y="547.6666666666667" as="sourcePoint"/>
<mxPoint x="152.33333333333326" y="500.33333333333326" as="targetPoint"/>
<Array as="points">
<mxPoint x="240" y="520"/>
<mxPoint x="198" y="510"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="15a4b3893f7299b4-179" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=8;exitX=0.75;exitY=0;entryX=0.5;entryY=1;endFill=0;dashed=1;" parent="1" source="15a4b3893f7299b4-83" target="15a4b3893f7299b4-86" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="377.83333333333326" y="530.1666666666667" as="sourcePoint"/>
<mxPoint x="315.16666666666674" y="482.83333333333326" as="targetPoint"/>
<Array as="points">
<mxPoint x="288" y="520"/>
<mxPoint x="252" y="510"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="15a4b3893f7299b4-180" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=8;exitX=0;exitY=0.25;entryX=1;entryY=0.5;endFill=0;dashed=1;" parent="1" source="15a4b3893f7299b4-88" target="15a4b3893f7299b4-102" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="242.33333333333326" y="547.6666666666667" as="sourcePoint"/>
<mxPoint x="152.33333333333326" y="500.33333333333326" as="targetPoint"/>
<Array as="points">
<mxPoint x="220" y="600"/>
<mxPoint x="180" y="558"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="15a4b3893f7299b4-181" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=8;entryX=1;entryY=0.5;endFill=0;dashed=1;exitX=0;exitY=0.5;" parent="1" source="15a4b3893f7299b4-88" target="15a4b3893f7299b4-103" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="260" y="620" as="sourcePoint"/>
<mxPoint x="148.33333333333326" y="567.6666666666667" as="targetPoint"/>
<Array as="points">
<mxPoint x="220" y="610"/>
<mxPoint x="170" y="578"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="15a4b3893f7299b4-182" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=8;entryX=1;entryY=0.5;endFill=0;dashed=1;exitX=0;exitY=0.75;" parent="1" source="15a4b3893f7299b4-88" target="15a4b3893f7299b4-104" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="280.33333333333326" y="617" as="sourcePoint"/>
<mxPoint x="147.66666666666674" y="587.6666666666667" as="targetPoint"/>
<Array as="points">
<mxPoint x="210" y="620"/>
<mxPoint x="180" y="598"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="15a4b3893f7299b4-183" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=8;endFill=0;dashed=1;exitX=0;exitY=0.25;entryX=1;entryY=0.5;" parent="1" source="15a4b3893f7299b4-101" target="15a4b3893f7299b4-94" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="280.33333333333326" y="622.3333333333333" as="sourcePoint"/>
<mxPoint x="130" y="664" as="targetPoint"/>
<Array as="points">
<mxPoint x="140" y="650"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="15a4b3893f7299b4-184" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=8;endFill=0;dashed=1;exitX=0;exitY=0.75;entryX=1;entryY=0.5;" parent="1" source="15a4b3893f7299b4-101" target="15a4b3893f7299b4-91" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="187.66666666666674" y="674.3333333333333" as="sourcePoint"/>
<mxPoint x="120.33333333333326" y="677.6666666666667" as="targetPoint"/>
<Array as="points">
<mxPoint x="140" y="669"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="15a4b3893f7299b4-185" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=10;exitX=0.5;exitY=0;endFill=0;entryX=0.5;entryY=1;" parent="1" source="15a4b3893f7299b4-92" target="15a4b3893f7299b4-93" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="456.33333333333326" y="658.3333333333333" as="sourcePoint"/>
<mxPoint x="650" y="600" as="targetPoint"/>
<Array as="points">
<mxPoint x="552" y="580"/>
<mxPoint x="670" y="580"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="15a4b3893f7299b4-186" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=10;exitX=1;exitY=0.5;endFill=0;entryX=0;entryY=0.5;" parent="1" source="15a4b3893f7299b4-92" target="15a4b3893f7299b4-105" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="568.8333333333333" y="713.5" as="sourcePoint"/>
<mxPoint x="686.8333333333333" y="658.8333333333333" as="targetPoint"/>
<Array as="points">
<mxPoint x="630" y="600"/>
<mxPoint x="670" y="620"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="15a4b3893f7299b4-187" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=10;endFill=0;entryX=0.5;entryY=0;exitX=0.25;exitY=1;" parent="1" source="15a4b3893f7299b4-92" target="15a4b3893f7299b4-118" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="540" y="670" as="sourcePoint"/>
<mxPoint x="695" y="625" as="targetPoint"/>
<Array as="points">
<mxPoint x="530" y="650"/>
<mxPoint x="550" y="690"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="15a4b3893f7299b4-188" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=10;endFill=0;exitX=0.75;exitY=1;entryX=0.5;entryY=0;" parent="1" source="15a4b3893f7299b4-92" target="15a4b3893f7299b4-117" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="545" y="635" as="sourcePoint"/>
<mxPoint x="730" y="700" as="targetPoint"/>
<Array as="points">
<mxPoint x="570" y="660"/>
<mxPoint x="730" y="690"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="15a4b3893f7299b4-189" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=8;entryX=0.5;entryY=1;endFill=0;dashed=1;exitX=0.25;exitY=0;" parent="1" source="15a4b3893f7299b4-93" target="15a4b3893f7299b4-95" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="610" y="510" as="sourcePoint"/>
<mxPoint x="544.8333333333333" y="502.83333333333326" as="targetPoint"/>
<Array as="points">
<mxPoint x="640" y="510"/>
<mxPoint x="552" y="500"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="15a4b3893f7299b4-190" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=8;entryX=0.5;entryY=1;endFill=0;dashed=1;exitX=0.4;exitY=0.05;exitPerimeter=0;" parent="1" source="15a4b3893f7299b4-93" target="15a4b3893f7299b4-96" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="652.3333333333333" y="540.3333333333333" as="sourcePoint"/>
<mxPoint x="562.3333333333333" y="485" as="targetPoint"/>
<Array as="points">
<mxPoint x="660" y="510"/>
<mxPoint x="628" y="500"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="15a4b3893f7299b4-191" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=8;entryX=0.5;entryY=1;endFill=0;dashed=1;exitX=0.6;exitY=0.083;exitPerimeter=0;" parent="1" source="15a4b3893f7299b4-93" target="15a4b3893f7299b4-97" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="680.3333333333333" y="540.3333333333333" as="sourcePoint"/>
<mxPoint x="637.6666666666667" y="485" as="targetPoint"/>
<Array as="points">
<mxPoint x="681" y="510"/>
<mxPoint x="702" y="500"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="15a4b3893f7299b4-192" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=8;entryX=0.5;entryY=1;endFill=0;dashed=1;exitX=0.75;exitY=0;" parent="1" source="15a4b3893f7299b4-93" target="15a4b3893f7299b4-100" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="720" y="520" as="sourcePoint"/>
<mxPoint x="712.3333333333333" y="485" as="targetPoint"/>
<Array as="points">
<mxPoint x="712" y="500"/>
<mxPoint x="770" y="500"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="15a4b3893f7299b4-193" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=8;entryX=0;entryY=0.5;endFill=0;dashed=1;exitX=0.75;exitY=0;" parent="1" source="15a4b3893f7299b4-105" target="15a4b3893f7299b4-106" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="755.1666666666667" y="589.8333333333333" as="sourcePoint"/>
<mxPoint x="835.1666666666667" y="534.5" as="targetPoint"/>
<Array as="points">
<mxPoint x="770" y="570"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="15a4b3893f7299b4-194" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=8;entryX=0;entryY=0.5;endFill=0;dashed=1;exitX=0.75;exitY=1;" parent="1" source="15a4b3893f7299b4-105" target="15a4b3893f7299b4-109" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="717.6666666666667" y="550.3333333333333" as="sourcePoint"/>
<mxPoint x="797.6666666666667" y="495" as="targetPoint"/>
<Array as="points">
<mxPoint x="780" y="660"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="15a4b3893f7299b4-195" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=8;entryX=0;entryY=0.5;endFill=0;dashed=1;exitX=1;exitY=0.25;" parent="1" source="15a4b3893f7299b4-105" target="15a4b3893f7299b4-107" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="727.6666666666667" y="560.3333333333333" as="sourcePoint"/>
<mxPoint x="807.6666666666667" y="505" as="targetPoint"/>
<Array as="points">
<mxPoint x="820" y="610"/>
<mxPoint x="840" y="592"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="15a4b3893f7299b4-196" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=8;entryX=0;entryY=0.5;endFill=0;dashed=1;exitX=1;exitY=0.75;" parent="1" source="15a4b3893f7299b4-105" target="15a4b3893f7299b4-108" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="805" y="620.3333333333333" as="sourcePoint"/>
<mxPoint x="880.3333333333333" y="602.3333333333333" as="targetPoint"/>
<Array as="points">
<mxPoint x="820" y="615"/>
<mxPoint x="850" y="622"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="15a4b3893f7299b4-197" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=8;entryX=0;entryY=0.5;endFill=0;dashed=1;exitX=1;exitY=0.25;" parent="1" source="15a4b3893f7299b4-117" target="15a4b3893f7299b4-124" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="815" y="630.3333333333333" as="sourcePoint"/>
<mxPoint x="890.3333333333333" y="612.3333333333333" as="targetPoint"/>
<Array as="points">
<mxPoint x="820" y="730"/>
<mxPoint x="850" y="748"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="15a4b3893f7299b4-198" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=8;entryX=0;entryY=0.5;endFill=0;dashed=1;exitX=1;exitY=0.5;" parent="1" source="15a4b3893f7299b4-117" target="15a4b3893f7299b4-130" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="805" y="742.3333333333333" as="sourcePoint"/>
<mxPoint x="880.3333333333333" y="757.6666666666667" as="targetPoint"/>
<Array as="points">
<mxPoint x="820" y="740"/>
<mxPoint x="850" y="768"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="15a4b3893f7299b4-199" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=8;entryX=0;entryY=0.5;endFill=0;dashed=1;exitX=1;exitY=0.75;" parent="1" source="15a4b3893f7299b4-117" target="15a4b3893f7299b4-125" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="805" y="747.6666666666667" as="sourcePoint"/>
<mxPoint x="880.3333333333333" y="777.6666666666667" as="targetPoint"/>
<Array as="points">
<mxPoint x="820" y="750"/>
<mxPoint x="850" y="788"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="15a4b3893f7299b4-200" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=8;entryX=0;entryY=0.5;endFill=0;dashed=1;exitX=0.75;exitY=1;" parent="1" source="15a4b3893f7299b4-117" target="15a4b3893f7299b4-127" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="805" y="752.3333333333333" as="sourcePoint"/>
<mxPoint x="880.3333333333333" y="797.6666666666667" as="targetPoint"/>
<Array as="points">
<mxPoint x="762" y="780"/>
<mxPoint x="810" y="808"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="15a4b3893f7299b4-201" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=8;entryX=0;entryY=0.5;endFill=0;dashed=1;exitX=0.5;exitY=1;" parent="1" source="15a4b3893f7299b4-117" target="15a4b3893f7299b4-128" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="815" y="762.3333333333333" as="sourcePoint"/>
<mxPoint x="890.3333333333333" y="807.6666666666667" as="targetPoint"/>
<Array as="points">
<mxPoint x="730" y="790"/>
<mxPoint x="800" y="828"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="15a4b3893f7299b4-202" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=8;entryX=0;entryY=0.5;endFill=0;dashed=1;exitX=0.25;exitY=1;" parent="1" source="15a4b3893f7299b4-117" target="15a4b3893f7299b4-129" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="740.3333333333333" y="757.6666666666667" as="sourcePoint"/>
<mxPoint x="880.3333333333333" y="837.6666666666667" as="targetPoint"/>
<Array as="points">
<mxPoint x="698" y="810"/>
<mxPoint x="810" y="850"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="15a4b3893f7299b4-203" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=10;entryX=0;entryY=0.5;endFill=0;exitX=1;exitY=0.5;" parent="1" source="15a4b3893f7299b4-66" target="15a4b3893f7299b4-168" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="330" y="780" as="sourcePoint"/>
<mxPoint x="372.33333333333326" y="777.8333333333333" as="targetPoint"/>
<Array as="points">
<mxPoint x="360" y="718"/>
<mxPoint x="390" y="791"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="15a4b3893f7299b4-204" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=8;endFill=0;dashed=1;exitX=0.75;exitY=1;entryX=0.5;entryY=0;" parent="1" source="15a4b3893f7299b4-66" target="15a4b3893f7299b4-72" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="238.66666666666674" y="858.3333333333333" as="sourcePoint"/>
<mxPoint x="171.33333333333326" y="871.6666666666667" as="targetPoint"/>
<Array as="points">
<mxPoint x="283" y="765"/>
<mxPoint x="275" y="790"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="15a4b3893f7299b4-205" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=8;endFill=0;dashed=1;exitX=0.5;exitY=1;entryX=0.5;entryY=0;" parent="1" source="15a4b3893f7299b4-66" target="15a4b3893f7299b4-68" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="222.5" y="852.5" as="sourcePoint"/>
<mxPoint x="160" y="860" as="targetPoint"/>
<Array as="points">
<mxPoint x="255" y="760"/>
<mxPoint x="195" y="780"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="15a4b3893f7299b4-207" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=8;endFill=0;exitX=0.5;exitY=0;entryX=0.371;entryY=1;entryPerimeter=0;" parent="1" source="15a4b3893f7299b4-79" target="15a4b3893f7299b4-68" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="170" y="905.5" as="sourcePoint"/>
<mxPoint x="195" y="850" as="targetPoint"/>
<Array as="points">
<mxPoint x="89" y="880"/>
<mxPoint x="186" y="850"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="15a4b3893f7299b4-208" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=8;endFill=0;exitX=0.5;exitY=0;entryX=0.75;entryY=1;" parent="1" source="15a4b3893f7299b4-74" target="15a4b3893f7299b4-68" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="80.33333333333337" y="937.6666666666667" as="sourcePoint"/>
<mxPoint x="111" y="840.3333333333333" as="targetPoint"/>
<Array as="points">
<mxPoint x="258" y="850"/>
<mxPoint x="213" y="850"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="15a4b3893f7299b4-210" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=8;endFill=0;dashed=1;exitX=0.5;exitY=0;entryX=0.25;entryY=1;" parent="1" source="15a4b3893f7299b4-80" target="15a4b3893f7299b4-79" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="99.33333333333337" y="1157.6666666666667" as="sourcePoint"/>
<mxPoint x="130" y="1060.3333333333333" as="targetPoint"/>
<Array as="points">
<mxPoint x="70" y="960"/>
<mxPoint x="61" y="940"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="15a4b3893f7299b4-211" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=8;endFill=0;dashed=1;exitX=0.5;exitY=0;entryX=0.75;entryY=1;" parent="1" source="15a4b3893f7299b4-82" target="15a4b3893f7299b4-79" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="95" y="1028.1666666666667" as="sourcePoint"/>
<mxPoint x="102.33333333333337" y="968.1666666666667" as="targetPoint"/>
<Array as="points">
<mxPoint x="148" y="960"/>
<mxPoint x="116" y="950"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="15a4b3893f7299b4-212" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=8;endFill=0;dashed=1;exitX=0;exitY=0.5;entryX=1;entryY=0.75;" parent="1" source="15a4b3893f7299b4-77" target="15a4b3893f7299b4-74" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="153" y="995.1666666666667" as="sourcePoint"/>
<mxPoint x="300" y="910" as="targetPoint"/>
<Array as="points">
<mxPoint x="340" y="923"/>
<mxPoint x="320" y="890"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="15a4b3893f7299b4-213" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=8;endFill=0;dashed=1;exitX=0;exitY=0.5;entryX=1;entryY=0.25;" parent="1" source="15a4b3893f7299b4-78" target="15a4b3893f7299b4-74" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="348.33333333333326" y="1022.5" as="sourcePoint"/>
<mxPoint x="310" y="885" as="targetPoint"/>
<Array as="points">
<mxPoint x="340" y="903"/>
<mxPoint x="320" y="880"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="15a4b3893f7299b4-214" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=8;endFill=0;dashed=1;exitX=0;exitY=0.5;entryX=1;entryY=0.092;entryPerimeter=0;" parent="1" source="15a4b3893f7299b4-75" target="15a4b3893f7299b4-74" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="358.33333333333326" y="1032.5" as="sourcePoint"/>
<mxPoint x="310" y="860" as="targetPoint"/>
<Array as="points">
<mxPoint x="320" y="877"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="15a4b3893f7299b4-215" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=10;exitX=1;exitY=0.5;entryX=0;entryY=0.5;endFill=0;" parent="1" source="15a4b3893f7299b4-111" target="15a4b3893f7299b4-170" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="262.83333333333326" y="1120.1666666666667" as="sourcePoint"/>
<mxPoint x="416.83333333333326" y="1083.5" as="targetPoint"/>
<Array as="points">
<mxPoint x="330" y="1150"/>
<mxPoint x="410" y="1167"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="15a4b3893f7299b4-216" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=8;endFill=0;dashed=1;exitX=1;exitY=0.5;entryX=0;entryY=0.25;" parent="1" source="15a4b3893f7299b4-136" target="89" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="2.5" y="1032.1666666666667" as="sourcePoint"/>
<mxPoint x="9.833333333333371" y="972.1666666666667" as="targetPoint"/>
<Array as="points">
<mxPoint x="90" y="1217"/>
<mxPoint x="130" y="1217"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="15a4b3893f7299b4-217" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=8;endFill=0;dashed=1;exitX=1;exitY=0.5;entryX=0;entryY=0.5;" parent="1" source="15a4b3893f7299b4-137" target="89" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="125.16666666666674" y="1183.5" as="sourcePoint"/>
<mxPoint x="247.83333333333326" y="1159.5" as="targetPoint"/>
<Array as="points">
<mxPoint x="90" y="1242"/>
<mxPoint x="120" y="1222"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="15a4b3893f7299b4-218" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=8;endFill=0;dashed=1;exitX=1;exitY=0.5;entryX=0;entryY=0.75;" parent="1" source="15a4b3893f7299b4-138" target="89" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="125.16666666666674" y="1203.5" as="sourcePoint"/>
<mxPoint x="247.83333333333326" y="1164.1666666666667" as="targetPoint"/>
<Array as="points">
<mxPoint x="100" y="1262"/>
<mxPoint x="120" y="1227"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="15a4b3893f7299b4-219" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=8;entryX=0;entryY=0.5;endFill=0;dashed=1;exitX=0.75;exitY=1;" parent="1" source="15a4b3893f7299b4-118" target="15a4b3893f7299b4-131" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="550" y="790" as="sourcePoint"/>
<mxPoint x="880.3333333333333" y="857.6666666666667" as="targetPoint"/>
<Array as="points">
<mxPoint x="550" y="802"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="15a4b3893f7299b4-220" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=8;entryX=0;entryY=0.5;endFill=0;dashed=1;exitX=0.5;exitY=1;" parent="1" source="15a4b3893f7299b4-118" target="15a4b3893f7299b4-133" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="560.3333333333333" y="760.3333333333333" as="sourcePoint"/>
<mxPoint x="600.3333333333333" y="812.3333333333333" as="targetPoint"/>
<Array as="points">
<mxPoint x="520" y="830"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="15a4b3893f7299b4-221" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=8;entryX=0;entryY=0.5;endFill=0;dashed=1;exitX=0.25;exitY=1;" parent="1" source="15a4b3893f7299b4-118" target="15a4b3893f7299b4-135" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="540.3333333333333" y="760.3333333333333" as="sourcePoint"/>
<mxPoint x="600.3333333333333" y="832.3333333333333" as="targetPoint"/>
<Array as="points">
<mxPoint x="500" y="870"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="15a4b3893f7299b4-222" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=8;entryX=0;entryY=0.5;endFill=0;dashed=1;exitX=0.379;exitY=1;exitPerimeter=0;" parent="1" source="15a4b3893f7299b4-118" target="15a4b3893f7299b4-134" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="520.3333333333333" y="760.3333333333333" as="sourcePoint"/>
<mxPoint x="600.3333333333333" y="892.3333333333333" as="targetPoint"/>
<Array as="points">
<mxPoint x="510" y="850"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="15a4b3893f7299b4-223" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=8;entryX=0;entryY=0.5;endFill=0;dashed=1;exitX=0.625;exitY=1;exitPerimeter=0;" parent="1" source="15a4b3893f7299b4-118" target="15a4b3893f7299b4-132" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="510" y="910" as="sourcePoint"/>
<mxPoint x="600.3333333333333" y="852.3333333333333" as="targetPoint"/>
<Array as="points">
<mxPoint x="530" y="810"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="15a4b3893f7299b4-224" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=10;exitX=1;exitY=0.5;entryX=0;entryY=0.5;endFill=0;" parent="1" source="15a4b3893f7299b4-169" target="15a4b3893f7299b4-116" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="515.8333333333333" y="946.1666666666667" as="sourcePoint"/>
<mxPoint x="669.8333333333333" y="909.5" as="targetPoint"/>
<Array as="points">
<mxPoint x="540" y="950"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="15a4b3893f7299b4-225" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=8;entryX=0.5;entryY=0;endFill=0;dashed=1;exitX=0.25;exitY=1;" parent="1" source="15a4b3893f7299b4-116" target="15a4b3893f7299b4-140" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="483.66666666666674" y="1045.1666666666667" as="sourcePoint"/>
<mxPoint x="656.3333333333333" y="1145.1666666666667" as="targetPoint"/>
<Array as="points">
<mxPoint x="655" y="990"/>
<mxPoint x="615" y="1010"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="15a4b3893f7299b4-226" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=8;entryX=0.5;entryY=0;endFill=0;dashed=1;exitX=0.75;exitY=1;" parent="1" source="15a4b3893f7299b4-116" target="15a4b3893f7299b4-142" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="665" y="985" as="sourcePoint"/>
<mxPoint x="625" y="1045" as="targetPoint"/>
<Array as="points">
<mxPoint x="720" y="1000"/>
<mxPoint x="765" y="1010"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="15a4b3893f7299b4-227" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=8;entryX=0.5;entryY=0;endFill=0;dashed=1;exitX=0.5;exitY=1;" parent="1" source="15a4b3893f7299b4-116" target="15a4b3893f7299b4-141" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="730.3333333333333" y="985" as="sourcePoint"/>
<mxPoint x="775" y="1045" as="targetPoint"/>
<Array as="points">
<mxPoint x="680" y="1000"/>
<mxPoint x="690" y="1020"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="15a4b3893f7299b4-228" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=10;exitX=1;exitY=0.5;entryX=0;entryY=0.5;endFill=0;" parent="1" source="9221bb110d1119f-69" target="15a4b3893f7299b4-110" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="481.33333333333326" y="1169.1666666666667" as="sourcePoint"/>
<mxPoint x="578.6666666666667" y="1135.8333333333333" as="targetPoint"/>
<Array as="points">
<mxPoint x="480" y="1394"/>
<mxPoint x="500" y="1345"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="15a4b3893f7299b4-229" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=10;exitX=0;exitY=0.5;entryX=0.5;entryY=0;endFill=0;" parent="1" source="15a4b3893f7299b4-144" target="15a4b3893f7299b4-110" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="654" y="1191.1666666666667" as="sourcePoint"/>
<mxPoint x="750.6666666666667" y="1237.8333333333333" as="targetPoint"/>
<Array as="points">
<mxPoint x="568" y="1230"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="15a4b3893f7299b4-230" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=10;exitX=0.5;exitY=1;entryX=0.5;entryY=0;endFill=0;" parent="1" source="15a4b3893f7299b4-110" target="15a4b3893f7299b4-155" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="477" y="1203.6666666666667" as="sourcePoint"/>
<mxPoint x="573.6666666666667" y="1250.3333333333333" as="targetPoint"/>
<Array as="points">
<mxPoint x="568" y="1400"/>
<mxPoint x="540" y="1410"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="15a4b3893f7299b4-231" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=10;exitX=1;exitY=0.5;entryX=0;entryY=0.5;endFill=0;" parent="1" source="15a4b3893f7299b4-110" target="15a4b3893f7299b4-153" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="487" y="1213.6666666666667" as="sourcePoint"/>
<mxPoint x="583.6666666666667" y="1260.3333333333333" as="targetPoint"/>
<Array as="points">
<mxPoint x="650" y="1340"/>
<mxPoint x="620" y="1410"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="15a4b3893f7299b4-232" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=8;entryX=0;entryY=0.5;endFill=0;dashed=1;exitX=1;exitY=0.5;" parent="1" source="15a4b3893f7299b4-153" target="15a4b3893f7299b4-154" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="817.8333333333333" y="1419.5" as="sourcePoint"/>
<mxPoint x="862.5" y="1479.5" as="targetPoint"/>
<Array as="points">
<mxPoint x="827.5" y="1402"/>
<mxPoint x="857.5" y="1442"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="15a4b3893f7299b4-233" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=8;entryX=0;entryY=0.5;endFill=0;dashed=1;exitX=0.5;exitY=0;" parent="1" source="15a4b3893f7299b4-144" target="15a4b3893f7299b4-145" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="750" y="1216.5" as="sourcePoint"/>
<mxPoint x="789.8333333333333" y="1335.3333333333333" as="targetPoint"/>
<Array as="points">
<mxPoint x="708" y="1206.5"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="15a4b3893f7299b4-234" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=8;entryX=0;entryY=0.5;endFill=0;dashed=1;exitX=0.75;exitY=0;" parent="1" source="15a4b3893f7299b4-144" target="15a4b3893f7299b4-146" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="734.8333333333333" y="1284.3333333333333" as="sourcePoint"/>
<mxPoint x="814.8333333333333" y="1324.3333333333333" as="targetPoint"/>
<Array as="points">
<mxPoint x="729" y="1226.5"/>
<mxPoint x="810" y="1244.5"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="15a4b3893f7299b4-235" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=8;entryX=0;entryY=0.5;endFill=0;dashed=1;exitX=1;exitY=0.25;" parent="1" source="15a4b3893f7299b4-144" target="15a4b3893f7299b4-148" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="739" y="1252.1666666666667" as="sourcePoint"/>
<mxPoint x="865" y="1254.1666666666667" as="targetPoint"/>
<Array as="points">
<mxPoint x="770" y="1246.5"/>
<mxPoint x="830" y="1264.5"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="15a4b3893f7299b4-236" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=8;entryX=0;entryY=0.5;endFill=0;dashed=1;exitX=1;exitY=0.5;" parent="1" source="15a4b3893f7299b4-144" target="15a4b3893f7299b4-149" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="747.3333333333333" y="1264.3333333333333" as="sourcePoint"/>
<mxPoint x="852" y="1281.6666666666667" as="targetPoint"/>
<Array as="points">
<mxPoint x="780" y="1256.5"/>
<mxPoint x="827" y="1282"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="15a4b3893f7299b4-237" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=8;entryX=0;entryY=0.5;endFill=0;dashed=1;exitX=1;exitY=0.75;" parent="1" source="15a4b3893f7299b4-144" target="15a4b3893f7299b4-150" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="739.8333333333333" y="1263.1666666666667" as="sourcePoint"/>
<mxPoint x="844.5" y="1295.1666666666667" as="targetPoint"/>
<Array as="points">
<mxPoint x="780" y="1266.5"/>
<mxPoint x="810" y="1293.5"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="15a4b3893f7299b4-238" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=8;entryX=0;entryY=0.5;endFill=0;dashed=1;exitX=0.75;exitY=1;" parent="1" source="15a4b3893f7299b4-144" target="15a4b3893f7299b4-151" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="735.3333333333333" y="1279.3333333333333" as="sourcePoint"/>
<mxPoint x="840" y="1326.6666666666667" as="targetPoint"/>
<Array as="points">
<mxPoint x="729" y="1289.5"/>
<mxPoint x="800" y="1324.5"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="15a4b3893f7299b4-239" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=8;entryX=0;entryY=0.5;endFill=0;dashed=1;exitX=0.5;exitY=1;" parent="1" source="15a4b3893f7299b4-144" target="15a4b3893f7299b4-152" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="739" y="1272.1666666666667" as="sourcePoint"/>
<mxPoint x="865" y="1334.1666666666667" as="targetPoint"/>
<Array as="points">
<mxPoint x="708" y="1306.5"/>
<mxPoint x="800" y="1344.5"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="15a4b3893f7299b4-240" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=8;entryX=0;entryY=0.5;endFill=0;dashed=1;" parent="1" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="588" y="1465" as="sourcePoint"/>
<mxPoint x="715" y="1475" as="targetPoint"/>
<Array as="points">
<mxPoint x="650" y="1450"/>
<mxPoint x="690" y="1475"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="15a4b3893f7299b4-241" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=8;entryX=0;entryY=0.5;endFill=0;dashed=1;exitX=1;exitY=0.5;" parent="1" source="15a4b3893f7299b4-155" target="15a4b3893f7299b4-158" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="612.5" y="1452.3333333333333" as="sourcePoint"/>
<mxPoint x="725.1666666666667" y="1484.3333333333333" as="targetPoint"/>
<Array as="points">
<mxPoint x="640" y="1460"/>
<mxPoint x="687.5" y="1494"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="15a4b3893f7299b4-242" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=8;entryX=0;entryY=0.5;endFill=0;dashed=1;exitX=1;exitY=0.75;" parent="1" source="15a4b3893f7299b4-155" target="15a4b3893f7299b4-157" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="622.5" y="1462.3333333333333" as="sourcePoint"/>
<mxPoint x="735.1666666666667" y="1494.3333333333333" as="targetPoint"/>
<Array as="points">
<mxPoint x="638" y="1470"/>
<mxPoint x="677.5" y="1514"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="15a4b3893f7299b4-244" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=10;exitX=1;exitY=0.5;entryX=0;entryY=0.5;endFill=0;" parent="1" source="15a4b3893f7299b4-114" target="15a4b3893f7299b4-173" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="322.83333333333326" y="1374.6666666666667" as="sourcePoint"/>
<mxPoint x="420.16666666666674" y="1341.3333333333333" as="targetPoint"/>
<Array as="points">
<mxPoint x="380" y="1656"/>
<mxPoint x="400" y="1512"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="15a4b3893f7299b4-245" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=8;endFill=0;dashed=1;exitX=1;exitY=0.5;entryX=0;entryY=0.25;" parent="1" source="15a4b3893f7299b4-159" target="15a4b3893f7299b4-114" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="162.16666666666674" y="1774" as="sourcePoint"/>
<mxPoint x="284.83333333333326" y="1720" as="targetPoint"/>
<Array as="points">
<mxPoint x="140" y="1660"/>
<mxPoint x="170" y="1651"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="15a4b3893f7299b4-246" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=8;endFill=0;dashed=1;exitX=1;exitY=0.5;entryX=0;entryY=0.5;" parent="1" source="15a4b3893f7299b4-160" target="15a4b3893f7299b4-114" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="145" y="1717.3333333333333" as="sourcePoint"/>
<mxPoint x="217.66666666666674" y="1661.3333333333333" as="targetPoint"/>
<Array as="points">
<mxPoint x="140" y="1680"/>
<mxPoint x="180" y="1656"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="15a4b3893f7299b4-247" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=8;endFill=0;dashed=1;exitX=1;exitY=0.5;entryX=0;entryY=0.5;" parent="1" source="15a4b3893f7299b4-162" target="15a4b3893f7299b4-161" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="120" y="1642.3333333333333" as="sourcePoint"/>
<mxPoint x="192.66666666666674" y="1576.3333333333333" as="targetPoint"/>
<Array as="points">
<mxPoint x="150" y="1775"/>
<mxPoint x="185" y="1730"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="15a4b3893f7299b4-248" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=10;exitX=1;exitY=0.5;entryX=0;entryY=0.5;endFill=0;" parent="1" source="15a4b3893f7299b4-161" target="9221bb110d1119f-75" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="320.16666666666674" y="1415.6666666666667" as="sourcePoint"/>
<mxPoint x="420.16666666666674" y="1415.6666666666667" as="targetPoint"/>
<Array as="points">
<mxPoint x="370" y="1735"/>
<mxPoint x="420" y="1612"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="ac9188710934de2-52" value="" style="shape=image;html=1;verticalAlign=top;verticalLabelPosition=bottom;labelBackgroundColor=#ffffff;imageAspect=0;aspect=fixed;image=https://cdn1.iconfinder.com/data/icons/logotypes/32/github-128.png;rounded=1;glass=0;comic=0;strokeColor=#000000;fillColor=#FFFFFF;fontFamily=Verdana;fontSize=14;align=center;" parent="1" vertex="1">
<mxGeometry x="20" y="40" width="20" height="20" as="geometry"/>
</mxCell>
<mxCell id="ac9188710934de2-55" value="adam-golab/react-developer-roadmap" style="text;html=1;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;whiteSpace=wrap;rounded=0;comic=0;fontFamily=Verdana;fontSize=8;" parent="1" vertex="1">
<mxGeometry x="40" y="42.5" width="260" height="15" as="geometry"/>
</mxCell>
<mxCell id="ac9188710934de2-56" value="终端的使用" style="text;html=1;strokeColor=none;fillColor=none;align=right;verticalAlign=middle;whiteSpace=wrap;rounded=0;comic=0;fontFamily=Verdana;fontSize=8;" parent="1" vertex="1">
<mxGeometry x="30" y="395" width="260" height="15" as="geometry"/>
</mxCell>
<mxCell id="ac9188710934de2-57" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=8;exitX=0;exitY=0.5;entryX=1;entryY=0.5;endFill=0;dashed=1;" parent="1" source="51" target="ac9188710934de2-56" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="403.66666666666674" y="400.33333333333337" as="sourcePoint"/>
<mxPoint x="300.33333333333326" y="397.66666666666663" as="targetPoint"/>
<Array as="points">
<mxPoint x="340" y="380"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="9221bb110d1119f-52" value="实用工具库" style="rounded=1;whiteSpace=wrap;html=1;comic=0;fontFamily=Verdana;fontSize=10;fillColor=#FFFF66;" parent="1" vertex="1">
<mxGeometry x="152" y="1340.5" width="130" height="20" as="geometry"/>
</mxCell>
<mxCell id="9221bb110d1119f-53" value="Lodash" style="rounded=1;whiteSpace=wrap;html=1;comic=0;fontFamily=Verdana;fontSize=8;fillColor=#FFFF66;" parent="1" vertex="1">
<mxGeometry x="23.5" y="1381.5" width="65" height="15" as="geometry"/>
</mxCell>
<mxCell id="9221bb110d1119f-54" value="Moment" style="rounded=1;whiteSpace=wrap;html=1;comic=0;fontFamily=Verdana;fontSize=8;fillColor=#FFFF66;" parent="1" vertex="1">
<mxGeometry x="23.5" y="1401.5" width="65" height="15" as="geometry"/>
</mxCell>
<mxCell id="9221bb110d1119f-55" value="路由" style="rounded=1;whiteSpace=wrap;html=1;comic=0;fontFamily=Verdana;fontSize=10;fillColor=#FFFF66;" parent="1" vertex="1">
<mxGeometry x="586" y="1120" width="73" height="20" as="geometry"/>
</mxCell>
<mxCell id="9221bb110d1119f-56" value="React-Router" style="rounded=1;whiteSpace=wrap;html=1;comic=0;fontFamily=Verdana;fontSize=8;fillColor=#FFFF66;" parent="1" vertex="1">
<mxGeometry x="747" y="1097" width="93" height="15" as="geometry"/>
</mxCell>
<mxCell id="9221bb110d1119f-57" value="Redux-First Router" style="rounded=1;whiteSpace=wrap;html=1;comic=0;fontFamily=Verdana;fontSize=8;fillColor=#CCCCCC;" parent="1" vertex="1">
<mxGeometry x="746" y="1137" width="94" height="15" as="geometry"/>
</mxCell>
<mxCell id="9221bb110d1119f-58" value="Router5" style="rounded=1;whiteSpace=wrap;html=1;comic=0;fontFamily=Verdana;fontSize=8;fillColor=#CCCCCC;" parent="1" vertex="1">
<mxGeometry x="747" y="1117" width="93" height="15" as="geometry"/>
</mxCell>
<mxCell id="9221bb110d1119f-59" value="classnames" style="rounded=1;whiteSpace=wrap;html=1;comic=0;fontFamily=Verdana;fontSize=8;fillColor=#FFFF66;" parent="1" vertex="1">
<mxGeometry x="23.5" y="1423" width="65" height="15" as="geometry"/>
</mxCell>
<mxCell id="9221bb110d1119f-60" value="Numeral" style="rounded=1;whiteSpace=wrap;html=1;comic=0;fontFamily=Verdana;fontSize=8;fillColor=#FFCC99;" parent="1" vertex="1">
<mxGeometry x="23.5" y="1445" width="65" height="15" as="geometry"/>
</mxCell>
<mxCell id="9221bb110d1119f-64" value="" style="ellipse;whiteSpace=wrap;html=1;aspect=fixed;rounded=1;comic=0;strokeColor=#000000;fillColor=#FFFFFF;fontFamily=Verdana;fontSize=14;align=center;" parent="1" vertex="1">
<mxGeometry x="454" y="1050" width="23" height="23" as="geometry"/>
</mxCell>
<mxCell id="9221bb110d1119f-65" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=10;exitX=1;exitY=0.5;entryX=0;entryY=0.5;endFill=0;" parent="1" source="9221bb110d1119f-64" target="9221bb110d1119f-55" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="489" y="1121.5" as="sourcePoint"/>
<mxPoint x="577" y="1188" as="targetPoint"/>
<Array as="points">
<mxPoint x="510" y="1062"/>
<mxPoint x="530" y="1130"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="9221bb110d1119f-66" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=8;entryX=0;entryY=0.5;endFill=0;dashed=1;exitX=1;exitY=0.25;" parent="1" source="9221bb110d1119f-55" target="9221bb110d1119f-56" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="681.5" y="1215.5" as="sourcePoint"/>
<mxPoint x="829" y="1197.5" as="targetPoint"/>
<Array as="points">
<mxPoint x="690" y="1125"/>
<mxPoint x="720" y="1105"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="9221bb110d1119f-67" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=8;entryX=0;entryY=0.5;endFill=0;dashed=1;exitX=1;exitY=0.5;" parent="1" source="9221bb110d1119f-55" target="9221bb110d1119f-58" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="669" y="1135" as="sourcePoint"/>
<mxPoint x="757" y="1114.5" as="targetPoint"/>
<Array as="points">
<mxPoint x="700" y="1130"/>
<mxPoint x="720" y="1125"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="9221bb110d1119f-68" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=8;entryX=0;entryY=0.5;endFill=0;dashed=1;exitX=1;exitY=0.75;" parent="1" source="9221bb110d1119f-55" target="9221bb110d1119f-57" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="679" y="1145" as="sourcePoint"/>
<mxPoint x="767" y="1124.5" as="targetPoint"/>
<Array as="points">
<mxPoint x="680" y="1135"/>
<mxPoint x="720" y="1145"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="9221bb110d1119f-69" value="" style="ellipse;whiteSpace=wrap;html=1;aspect=fixed;rounded=1;comic=0;strokeColor=#000000;fillColor=#FFFFFF;fontFamily=Verdana;fontSize=14;align=center;" parent="1" vertex="1">
<mxGeometry x="434.5" y="1383" width="23" height="23" as="geometry"/>
</mxCell>
<mxCell id="9221bb110d1119f-70" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=10;exitX=1;exitY=0.5;entryX=0;entryY=0.5;endFill=0;" parent="1" source="9221bb110d1119f-52" target="15a4b3893f7299b4-172" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="280" y="1300.5" as="sourcePoint"/>
<mxPoint x="368" y="1367" as="targetPoint"/>
<Array as="points">
<mxPoint x="340" y="1350"/>
<mxPoint x="400" y="1336"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="9221bb110d1119f-71" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=8;endFill=0;dashed=1;exitX=1;exitY=0.5;entryX=0.25;entryY=1;" parent="1" source="9221bb110d1119f-53" target="9221bb110d1119f-52" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="127" y="1295.5" as="sourcePoint"/>
<mxPoint x="249.5" y="1241.5" as="targetPoint"/>
<Array as="points">
<mxPoint x="119.5" y="1387.5"/>
<mxPoint x="179.5" y="1376.5"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="9221bb110d1119f-72" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=8;endFill=0;dashed=1;exitX=1;exitY=0.5;entryX=0.396;entryY=1;entryPerimeter=0;" parent="1" source="9221bb110d1119f-54" target="9221bb110d1119f-52" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="99.5" y="1397" as="sourcePoint"/>
<mxPoint x="194.5" y="1370.5" as="targetPoint"/>
<Array as="points">
<mxPoint x="129.5" y="1407.5"/>
<mxPoint x="203.5" y="1386.5"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="9221bb110d1119f-73" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=8;endFill=0;dashed=1;exitX=1;exitY=0.5;entryX=0.5;entryY=1;" parent="1" source="9221bb110d1119f-59" target="9221bb110d1119f-52" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="99.5" y="1417" as="sourcePoint"/>
<mxPoint x="217" y="1360" as="targetPoint"/>
<Array as="points">
<mxPoint x="150" y="1430"/>
<mxPoint x="217" y="1397"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="9221bb110d1119f-74" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=8;endFill=0;dashed=1;exitX=1;exitY=0.5;entryX=0.623;entryY=1.025;entryPerimeter=0;" parent="1" source="9221bb110d1119f-60" target="9221bb110d1119f-52" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="109.5" y="1427" as="sourcePoint"/>
<mxPoint x="238" y="1380" as="targetPoint"/>
<Array as="points">
<mxPoint x="169.5" y="1449.5"/>
<mxPoint x="233" y="1407"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="9221bb110d1119f-75" value="" style="ellipse;whiteSpace=wrap;html=1;aspect=fixed;rounded=1;comic=0;strokeColor=#000000;fillColor=#FFFFFF;fontFamily=Verdana;fontSize=14;align=center;" parent="1" vertex="1">
<mxGeometry x="457" y="1618.5" width="23" height="23" as="geometry"/>
</mxCell>
<mxCell id="9221bb110d1119f-76" value="" style="ellipse;whiteSpace=wrap;html=1;aspect=fixed;rounded=1;comic=0;strokeColor=#000000;fillColor=#FFFFFF;fontFamily=Verdana;fontSize=14;align=center;" parent="1" vertex="1">
<mxGeometry x="454" y="1670" width="23" height="23" as="geometry"/>
</mxCell>
<mxCell id="9221bb110d1119f-77" value="" style="ellipse;whiteSpace=wrap;html=1;aspect=fixed;rounded=1;comic=0;strokeColor=#000000;fillColor=#FFFFFF;fontFamily=Verdana;fontSize=14;align=center;" parent="1" vertex="1">
<mxGeometry x="448.5" y="1723.5" width="23" height="23" as="geometry"/>
</mxCell>
<mxCell id="9221bb110d1119f-80" value="移动端" style="rounded=1;whiteSpace=wrap;html=1;comic=0;fontFamily=Verdana;fontSize=10;fillColor=#CCCCCC;" parent="1" vertex="1">
<mxGeometry x="600" y="1647.5" width="70" height="20" as="geometry"/>
</mxCell>
<mxCell id="9221bb110d1119f-82" value="React Native" style="rounded=1;whiteSpace=wrap;html=1;comic=0;fontFamily=Verdana;fontSize=8;fillColor=#CCCCCC;" parent="1" vertex="1">
<mxGeometry x="763.5" y="1655" width="105" height="15" as="geometry"/>
</mxCell>
<mxCell id="9221bb110d1119f-83" value="Cordova/Phonegap" style="rounded=1;whiteSpace=wrap;html=1;comic=0;fontFamily=Verdana;fontSize=8;fillColor=#CCCCCC;" parent="1" vertex="1">
<mxGeometry x="763.5" y="1675" width="105" height="15" as="geometry"/>
</mxCell>
<mxCell id="9221bb110d1119f-87" value="桌面端" style="rounded=1;whiteSpace=wrap;html=1;comic=0;fontFamily=Verdana;fontSize=10;fillColor=#CCCCCC;" parent="1" vertex="1">
<mxGeometry x="237.5" y="1849" width="70" height="20" as="geometry"/>
</mxCell>
<mxCell id="9221bb110d1119f-88" value="Proton Native" style="rounded=1;whiteSpace=wrap;html=1;comic=0;fontFamily=Verdana;fontSize=8;fillColor=#CCCCCC;" parent="1" vertex="1">
<mxGeometry x="37.5" y="1859" width="110" height="15" as="geometry"/>
</mxCell>
<mxCell id="9221bb110d1119f-89" value="Electron" style="rounded=1;whiteSpace=wrap;html=1;comic=0;fontFamily=Verdana;fontSize=8;fillColor=#CCCCCC;" parent="1" vertex="1">
<mxGeometry x="37.5" y="1879" width="110" height="15" as="geometry"/>
</mxCell>
<mxCell id="9221bb110d1119f-90" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=10;exitX=1;exitY=0.5;entryX=0;entryY=0.5;endFill=0;" parent="1" source="9221bb110d1119f-87" target="9221bb110d1119f-77" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="369.83333333333326" y="1650.1666666666665" as="sourcePoint"/>
<mxPoint x="455.83333333333326" y="1612.1666666666665" as="targetPoint"/>
<Array as="points">
<mxPoint x="350" y="1850"/>
<mxPoint x="410" y="1730"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="9221bb110d1119f-91" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=8;endFill=0;dashed=1;exitX=1;exitY=0.5;entryX=0;entryY=0.25;" parent="1" source="9221bb110d1119f-88" target="9221bb110d1119f-87" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="172.33333333333326" y="1904" as="sourcePoint"/>
<mxPoint x="280.33333333333326" y="1904.6666666666665" as="targetPoint"/>
<Array as="points">
<mxPoint x="167.5" y="1866"/>
<mxPoint x="207.5" y="1854"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="9221bb110d1119f-92" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=8;endFill=0;dashed=1;exitX=1;exitY=0.5;entryX=0;entryY=0.5;" parent="1" source="9221bb110d1119f-89" target="9221bb110d1119f-87" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="157.83333333333326" y="1876.3333333333335" as="sourcePoint"/>
<mxPoint x="227.5" y="1876" as="targetPoint"/>
<Array as="points">
<mxPoint x="177.5" y="1886"/>
<mxPoint x="200" y="1859"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="9221bb110d1119f-93" value="虚拟现实(VR)" style="rounded=1;whiteSpace=wrap;html=1;comic=0;fontFamily=Verdana;fontSize=10;fillColor=#CCCCCC;" parent="1" vertex="1">
<mxGeometry x="539" y="1732.5" width="115" height="20" as="geometry"/>
</mxCell>
<mxCell id="9221bb110d1119f-94" value="React 360" style="rounded=1;whiteSpace=wrap;html=1;comic=0;fontFamily=Verdana;fontSize=8;fillColor=#CCCCCC;" parent="1" vertex="1">
<mxGeometry x="776.5" y="1772" width="90" height="15" as="geometry"/>
</mxCell>
<mxCell id="9221bb110d1119f-95" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=10;exitX=0;exitY=0.5;entryX=1;entryY=0.5;endFill=0;" parent="1" source="9221bb110d1119f-93" target="101" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="310.33333333333326" y="1700" as="sourcePoint"/>
<mxPoint x="463" y="1726.6666666666665" as="targetPoint"/>
<Array as="points">
<mxPoint x="510" y="1742"/>
<mxPoint x="490" y="1777"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="9221bb110d1119f-96" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=8;endFill=0;dashed=1;exitX=0;exitY=0.5;entryX=1;entryY=0.5;" parent="1" source="9221bb110d1119f-94" target="9221bb110d1119f-93" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="704.8333333333333" y="1785.8333333333335" as="sourcePoint"/>
<mxPoint x="794.8333333333333" y="1763.8333333333335" as="targetPoint"/>
<Array as="points">
<mxPoint x="716.5" y="1779.5"/>
<mxPoint x="704.5" y="1742.5"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="29283392ea474178-53" value="表单助手" style="rounded=1;whiteSpace=wrap;html=1;comic=0;fontFamily=Verdana;fontSize=10;fillColor=#FFCC99;" parent="1" vertex="1">
<mxGeometry x="272.5" y="1084.6666666666665" width="90" height="20" as="geometry"/>
</mxCell>
<mxCell id="29283392ea474178-55" value="Redux Form" style="rounded=1;whiteSpace=wrap;html=1;comic=0;fontFamily=Verdana;fontSize=8;fillColor=#FFCC99;" parent="1" vertex="1">
<mxGeometry x="13" y="1083.5" width="100" height="15" as="geometry"/>
</mxCell>
<mxCell id="29283392ea474178-56" value="Formsy" style="rounded=1;whiteSpace=wrap;html=1;comic=0;fontFamily=Verdana;fontSize=8;fillColor=#CCCCCC;" parent="1" vertex="1">
<mxGeometry x="13" y="1128.5" width="100" height="15" as="geometry"/>
</mxCell>
<mxCell id="29283392ea474178-58" value="Final Form" style="rounded=1;whiteSpace=wrap;html=1;comic=0;fontFamily=Verdana;fontSize=8;fillColor=#CCCCCC;" parent="1" vertex="1">
<mxGeometry x="13" y="1149.5" width="100" height="15" as="geometry"/>
</mxCell>
<mxCell id="29283392ea474178-62" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=8;endFill=0;exitX=1;exitY=0.5;entryX=0;entryY=0.5;" parent="1" source="29283392ea474178-53" target="29283392ea474178-64" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="280" y="890" as="sourcePoint"/>
<mxPoint x="134" y="840" as="targetPoint"/>
<Array as="points">
<mxPoint x="390" y="1095"/>
<mxPoint x="420" y="1018"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="29283392ea474178-64" value="" style="ellipse;whiteSpace=wrap;html=1;aspect=fixed;rounded=1;comic=0;strokeColor=#000000;fillColor=#FFFFFF;fontFamily=Verdana;fontSize=14;align=center;" parent="1" vertex="1">
<mxGeometry x="460" y="1006.5" width="23" height="23" as="geometry"/>
</mxCell>
<mxCell id="29283392ea474178-65" style="edgeStyle=orthogonalEdgeStyle;rounded=0;html=1;exitX=1;exitY=1;entryX=1;entryY=1;endArrow=none;endFill=0;jettySize=auto;orthogonalLoop=1;strokeColor=#000000;fillColor=#FFFFFF;fontFamily=Verdana;fontSize=8;" parent="1" source="29283392ea474178-64" target="29283392ea474178-64" edge="1">
<mxGeometry relative="1" as="geometry"/>
</mxCell>
<mxCell id="30009fc3392c28ba-52" value="ImmutableJS" style="rounded=1;whiteSpace=wrap;html=1;comic=0;fontFamily=Verdana;fontSize=8;fillColor=#FFCC99;" parent="1" vertex="1">
<mxGeometry x="23.5" y="1486" width="65" height="15" as="geometry"/>
</mxCell>
<mxCell id="30009fc3392c28ba-53" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=8;endFill=0;dashed=1;exitX=1;exitY=0.5;entryX=0.854;entryY=1.025;entryPerimeter=0;" parent="1" source="30009fc3392c28ba-52" target="9221bb110d1119f-52" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="98.33333333333326" y="1457" as="sourcePoint"/>
<mxPoint x="247" y="1370.3333333333333" as="targetPoint"/>
<Array as="points">
<mxPoint x="180" y="1487"/>
<mxPoint x="263" y="1417"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="53" value="Selenium" style="rounded=1;whiteSpace=wrap;html=1;comic=0;fontFamily=Verdana;fontSize=8;fillColor=#FFCC99;" parent="1" vertex="1">
<mxGeometry x="715" y="1446" width="80" height="15" as="geometry"/>
</mxCell>
<mxCell id="56" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=8;entryX=0;entryY=0.5;endFill=0;dashed=1;" parent="1" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="588" y="1460" as="sourcePoint"/>
<mxPoint x="715" y="1454" as="targetPoint"/>
<Array as="points">
<mxPoint x="630" y="1440"/>
<mxPoint x="680" y="1454"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="65" value="Formik" style="rounded=1;whiteSpace=wrap;html=1;comic=0;fontFamily=Verdana;fontSize=8;fillColor=#FFCC99;" parent="1" vertex="1">
<mxGeometry x="13" y="1106.5" width="100" height="15" as="geometry"/>
</mxCell>
<mxCell id="73" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=8;endFill=0;dashed=1;entryX=1;entryY=0.5;exitX=0;exitY=0.25;" parent="1" source="29283392ea474178-53" target="29283392ea474178-55" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="265.5" y="1072" as="sourcePoint"/>
<mxPoint x="175.5" y="1060" as="targetPoint"/>
<Array as="points"/>
</mxGeometry>
</mxCell>
<mxCell id="75" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=8;endFill=0;dashed=1;entryX=1;entryY=0.5;exitX=0;exitY=0.75;" parent="1" source="29283392ea474178-53" target="29283392ea474178-56" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="245.5" y="1110" as="sourcePoint"/>
<mxPoint x="207.5" y="1121" as="targetPoint"/>
<Array as="points">
<mxPoint x="255.5" y="1100"/>
<mxPoint x="155.5" y="1136"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="76" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=8;endFill=0;dashed=1;entryX=1;entryY=0.5;exitX=0;exitY=0.5;" parent="1" source="29283392ea474178-53" target="65" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="245.5" y="1090" as="sourcePoint"/>
<mxPoint x="215.5" y="1095" as="targetPoint"/>
<Array as="points">
<mxPoint x="245.5" y="1095"/>
<mxPoint x="155.5" y="1114"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="77" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=8;endFill=0;dashed=1;exitX=1;exitY=0.5;entryX=0.017;entryY=0.942;entryPerimeter=0;" parent="1" source="29283392ea474178-58" target="29283392ea474178-53" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="224.5" y="1135" as="sourcePoint"/>
<mxPoint x="265.5" y="1135" as="targetPoint"/>
<Array as="points">
<mxPoint x="155.5" y="1157"/>
<mxPoint x="255.5" y="1104"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="79" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=8;endFill=0;dashed=1;entryX=0.25;entryY=1;exitX=0.5;exitY=0;" parent="1" source="29283392ea474178-55" target="15a4b3893f7299b4-68" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="200" y="990" as="sourcePoint"/>
<mxPoint x="148" y="918" as="targetPoint"/>
<Array as="points">
<mxPoint x="63" y="1060"/>
<mxPoint x="20" y="1010"/>
<mxPoint x="10" y="850"/>
<mxPoint x="178" y="840"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="81" value="组件状态 / 上下文" style="rounded=1;whiteSpace=wrap;html=1;comic=0;fontFamily=Verdana;fontSize=8;fillColor=#FFFF66;" parent="1" vertex="1">
<mxGeometry x="10" y="810" width="140" height="15" as="geometry"/>
</mxCell>
<mxCell id="84" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=8;endFill=0;dashed=1;exitX=1;exitY=0.5;entryX=0.75;entryY=1;" parent="1" source="15a4b3893f7299b4-73" target="9221bb110d1119f-52" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="98.5" y="1457" as="sourcePoint"/>
<mxPoint x="243.5" y="1371" as="targetPoint"/>
<Array as="points">
<mxPoint x="180" y="1467"/>
<mxPoint x="250" y="1406"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="85" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=8;endFill=0;dashed=1;exitX=0.25;exitY=1;entryX=0.5;entryY=0;" parent="1" source="15a4b3893f7299b4-66" target="81" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="285" y="775" as="sourcePoint"/>
<mxPoint x="170" y="792.5" as="targetPoint"/>
<Array as="points">
<mxPoint x="228" y="760"/>
<mxPoint x="80" y="790"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="86" value="Reach Router" style="rounded=1;whiteSpace=wrap;html=1;comic=0;fontFamily=Verdana;fontSize=8;fillColor=#CCCCCC;" parent="1" vertex="1">
<mxGeometry x="746.5" y="1157" width="94" height="15" as="geometry"/>
</mxCell>
<mxCell id="87" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=8;entryX=0;entryY=0.5;endFill=0;dashed=1;exitX=1.007;exitY=0.95;exitPerimeter=0;" parent="1" source="9221bb110d1119f-55" target="86" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="669" y="1145" as="sourcePoint"/>
<mxPoint x="756" y="1154.5" as="targetPoint"/>
<Array as="points">
<mxPoint x="690" y="1145"/>
<mxPoint x="730" y="1165"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="88" value="React Native Windows" style="rounded=1;whiteSpace=wrap;html=1;comic=0;fontFamily=Verdana;fontSize=8;fillColor=#CCCCCC;" parent="1" vertex="1">
<mxGeometry x="37.5" y="1899" width="110" height="15" as="geometry"/>
</mxCell>
<mxCell id="89" value="REST" style="rounded=1;whiteSpace=wrap;html=1;comic=0;fontFamily=Verdana;fontSize=10;fillColor=#FFFF66;" parent="1" vertex="1">
<mxGeometry x="142.5" y="1211.3333333333333" width="70" height="20" as="geometry"/>
</mxCell>
<mxCell id="90" value="GraphQL" style="rounded=1;whiteSpace=wrap;html=1;comic=0;fontFamily=Verdana;fontSize=10;fillColor=#FFCC99;" parent="1" vertex="1">
<mxGeometry x="287" y="1206.3333333333333" width="70" height="20" as="geometry"/>
</mxCell>
<mxCell id="91" value="Apollo" style="rounded=1;whiteSpace=wrap;html=1;comic=0;fontFamily=Verdana;fontSize=8;fillColor=#FFCC99;" parent="1" vertex="1">
<mxGeometry x="180" y="1284" width="70" height="15" as="geometry"/>
</mxCell>
<mxCell id="92" value="Relay" style="rounded=1;whiteSpace=wrap;html=1;comic=0;fontFamily=Verdana;fontSize=8;fillColor=#CCCCCC;" parent="1" vertex="1">
<mxGeometry x="260" y="1284" width="70" height="15" as="geometry"/>
</mxCell>
<mxCell id="93" value="urql" style="rounded=1;whiteSpace=wrap;html=1;comic=0;fontFamily=Verdana;fontSize=8;fillColor=#CCCCCC;" parent="1" vertex="1">
<mxGeometry x="340" y="1284" width="70" height="15" as="geometry"/>
</mxCell>
<mxCell id="94" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=10;exitX=0.25;exitY=1;entryX=0.5;entryY=0;endFill=0;" parent="1" source="15a4b3893f7299b4-111" target="89" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="317.5" y="1164.5" as="sourcePoint"/>
<mxPoint x="446" y="1176.5" as="targetPoint"/>
<Array as="points">
<mxPoint x="255" y="1177"/>
<mxPoint x="178" y="1190"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="95" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=10;exitX=0.75;exitY=1;entryX=0.5;entryY=0;endFill=0;" parent="1" source="15a4b3893f7299b4-111" target="90" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="265" y="1174.5" as="sourcePoint"/>
<mxPoint x="187.5" y="1221.5" as="targetPoint"/>
<Array as="points">
<mxPoint x="290" y="1180"/>
<mxPoint x="322" y="1190"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="96" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=8;endFill=0;dashed=1;exitX=0.5;exitY=0;entryX=0.25;entryY=1;" parent="1" source="91" target="90" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="230" y="1268.5" as="sourcePoint"/>
<mxPoint x="299.5" y="1233.5" as="targetPoint"/>
<Array as="points">
<mxPoint x="215" y="1260"/>
<mxPoint x="305" y="1234"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="97" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=8;endFill=0;dashed=1;exitX=0.5;exitY=0;entryX=0.5;entryY=1;" parent="1" source="92" target="90" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="282" y="1282.5" as="sourcePoint"/>
<mxPoint x="371.5" y="1225" as="targetPoint"/>
<Array as="points">
<mxPoint x="295" y="1259"/>
<mxPoint x="322" y="1240"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="98" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=8;endFill=0;dashed=1;exitX=0.557;exitY=0.067;entryX=0.75;entryY=1;exitPerimeter=0;" parent="1" source="93" target="90" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="379" y="1274" as="sourcePoint"/>
<mxPoint x="406" y="1216.5" as="targetPoint"/>
<Array as="points">
<mxPoint x="379" y="1260"/>
<mxPoint x="340" y="1249"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="99" value="国际化(i18n)" style="rounded=1;whiteSpace=wrap;html=1;comic=0;fontFamily=Verdana;fontSize=10;fillColor=#FFFF66;" parent="1" vertex="1">
<mxGeometry x="187.5" y="1502.5" width="70" height="20" as="geometry"/>
</mxCell>
<mxCell id="100" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=10;exitX=1;exitY=0.5;entryX=0;entryY=0.5;endFill=0;" parent="1" source="99" target="15a4b3893f7299b4-171" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="335.16666666666674" y="1474.5" as="sourcePoint"/>
<mxPoint x="445.16666666666674" y="1433.8333333333335" as="targetPoint"/>
<Array as="points">
<mxPoint x="320" y="1512"/>
<mxPoint x="410" y="1454"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="101" value="" style="ellipse;whiteSpace=wrap;html=1;aspect=fixed;rounded=1;comic=0;strokeColor=#000000;fillColor=#FFFFFF;fontFamily=Verdana;fontSize=14;align=center;" parent="1" vertex="1">
<mxGeometry x="441.5" y="1771" width="23" height="23" as="geometry"/>
</mxCell>
<mxCell id="102" value="React Intl" style="rounded=1;whiteSpace=wrap;html=1;comic=0;fontFamily=Verdana;fontSize=8;fillColor=#FFFF66;" parent="1" vertex="1">
<mxGeometry x="127" y="1590" width="80" height="15" as="geometry"/>
</mxCell>
<mxCell id="104" value="React i18next" style="rounded=1;whiteSpace=wrap;html=1;comic=0;fontFamily=Verdana;fontSize=8;fillColor=#FFCC99;" parent="1" vertex="1">
<mxGeometry x="217" y="1590" width="80" height="15" as="geometry"/>
</mxCell>
<mxCell id="106" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=8;endFill=0;dashed=1;exitX=0.5;exitY=0;entryX=0.75;entryY=1;" parent="1" source="104" target="99" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="98.33333333333326" y="1497" as="sourcePoint"/>
<mxPoint x="273" y="1371" as="targetPoint"/>
<Array as="points">
<mxPoint x="257" y="1560"/>
<mxPoint x="240" y="1550"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="107" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=8;endFill=0;dashed=1;exitX=0.5;exitY=0;entryX=0.25;entryY=1;" parent="1" source="102" target="99" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="215" y="1591.8333333333335" as="sourcePoint"/>
<mxPoint x="198.33333333333326" y="1523.8333333333335" as="targetPoint"/>
<Array as="points">
<mxPoint x="170" y="1562"/>
<mxPoint x="205" y="1552"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="108" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=8;endFill=0;dashed=1;exitX=1;exitY=0.5;entryX=0;entryY=0.75;" parent="1" source="88" target="9221bb110d1119f-87" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="156" y="1906" as="sourcePoint"/>
<mxPoint x="240" y="1870" as="targetPoint"/>
<Array as="points">
<mxPoint x="185.5" y="1905"/>
<mxPoint x="216" y="1864"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="115" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=10;exitX=0;exitY=0.25;entryX=1;entryY=0.5;endFill=0;" parent="1" source="9221bb110d1119f-80" target="9221bb110d1119f-76" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="558" y="1646" as="sourcePoint"/>
<mxPoint x="484" y="1686" as="targetPoint"/>
<Array as="points">
<mxPoint x="529" y="1645"/>
<mxPoint x="509" y="1680"/>
</Array>
</mxGeometry>
</mxCell>
<mxCell id="116" value="" style="curved=1;endArrow=none;html=1;fontFamily=Verdana;fontSize=8;entryX=0;entryY=0.25;endFill=0;dashed=1;exitX=1;exitY=0.5;" parent="1" edge="1">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="670" y="1663" as="sourcePoint"/>
gitextract_2uiqh3vv/
├── .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
├── 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
SYMBOL INDEX (1 symbols across 1 files)
FILE: translations/translate.js
function escapeRegExp (line 18) | function escapeRegExp(str) {
Condensed preview — 24 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (961K chars).
[
{
"path": ".gitignore",
"chars": 68,
"preview": ".DS_Store\n._*\nThumbs.db\n*.sublime-project\n*.sublime-workspace\n.idea\n"
},
{
"path": "LICENSE",
"chars": 19047,
"preview": "## creative commons\n\n# Attribution-NonCommercial-ShareAlike 4.0 International\n\nCreative Commons Corporation (“Creative C"
},
{
"path": "PULL_REQUEST_TEMPLATE.md",
"chars": 213,
"preview": "**What this PR does?**\n\n\n**Why are you adding given library? (Short description why do you think that this library is im"
},
{
"path": "README-CN.md",
"chars": 6978,
"preview": "# React 开发者指南\n\n[README in English](README.md)\n\n[README in Japanese](README-JA.md)\n\n[README in Korean](README-KO.md)\n\n[RE"
},
{
"path": "README-ES.md",
"chars": 8831,
"preview": "# React Developer Roadmap\n\n[README in Chinese](README-CN.md)\n\n[README in English](README.md)\n\n[README in Japanese](READM"
},
{
"path": "README-JA.md",
"chars": 7590,
"preview": "# React 開発者ロードマップ\n\n[README in Chinese](README-CN.md)\n\n[README in English](README.md)\n\n[README in Korean](README-KO.md)\n\n"
},
{
"path": "README-KO.md",
"chars": 7344,
"preview": "# React 개발자 로드맵\n\n[README in Chinese](README-CN.md)\n\n[README in English](README.md)\n\n[README in Japanese](README-JA.md)\n\n"
},
{
"path": "README-PTBR.md",
"chars": 8714,
"preview": "# Guia do desenvolvedor React\n\n[README in Chinese](README-CN.md)\n\n[README in English](README.md)\n\n[README in Japanese](R"
},
{
"path": "README-RU.md",
"chars": 9222,
"preview": "# План становления React-разработчиком\n\n[README in Chinese](README-CN.md)\n\n[README in English](README.md)\n\n[README in Ja"
},
{
"path": "README.md",
"chars": 8488,
"preview": "# React Developer Roadmap\n\n[README in Chinese](README-CN.md)\n\n[README in Japanese](README-JA.md)\n\n[README in Korean](REA"
},
{
"path": "src/react-developer-roadmap-cn.xml",
"chars": 129380,
"preview": "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<mxGraphModel dx=\"1430\" dy=\"844\" grid=\"1\" gridSize=\"10\" guides=\"1\" tooltips=\"1\" c"
},
{
"path": "src/react-developer-roadmap-es.xml",
"chars": 130054,
"preview": "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<mxGraphModel dx=\"1398\" dy=\"816\" grid=\"1\" gridSize=\"10\" guides=\"1\" tooltips=\"1\" c"
},
{
"path": "src/react-developer-roadmap-ja.xml",
"chars": 129523,
"preview": "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<mxGraphModel dx=\"1430\" dy=\"844\" grid=\"1\" gridSize=\"10\" guides=\"1\" tooltips=\"1\" c"
},
{
"path": "src/react-developer-roadmap-ko.xml",
"chars": 16633,
"preview": "<mxfile host=\"www.draw.io\" modified=\"2019-10-13T15:56:23.118Z\" agent=\"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_0) Ap"
},
{
"path": "src/react-developer-roadmap-pt-br.xml",
"chars": 130020,
"preview": "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<mxGraphModel dx=\"1430\" dy=\"844\" grid=\"1\" gridSize=\"10\" guides=\"1\" tooltips=\"1\" c"
},
{
"path": "src/react-developer-roadmap-ru.xml",
"chars": 130118,
"preview": "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<mxGraphModel dx=\"1430\" dy=\"844\" grid=\"1\" gridSize=\"10\" guides=\"1\" tooltips=\"1\" c"
},
{
"path": "src/react-developer-roadmap.xml",
"chars": 129935,
"preview": "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<mxGraphModel dx=\"1430\" dy=\"844\" grid=\"1\" gridSize=\"10\" guides=\"1\" tooltips=\"1\" c"
},
{
"path": "translations/cn.json",
"chars": 1984,
"preview": "{\n \"React Developer in 2019\": \"2019 React 开发者\",\n \"Legends\": \"图例\",\n \"Personal must know\": \"必须掌握\",\n \"Good to know\": \"最"
},
{
"path": "translations/es.json",
"chars": 2795,
"preview": "{\n \"React Developer in 2019\": \"Desarrollador React en 2019\",\n \"Legends\": \"Legendas\",\n \"Personal must know\": \"De"
},
{
"path": "translations/ja.json",
"chars": 1921,
"preview": "{\n \"React Developer in 2019\": \"2019 React 開発者\",\n \"Legends\": \"凡例\",\n \"Personal must know\": \"必須\",\n \"Good to know\": \"知るべ"
},
{
"path": "translations/ko.json",
"chars": 2167,
"preview": "{\n \"React Developer in 2019\": \"2019년 React 개발자\",\n \"Legends\": \"중요도\",\n \"Personal must know\": \"(주관적이지만) 꼭 배우세요\",\n \"Good"
},
{
"path": "translations/pt-br.json",
"chars": 2623,
"preview": "{\n \"React Developer in 2019\": \"Desenvolvedor React em 2019\",\n \"Legends\": \"Legendas\",\n \"Personal must know\": \"Deve sab"
},
{
"path": "translations/ru.json",
"chars": 2837,
"preview": "{\n \"React Developer in 2019\": \"React-разработчик в 2019 году\",\n \"Legends\": \"Обозначения\",\n \"Personal must know\": \"Обя"
},
{
"path": "translations/translate.js",
"chars": 1364,
"preview": "const { readFile, writeFile, existsSync } = require('fs');\nconst { join } = require('path');\n\nif (!process.argv[2]) {\n "
}
]
About this extraction
This page contains the full source code of the adam-golab/react-developer-roadmap GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 24 files (867.0 KB), approximately 322.9k tokens, and a symbol index with 1 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.