React native learning Guide (one month guide):
Intro:
This syllabus to understanding the basics of react & react native , to the basics to
intermediate, it’s include the state management, native components, & practical examples
.
Syllabus:
I. Introduction to react & react native
a. Overview of react ,
II. Overview of react native
a. Setup the development environment
i. Example: hello world app
b. Basics of components and jsx
i. Profile page app
c. Props & states
i. Example counter app
d. Events handling
i. Calculator app
e. Project 01:
i. Basic ui: complete to-do list app
III. Navigation and Advanced Components
a. React Navigation
i. Example App: Simple Multi-Screen App (e.g., Home and Details
screens)
ii.
b. Lists and ScrollViews
i. Example App: Contact List App
c. Handling Forms and User InputExample App: Login Form
d. Networking and APIs
i. Example App: Weather App (fetching data from a weather API)
e. Styling and Layouts
i. Tailwindcss
ii. Bootstrap
iii. Native style api, flexbox and layouts
iv. Example App: Flexbox Layout Examples
f. Project 2: Multi-Screen App
i. Example App: Weather App with Navigation
IV. State Management and Performance Optimization
a. Advanced State Management
i. Example App: Theme Toggle App using Context API
b. Redux in React Native
i. Example App: Counter App with Redux.
c. Debugging and Testing
i. Example App: Basic Unit Testing Setup (e.g., testing a Counter
component)
d. Project 3: Advanced State Management Example App: Shopping Cart App
with Redux.
V. Native Modules and Advanced Topics
a. Native Modules and Native Code
1. Flatlist
2. Scroll View
3. View
4. Text
5. Touchable opacity , highlight , native base ,
6. Permission , pagenation , image , image basckground
ii. Example App: Basic Custom Native Module (e.g., accessing device
info)
b. External packages
1. React native – permission
2. Image picker / image crop picker
3. Axios
4. Async Storeage
5. Reat native firebase
c. Push Notifications
i. Example App: Notification Demo App (using Firebase Cloud
Messaging)
d. Deep linking
i. Example app: Deep linking demo (opening the app specific URL via
link)
e. Offline storage:
i. AsyncStorage
ii. Example app: Notes taking application
f. Publishing apps :
i. Playstore
ii. Amazon store
iii. Apple app store
iv. Fdroid and github action , etc...
VI. Cloud (optional):
a. Google cloud
b. Firebase
c. Supabase
VII. Reference
a. Reactnative documents
