React & Nextjs
Learn to build Single Page Applications (SPA) using the Reactjs library. Along the way, use the Nextjs framework for building maintainable reactjs projects!
19 topics
42 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 the Nextjs framework for structuring and building maintainable react applications.
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
- Introduction to context api and how it helps in global state management
- Provider and Consumer
- Installing axios
- GET, POST calls using Axios
- useState
- useEffect
- useLayoutEffect
- useRef
- useMemo
- useCallback
- Building custom hooks
- Introduction to React testing library (RTL)
- Testing components
- Mocking collaborators
- Testing components with Redux
- Features of the Nextjs framework
- Installation
- Why a framework ?
- Typical Nextjs project structure – App router
- Defining routes in Nextjs
- Layouts, pages and templates
- Navigation across routes and redirection
- Dynamic routes
- Parallel routes
- Error handling and loading UI
- Defining middleware
- Fetching of data and revalidating it
- Mutation of data using server actions
- Caching
- Server components
- Client components
- Using both together
- Installing tailwindcss in a Nextjs application
- Using Vitest for unit testing
- Using Playwright for End to End testing
- Using nextauth.js for implementing authentication in Nextjs applications
- Nextjs CLI
- Internationalization in Nextjs
- Fonts, images and videos
- Metadata
- Lazy loading
- Serving static assets
The skills
ES6
JSX
Unit tests
Integration tests
Nextjs
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 Nextjs