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

3.React ecosystem #

Created Tuesday 08 September 2020

We need the following for a react project:

Babel - for writing JSX
Webpack - bundles the files into singular build files.