Introduction to React and Components
We will start our learning with Why React? Going forward we will also learn to create components, using props and handling events.
- Why we need frontend framework like React?
- Hello World in React
- Introduction to JSX
- Using React DOM for Rendering React Elements to DOM
- Components and Props
- Using React Toolchain (create-react-app)
- Imorting and Exporting Components
- Using React Developer Tools
- Create UI Using External Data
- Typechecking with PropTypes
Exercises / Projects
- Movie Watch List App
- Blog List App Based on Given DataPRO
- Create a Button Design System using Props
- Practice EventsPRO
- Color Pallet UIPRO
Understanding State and Forms
We will learn about different types of components, making components more powerful by using state and handling user inputs.
- React vs React DOMPRO
- Different Types of Components
- State and User InterfacePRO
- Imperative vs Declarative ProgrammingPRO
- Conditional Rendering
- Handling Different Types of Input Elements
- Form ValidationPRO
- Controlled vs Uncontrolled Component
Exercises / Projects
- Making a Counter ApplicationPRO
- People of GOT with filterPRO
- FAQ Accordion
- Handling and Validation FormsPRO
- Multi Step Forms
- Shopping Cart Application
Lifecycle Methods and Routing
We will learn about the lifecycle of a component. We will also learn about client side routing using react router dom.
- Understanding Lifecycle of a Component
- Using Lifecycle Methods to Fetch Data from API
- Lifting State Up
- Client Side vs Server Side RoutingPRO
- Client Side Routing Using React Router DOM
- Handling Dynamic Routes
Exercises / Projects
- Github User Finder
- Stopwatch and Countdown TimerPRO
- Dashboard Layout with Multiple RoutesPRO
- Github Battle App
- Quiz AppPRO
- Creating Tic-Tac-Toe Game with Time Travel
Final Project: Medium clone
Take a look at the live demo of the given application and try to recreate it. To recreate you will beed API informations. You can use the link given below for API specifications.
