Module 1:
FRONTEND
- Introduction to Node, npm, React, create-react-app
- What is JSX.
- Inline styling React
- Class vs ClassName
- Using JS variables in JSX
- Image in JSX
- Duplicate same component
- Props?
- Show customized children
- State
- Application lifecycle (Class component)
- Error Handling
- Passing states as props
- Specify default Props
- Conditional rendering
- Input forms and Forms – Events
- Controlled/Uncontrolled elements
- Keyword ‘this’ (Class components)
- Communicated from Child to Parent
- Axios – Fetch Data
- Async await
- List rendering – (map loop and for loop)
Module 2:
HOOKS
- Useful Hooks
- Customized Hook
- Deploy of Vercel
Module 3:
Redux and Redux/toolkit
- Analogy of Redux
- Reducers
- Creating Reducers
- Integration of React with Redux
- MapState to Props
- Action creator
- Async Await in Redux
- Applying Middleware
- Hooks in Redux (useDispatch – useSelector)
- Memonizing
- Navigation with React Routers
- React Router initialization(v5) – current version(v6)
- Different Route types
- Always visible components
- Redirections
- Link
- OAuth for Server vs Browser apps
- Google OAuth
- Redux Dev Tool
- Integration OAuth with Redux
- Redux form handling
- Validation Messages
- REST based React App
- Params and Body
- History
- React Portal
- Context System
- Context vs Redux
Module 4:
BACKEND
- REST
- What is Node?
- What is Express?
- How Code Execution works?
- Start Listening to Port
- Routes with Express
- What is JSON?
- Params vs Body
- Body Parser
- HTTP Methods (POST, DELETE, GET, PUT)
- Error Handling
- Async Await
- Try catch
- Environment Variables
- Calling 3rd party API – eg Google places
- What is MongoDB
- SQL vs NOSQL
- Setting up mongodb (Locally)
- Installing Mongoose
- Understanding Models & Schemas
- Creating and Registering Models
- Creating First MongoDB record
- Getting records
- Updating Record
- Deleting Record
- Using Queries with “GET”
- Authorization – JWT and passport.js
- Encrypt password – bcryptjs
- Authy
- Secure Routes
- Getting user information from JWT
- Response Status Codes 2XX, 3XX, 4XX, 5XX
Module 5:
Connecting Backend to FrontEnd
- Using Axios to call API
- CORS Policies
