#Learning React in a simpler way and project base learning
1. Intro. to React
Things Learned :
What is react?
How to create element and nested elements in React?
Importing React in our project via CDN links (Not preferred learn better way ahead)
2. Igniting app
Things Learned :
What is bndlers and work of is
Parcel Bundler
Installed Parcel in our project
node_modules
package.json file
package-lock.json file
3. Laying Foundation
Things Learned :
babel / polyfill
work of babel
Components -> 1. Class Based Components 2. Functional Components
JSX
Component Composition
4. Talk is cheap, show me code
Things Learned :
React.Fragment
Understanding of Config Driven UI
props
Virtual DOM
Reconciliation / Fiber
Why we need key in React element if we have more than one child with same type ?
5. Let's get hooked
Things Learned :
File structure for project
ES6 syntax of import/export
export default v/s named export
import default v/s named import
import * as obj from ....
import {...} from ...
state & useState() hook in React
why do we need state in React?
6. Exploring the world
Things Learned :
Microservices v/s Monolithic Architecture
useEffect hook
dependency array in useEffect
Shimmer UI
CORS
Conditional Rendering
We can only write JS Expressions in {} in JSX syntax
7. Finding the path
Things Learned :
Formik for from handling
react-router-dom
createBrowserRouter, Link, Outlet, RouterProvider
SPA
Types of Routing 1. client side routing 2. server side routing
Nested routing, Dynamic routing, useParams()
8. Let's get classy
Things Learned :
class based components in React
creating class based components
states and props in class based components
lifecycle methods
cleanup code writing
9. Optimizing our app
Things Learned :
custom hooks
utils in file structure
chunking / code spliting / dynamix bundling / lazy loading / on demand loading
Suspense in React
10. Jo dikhta hai wo bikta hai
Things Learned :
ways to write CSS in React
implemented tailwind in our project
11. Data is the new oil
Things Learned:
frontend = UI layer + Data layer
props drilling
React DevTools
context API
useContext, context.provider, context.consumer
12. Let's build our store
Things Learned:
Redux / Redux Toolkit
Need of Redux
dispatch, reducer, slice, store, selector(subscribing to store)
useDispatch()
useSelector()
ReduxDevtools
