README
home
1 motivation
2 resources
3 roadmap
4 resource itineraries
0 List of resources
1 Complete Web Developer 2020
2 React the complete guide
0 Course info
10 side effects, reducers, contextAPI
110 useEffect hook
114 useEffect cleanup function
117 useReducer hook
121 Introducing React Context (Context API)
122 Using React Context API
123 Context Limitations
127 Rules of hooks
129 Forward refs
11 FoodOrder app
133 Adding a header component
137 Adding a form
141 Managing cart and modal state
149 Using the useEffect hook
12 Behind the scenes of React and optimization techniques
151 Module Introduction
152 How React Really Works
153 Component updates in action
154 A closer look at child component re evaluation
155 Preventing Unnecessary ReEvaluations with React memo
156 Prevent function re creation with useCallback
157 useCallback and its dependencies
159 Component instance and state
160 State scheduling and batching
161 Optimizing with useMemo
13 Class based components
163 Module introduction
164 What and why
165 Adding a first class based component
166 Working with state and events
167 Component lifecycles in class components
169 Context API with class components
170 Class vs function components a summary
171 Introducing Error Boundaries
14 Sending HTTP requests
173 Module Introduction
174 How to not connect to a database
175 Using the Star Wars API
176 Our starting App and backend
177 Sending a GET request
178 Using async await
180 Handling HTTP errors
182 Preparing the project for the next steps
183 Sending a POST request
15 Building Custom React Hooks
186 Module Introduction
187 What are Custom hooks
188 Creating Custom React Hook
188 z A doubt about custom hooks
191 A more realistic example of custom hook
16 Forms and user input detailed
197 Module introduction
199 Whats so complex about forms
200 Dealing with form submission and user input
201 Adding Basic Validation
202 Providing validation feedback
203 Handling the was untouched state
204 Reacting on lost focus
205 Refactoring and deriving states
206 Managing overall form validity
207 Adding a custom input hook
211 Summary
17 Continue with FoodOrder app
214 Module introduction
215 Moving available meals to the backend
219 Adding a checkout form
18 Redux
226 Module introduction
227 Another look at state in React apps
228 Redux vs React Context
229 How Redux works
230 1 Core Redux with React
230 Core Redux
231 Redux with React
237 Redux with React for class components
241 Redux challenges and Introducing Redux Toolkit
242 React Toolkit working
19 Advanced Redux INCOMPLETE
250 Module Introduction
251 Redux and side effects
20 MultiPage SPA React Router
266 Module Introduction
267 What is Routing and Why
268 Installing React Router
269 Defining and using Routes
270 Working with Links
271 Using NavLinks
274 1 exact and v5 matching criteria
274 2 Switch
275 Nested routes
276 Redirecting the user
277 272 Dynamic Routes
283 Adding a not found page
284 Programmatic navigation
285 Prompt before navigation
286 Working with Query Params
288 Writing more flexible Routing code
289 v5 Summary
290 Upgrading to React Router v6
292 v6 4 SKIPPED
21 Deploying React apps
294 Module Introduction
295 Deployment steps
296 Adding Lazy loading
297 Building the code for production
298 Getting started with deployment
299 Exploring routing issues and finishing deployment
22 Adding authentication to React apps
301 Module introduction
302 What How and Why
303 Adding user signup
304 Three basic flows
309 Polishing the UI redirects
310 Logout
311 Protected pages
312. Persisting login state
313. Auto logout
23 Intro to Next js
1 Basic Info
316 Module introduction
317 What is Next js
318 1st key feature SSR
319 2nd key feature simplifed routing file based
320 3rd key feature fullstack utilities
2 Project setup and first page
321 Creating a new Next app
322 Analyzing Next app project structure
323 Adding first pages
3 Nested and dynamic pages
324 Nested paths and pages
325 Creating dynamic pages with parameters
4 Links
326 Links
5 Onwards to a bigger project
328 Onwards to a bigger project
331 Outputting a List of meetups
332 The app js file and layout wrapper
333 Programmatic navigation
6 Prerendering and related constructs
335 How pre rendering works and problems we face
338 More about SSR with getServerSideProps
339 SSG for dynamic routes getStaticPaths
7 API Routes
341 Introducing API Routes
342 Working with MongoDB
343 Continuing with the project
344 More about API routes
8 Deploying Nextjs projects
346 Adding head Metadata
347 Deploying Nextjs projects
24 Animating React apps DEFERRING
25 Replacing Redux with React Hooks DEFERRING
25 Replacing Redux with React hooks
369 Module introduction
371 Why would you replace Redux
372 Alternative using the Context API
375 Alternative Custom hook as a Store
26 Testing React Apps
384 Module Introduction
385 What is testing and Why
386 Understanding different kinds of tests
387 What to Test and How to Test
388 Understanding the Techinical setup and tools involved
389 Running a first test
390 Writing our first test
391 Grouping tests together with test suites
392 Testing user interaction and state
393 Testing Connected Components
394 Testing Asynchronous Code
395 Working with Mocks
396. Summary and Further Resources
5 Until section 5
6 Styling in React INCOMPLETE
7 Debugging React apps
8 Practice Project
9 Fragments, Portals, Refs
103 Fragments
105 Portals
106 Refs
107 controlled vs uncontrolled components
RN Mosh
Ashish overview RN
first hour
second hour
third hour
Part 1
Getting started
Prerequisites
Logging
Debugging
Expo publish
Popular apps built with RN
What is React Native
Expo
Development setup
First app
Emulators
Fundamental concepts
Core Components and APIs
View
Text
Image
Touchables
Button
Alert
StyleSheet
Platform
3 Layout
Exercises
Dimensions
Detecting Orientation Changes
Flexbox
Absolute and Relative Positioning
Styling
Introduction
Exercises
Borders
Shadows
Paddings and Margins
Styling Text
Encapsulating Styles And Wrappers
Icons
Platform specific Code
Organizing Styles
Lists
FlatList
Multiple FlatLists
Swipes
Deleting item aka inner click
Input Components
TextInput
Switch
DatePicker
DropdownPicker
Modal
Forms
Additional Improvements
Part 2
Native features
Native feature intro
Getting Location
Image pick trial
Navigation
Basic code
Rules
Tab navigators
Route enums in React Native
Networking
1 Intro
2 Inspecting API calls
Loading animations
Sending images
Progress
Progress bar UI
Slow connection and loader
Offline support
Intro
1 Caching images
2 Thumbnails loader
Coding with redux
Storing user actions when offline
Showing offline notice
Offline strategies
Detecting network status
Caching
AsyncStorage
The cache layer
Coding the cache layer
Usage of cache layer
Authentication
Auth Flow
Persist across restarts
Overlay
JWT lib
Notifications
Intro to push notifications
Push notification providers
Flow
Getting push notification token
Send test notification
1 Notifications from the server
2 Detect notification
1 Navigate on notification
2 Local notifications
Distribution
Distributing to the App store
Building the android app
Distributing to playstore
OTA updates
App Icon
Optimize assets
Optimize bundle
Error reporting
Environment management
Expo publish
Build standalone apps
Build the ios app
5 projects
tooling
README
obsidian templates
README
templater
timestamp
title and date
w2h
vault
0 npm
1 Introduction to NPM
2 Node and NPM
3 Installing and using NPM packages
1 React info and setup
0 SPA W2H
1 create react app
0 index
1 Folder structure
2 Making files and folders
3 React ecosystem
2 Why React
3 How React works
4 Migrating to Vite
5 Environment variables
6 Dev Tools
2 React basics
0 index
1 JSX
2 React Components
0 React elements
1 Components
2 Function based component
2 importing and exporting in React
3 React Components
4 Conditional rendering in JSX
5 Rendering lists
6 Organizing Components
3 styling, props, children
1 1 PropTypes and defaultProps
1 React Props
2 Styles in React
1 Problem of styling in component based apps
2 Normal styling
3 Dynamic styling
4 CSS modules
5 Styled components
3 Wrapper components
4 State
1 Events and handlers in React
2 1 What is state
2 2 State using useState hook
3 Working with multiple states
4 Two way binding
5 Lifting state up
6 State management
1 State management W2H
5 Lifecycle and hooks
1 1 React lifecycle methods
1 React lifecycle
1 React lifecycle hooks TO BE DELETED
2 1 React hooks
2 1 Why React hooks
2 2 Deriving all hooks from lifecycle
3 1 useEffect cleanup function
3 useEffect hook
6 More aspects of React
1 Routing
2 Architecture beyond HTML
3 Unidirectional data flow and Flux
4 Code splitting
5 Redux
8 Misc
1 Building the deployable
1 Testing of React apps
Routing enums web
9 React Native
1 setup
2 styling
1 Tailwind setup in RN
3 Basics
0. Motivation
#
Created Monday 01 November 2021