jack1118/rnstudyplan

FIHTDC React Native Study Plan

Contents

• Prerequisites
• Setting up the development environment
• Lessons

Prerequisites

1. ES6 and Advanced Javascript
2. Node js
3. React
4. Redux with React
5. Flexbox
6. Optional — Good to know
   Some more tools for your arsenal.
   • redux-thunk
   • redux-saga
   • LESS, SASS
   • React hooks
   • Typescript
   • Proptypes
   • Any database to connect your app, preferably Firebase (it is a good cloud solution by Google for authentication, databases, storage and more. But if you are short of time or like any other database then you can skip)

Setting up the development environment

Refer to reactnative.dev to build your first React Native app by the following command.

npx react-native init AwesomeProject

Lessons

1. JavaScript, ES6, TypeScript (3, puals, 2/22)
   • Focus on TypeScript
2. React, Props, State (Done(Tristan), 1/18)
3. React Native
   • (4, Neo, 2/25)
     • Architecture Overview
     • React Native Components
     • Style
   • (4, Neo, 3/1)
     • Event Handling
     • Component Lifecycle
4. Lists, User Input (4, Henly, 2/18)
   • Core Components and APIs
   • ScrollView
   • FlatList
   • SectionList
5. Navigation (3, Done(Ian), 1/27)
   • react-navigation
   • SwitchNavigator
   • navigation prop
   • StackNavigator
   • Configuring navigators
   • TabNavigator
   • Composing navigators
6. Data (4, Tony, 2/17)
   • Database
   • Promises, Async/Await
   • http request
7. Flux, Redux, Async Redux (4, Perry, 2/17)
   • Reducer
   • Store
   • Actions
   • HOCs
   • redux-thunk
   • persisting state
   • redux-persist
8. Theme, i18n (4, xuemin, 2/25)
9. Debugging, performance (4, Done(Jack), 1/6)
10. Deploying, Testing (4, zhihan, 2/24)
11. Create a Native Module (Done(Perry), 1/13)

Output

1. Detailed study item plan on the first day
2. Slide/Materials
3. Presentation with at least a demo

Maintainers

• [email protected]
• [email protected]
• [email protected]