7 Projects in 7 Days - Basic to Advance ReactJS

Name: 7 Projects in 7 Days - Basic to Advance ReactJS
Rating: 4.5 (19 reviews)

Dive into React basics, TailwindCSS, learn useState, useRef, useEffect, prop passing, fetch APIs & other concepts.

Created byAniket Panchal

Last updated 11/2023

English

English [Auto],

What you'll learn

Project based teaching to sharpen your ReactJS skills
Understand the core concepts of React, including components, JSX, state management, and props, laying a strong groundwork for advanced learning.
Dive into useState, useEffect, and useRef, gaining a deep understanding of React hooks and their practical application in building interactive interfaces.
Learn how to fetch data from external APIs, incorporating real-time information into your applications, a crucial skill in modern web development.
Implement responsive design using Tailwind CSS.

Course content

8 sections • 33 lectures • 3h 49m total length

Introduction1:00

Project Introduction0:55
Part 14:56
To Download Source code
Download Zip Folder
Extract folder
Go to Code Editor
In terminal type "npm i"
After downloaded node module
You can start Your app type "npm start"
Part 28:12
Part 35:40
Build a password generator UI with flexbox alignment and centered content. Style with purple background, white text, gold font, rounded elements, and hover effects, then preview the password logic next.
Part 415:53
build a react password generator using useState to manage password state, validate lowercase, uppercase, numbers, and special characters, and generate an eight-character password by random character selection.

Project Introduction1:45
Develop a reactive expense tracker by adding income and expenses, updating the balance in real time as transactions like salary and fees are entered.
Part 16:15
To Download Source code
Download Zip Folder
Extract folder
Go to Code Editor
In terminal type "npm i"
After downloaded node module
You can start Your app type "npm start"
Part 26:19
In part 2, build a react app interface with flexbox centering, create income and expense sections, and manage balance state and transactions to prepare a transaction menu.
Part 312:13
Part 413:46

Project Introduction1:14
Part 14:58
To Download Source code
Download Zip Folder
Extract folder
Go to Code Editor
In terminal type "npm i"
After downloaded node module
You can start Your app type "npm start"
Part 29:09
Leverage the open weather API to fetch city weather data by building an asynchronous fetch function, wiring it to a React useEffect, and display results in the app.
Part 314:50
Display weather data on a React page, binding city input to state, rendering temperature, and styling with gradients and icons for a polished, responsive UI.
Part 45:13

Project Introduction0:51
Part 13:24
To Download Source code
Download Zip Folder
Extract folder
Go to Code Editor
In terminal type "npm i"
After downloaded node module
You can start Your app type "npm start"
Part 213:24
Part 311:10
Debug and finalize a ReactJS quiz app by correcting data handling to use data.results, enabling multiple choice questions, and implementing restart and start interactions, with loading states and shuffled answers.

Project Introduction0:52
Learn to build a tic tac toe game in the final project, including win conditions, reset, and play again, with a demo and setup the react app to start coding.
Part 13:09
To Download Source code
Download Zip Folder
Extract folder
Go to Code Editor
In terminal type "npm i"
After downloaded node module
You can start Your app type "npm start"
Part 28:35
Learn to build a ReactJS UI in part 2 by downloading assets, applying flex and gradient styling, and managing box state and counters for a simple game.
Part 315:49
Part 44:15

Requirements

No prior knowledge of ReactJS or JavaScript is required.
This course is designed to accommodate beginners, making it accessible to anyone eager to learn React and build exciting projects.

Description

Welcome to an all-levels journey into ReactJS! Whether you're a beginner or seeking to fortify your React knowledge, this course offers a comprehensive exploration of fundamental concepts while diving into the intricacies of React hooks. Starting with React fundamentals, including components, JSX, state, and props, the course gradually introduces hooks like useState, useRef and useEffect, enabling all participants to build a solid foundation.

Embark on a transformative ReactJS adventure in this comprehensive course! Over seven enriching days, delve into the realm of React by creating seven practical projects:

Password Generator: Generate secure passwords with varying complexities, mastering state management and user interactivity.
Todo List: Build an intuitive task organizer, honing your skills in component structuring and handling user inputs.
Expense Tracker: Create a financial tool to track expenses, focusing on data management and manipulation.
Temperature(Weather) App: Develop a dynamic application to fetch and display weather data, learning API integration and responsive design.
Currency Converter: Construct a real-time currency converter, diving into API usage and data fetching techniques.
Quiz App: Craft an engaging quiz application, refining your knowledge in conditional rendering and Fetch APIs.
Tic Tac Toe Game: Create a classic game, applying React concepts to build a responsive and interactive gaming experience.

Throughout this course, you'll explore React hooks such as useState, useEffect, and useRef. Understand prop passing, manage state effectively, and implement fetch APIs seamlessly. Each project is carefully designed to reinforce fundamental React concepts while providing hands-on experience in real-world scenarios.

The culmination of this seven-day journey, you'll not just have a collection of seven remarkable projects but also a thorough grasp of ReactJS, equipping you to craft dynamic, engaging web applications with confidence!

Who this course is for:

This course is designed for aspiring developers for beginners and intermediate level.
Whether you're a beginner seeking to explore React and build a strong foundation or an intermediate learner aiming to deepen your understanding of React hooks and practical application, this course caters to all.

7 Projects in 7 Days - Basic to Advance ReactJS

What you'll learn

Explore related topics

Course content

Introduction1 lecture • 1min

Day 1 - Password Generator React App5 lectures • 36min

Day 2 - To-Do List React App4 lectures • 32min

Day 3 - Expense Tracker React App5 lectures • 40min

Day 4 - Weather App5 lectures • 35min

Day 5 - Currency Converter React App4 lectures • 23min

Day 6 - Quiz App4 lectures • 29min

Day 7 - Tic Tac Toe Game5 lectures • 33min

Requirements

Description

Who this course is for: