Skip to content

Latest commit

 

History

History
47 lines (40 loc) · 2.33 KB

TUTORIAL.md

File metadata and controls

47 lines (40 loc) · 2.33 KB
Raw

React Ecosystem for building products faster

1. Intro

  1. What is React and why you should learn it? see React

React is just a javascript library for building user interfaces. You should learn it because Facebook did it, and so did Baidu... It is also easier to learn and has better performance than other frameworks. And you can feel the surprising trend of it, everybody is talking about it. And React Ecosystem is a perfect solution for building all kinds of apps in pure javascript language.

2. Setup

  1. Choosing Code editor (Sublime Text 3)
  2. Installing Node.js and npm (node 7)
  3. Setting up Webpack and Babel (webpack 2.0, ES 2015, ES7, JSX).
  4. Setting up environment (hot reload, production and development)
  5. Setting up Express as server, GraphQL as query language for your API, Chrome as browser.
  6. React Native CLI Installation and ensure simulator is installed

3. Simple React

  1. Learning JSX with HelloWorld React.
  2. Component props, events, callback and lifecycle.
  3. Nested Components and containers, styling.
  4. React-router for Page routing.
  5. Building simple static website like portfolio.

4. Advanced React

  1. Redux - Predictable state container for better managing component state
  2. Redux-form - manage your form state in Redux (validation, model submission)
  3. Relay - for building data-driven from GraphQL API with consistency, optimistic updates, and error handling
  4. Redux-saga - make side effects easier and better without callback, especially for asynchronous things like data fetching and impure things like accessing the browser cache, work well with redux-persist.
  5. Building a simple CMS.

5. Testing and Optimizing React

  1. Tape - for writing unit tests with better readability and less code.
  2. Sharing code between mobile, web, and server for less maintenance, including store, components, and utils folders (less code, easier to optimize code)
  3. Review carefully each shouldComponentUpdate method.
  4. UglifyJS2 - library for optimizing javascript code (web, mobile, server), used in production mode

6. Deploying React

  1. Using rsync and sshpass for autonomous deploy via command scripts.
  2. Using Xcode and Android Studio to build your react-native apps.
  3. Using codepush service to update javascript logic to your apps instantly.