React 開発者ロードマップ

README in Chinese

README in English

README in Korean

README in Portuguese (Brazil)

README in Russian

README in Spanish

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)
   3. HTTP(S)について知る。リクエストメソッド (GET, POST, PUT, PATCH, DELETE, OPTIONS)
   4. Googleを活用して検索する。Power Searching with Google
   5. ターミナルに慣れる。shell(bash, zsh, fish)の設定をしてみる。
   6. データ構造とアルゴリズムについての本を読む
   7. デザインパターンについての本を読む
3. 公式サイトでReactについて学ぶ official website or complete some courses
4. 利用するツールに詳しくなる
   1. Package Managers
      • npm
      • yarn
      • pnpm
   2. Task Runners
      • npm scripts
      • gulp
   • Webpack
   • Rollup
   • Parcel
5. Styling
   1. CSS Preprocessor
      • Sass/CSS
      • PostCSS
      • Less
      • Stylus
   2. CSS Frameworks
      • Bootstrap
      • Materialize, Material UI, Material Design Lite
      • Bulma
      • Semantic UI
   3. CSS Architecture
      • BEM
      • CSS Modules
      • Atomic
      • OOCSS
      • SMACSS
      • SUITCSS
   4. CSS in JS
      • Styled Components
      • Radium
      • Emotion
      • JSS
      • Aphrodite
6. State管理
   1. Component State/Context API
   2. Redux
      1. 非同期処理 (副作用)
         • Redux Thunk
         • Redux Better Promise
         • Redux Saga
         • Redux Observable
      2. Helpers
         • Rematch
         • Reselect
      3. Data persistence
         • Redux Persist
         • Redux Phoenix
      4. Redux Form
   3. MobX
7. 型チェッカー
   • PropTypes
   • TypeScript
   • Flow
8. Form Helpers
   • Redux Form
   • Formik
   • Formsy
   • Final Form
9. Routing
   • React-Router
   • Router5
   • Redux-First Router
   • Reach Router
10. API Clients
    1. REST
       • Fetch
       • SuperAgent
       • axios
    2. GraphQL
       • Apollo
       • Relay
       • urql
11. Utility Libraries
    • Lodash
    • Moment
    • classnames
    • Numeral
    • RxJS
    • ImmutableJS
    • Ramda
12. Testing
    1. Unit Testing
       • Jest
       • Enzyme
       • Sinon
       • Mocha
       • Chai
       • AVA
       • Tape
    2. End to End Testing
       • Selenium, Webdriver
       • Cypress
       • Puppeteer
       • Cucumber.js
       • Nightwatch.js
    3. Integration Testing
       • Karma
13. 国際化(Internationalization)
    • React Intl
    • React i18next
14. Server Side Rendering
    • Next.js
    • After.js
    • Rogue
15. 静的サイトジェネレータ(Static Site Generator)
    • Gatsby
16. Backend Framework Integration
    • React on Rails
17. Mobile
    • React Native
    • Cordova/Phonegap
18. Desktop
    • Proton Native
    • Electron
    • React Native Windows
19. Virtual Reality
    • React 360

Wrap Up

ロードマップに改善できる点があれば、Pull Requestを開いてissueを投稿してください。私もあなたがSTARをつけたくなるように、このロードマップを改善し続けます。

Contribution

このロードマップは Draw.io を利用してつくられています。プロジェクトファイルは /src ディレクトリにあります。 修正するときは, draw.ioを開いて Open Existing Diagram をクリックし xml ファイルを選択してください。ロードマップが開きます。それを更新し png としてエクスポートして、ファイルとreadmeを更新し, Pull Requestを作成してください.

• 改善のプルリクエストを開く
• 問題のアイデアを話し合う
• 広く周知する

License