Reactjs
Learn to build Single Page Applications (SPA) using the Reactjs library. Along the way, use the Redux toolkit for building maintainable reactjs projects!
14 topics
32 hours
Intermediate
Certificate
The course
In this course we learn the ropes for building Single Page Applications (SPA) using the Reactjs library. Directly start with modern day reactjs using functional components. Play with JSX UI templating. Learn how to build easy forms in reactjs. Get into some advanced UI design patterns for building maintainable components. Dive into the world of Redux for global state management. While doing all this, learn to write tests to verify the working of the software!
Pre requisites : Javascript, HTML, a little bit of CSS, web fundamentals, optimism
The journey
- Introduction to Single page Applications and how they are different from existing web applications architecture
- Introducing Reactjs
- Creating a new react project using create-react-app
- Chrome developer console Reactjs extensions installation
- VSCode IDE
- ES6 programming
- Basic building blocks of the GUI
- Functional components
- JSX syntax
- Passing inputs to components using props
- Type checking of props using prop types
- Difference between state and props
- Building stateful functional components using hooks api
- Lifecycle of a functional component
- Events
- Error management
- Using ternary operators in JSX
- Using simple if-else operations in JSX
- Repeating GUI elements using the map operator
- React fragments
- Controlled form components in React
- Uncontrolled form components in React
- Formik library for building easy forms in React
- Render props
- Higher order components (HOC)
- Custom hooks
- Purpose of React portals
- Implementing modals using react portals
- Need for redux
- Installation of redux library
- Introduction to store, reducers, actions, dispatch
- How redux helps in managing global state
- Using selectors in redux. Installing the reselect library
- Persisting data in local storage using redux-persist library
- Redux middlewares. Using logger middleware to record redux workflow
- Introduction to context api and how it helps in global state management
- Provider and Consumer
- Installing axios
- GET, POST calls using Axios
- Moving asynchronous calls to redux using redux thunk
- Installing redux thunk library
- useState
- useEffect
- useLayoutEffect
- useRef
- useMemo
- useCallback
- Using hooks from react-redux library in redux code
- Building custom hooks
- Introduction to redux toolkit and installation
- Simplified store and reducer creation
- Rewriting redux code with redux toolkit
- RTK queries for making asynchronous api calls
- Introduction to React testing library (RTL)
- Testing components
- Mocking collaborators
- Testing components with Redux
- Need for code splitting
- Using React lazy and suspense API for the same
- Splitting at component level
- Splitting at route component level
The skills
ES6
JSX
Unit tests
Integration tests
State management
Api calls
HTML
UI composition
Design patterns
The projects
Project 1Library management
During the course code along, build a nice, almost functional library management system for managing books, authentication, issuing/returning books
Project 2Movie ticket booking
As part of the capstone project, build a movie ticket booking system using Reactjs and an already backed-in backend.