30+ React Projects, Learn React JS by Building 30+ Web Apps

سرفصل های دوره

Learn React.js and its most powerful and commonly used React Hooks like, useState, useEffect, useRef, useContext.

1. Introduction

1. Introduction

2. Optional Env Setup & React Crash Course inkl Project

1. Setting up the React Development Env.

3. P01 E-signature-App

1. Project overview

2. Create Title component and general styling in React

3. Learn how useState works and manipulate name and date

4. P02-Randomize-colors

1. Project overview

2. Using events and functions

5. P03-Like my photo

1. Project overview

2. Card design

3. Install and use React Icons to the project

4. React useState to like on click and double Click

6. P04- Testimonials

1. Project overview

2. Create a React Button components

3. Get PostUsersComments using React useState and useEffect Hooks

7. P05- Alerts

1. Project overview

2. Create a Alert component

3. Automatically close alert with delay using time trigger

8. P06-Temperature-controller

1. Project overview

2. Design the Controller component

3. Change temperature using the React useState Hook

9. P07-Dark-mode

1. Project overview

2. Create a Blog component

3. Dark mode using useContext

10. P08-Slide-to-unlock

1. Project overview

2. Create the UI

3. Create Lock screen

4. Creating the Lock screen state

5. Lock the screen

11. P09-Slider App

1. Project overview

2. Create the Slider Component

3. useState hook to manipulate the Circle using the slider Component

12. P10-Hidden-search-bar

1. Project overview

2. Create the search component and general styling

3. Show search bar

4. Auto focus on the input using useRef Hook

13. P11-Magic Popup

1. Project overview

2. Create a Popup component

3. Trigger a popup and close it

4. Time Triggered popup

14. P12- Project Progress tracker

1. Project overview

2. Ui design and input outo focus with useRef and useEffect

3. Create a Progressbar component

4. Add multiple Progress Bars using map method

5. Manipulate each Progress bars data with useState

6. Random Progress Bar data with useEffect

15. P13-Dialog-box

1. Project overview

2. Dialog Box component UI design

3. Hello Dialog Box component

4. Unsubscribe Dialog Box component

5. Bounce animation effect

16. P14-Filter-contacts-app

1. Project overview

2. UI design and Autofocus using useRef and useEffect

3. Import data from JSON file

4. Create a Contact component

5. Filer contacts

17. P15- Simple Form Registration with Validation

1. Project overview

2. Form Ui

3. Handle inputs and Registrations

4. Input fields individual validation

5. Form Submission and Validation

18. P16-Notes-app

1. Project overview

2. App UI design

3. Install and use React Styled Components

4. Add New Note

5. Delete Note

6. Create Random Note types

19. P17- Responsive navigation with hamburger menu on small screens

1. Project overview

2. Create a nav component

3. Create a Nav Item component

4. Style the Nav using React Styled Components

5. Show and Hide the navbar using React useState and useEffect

6. Open and Close the Navbar using React useState and useEffec

7. Show Active nav item and change page title using React useState

20. P18-Text-animation

1. Project overview

2. Form UI style

3. Create a React FormGroup Component

4. Working with the form group component

5. Install and use Animated Text component

6. Clear and Refocus the input field

21. P19-compound-interest-rate-calc

1. Project overview

2. UI Design using FormGroup Components

3. Get values using useState hook

4. Create a component to calc the interest

5. Calc the compounded interest

22. P20-Space-penguin

1. Project overview

2. Design the Space ENV

3. Space ship component

4. Earth and Moon Components

5. Launch and Land the Ship

6. Change the Spaceship in to a Penguin

23. React Quiz

24. P21-Tasks-tracker

1. Project overview

2. Planing the components layout for the UI

3. Task tracker style using Styled components

4. Input Task Component

5. Create and Add a New Task

6. Complete and Delete Task

25. P22-Card-game-ui

1. Project overview

2. Design the Start Menu

3. Create Units Card Component

26. P23-Animated-login-form

1. Project overview

2. UI planning and Design using Components

3. Login Container design using Styled Components

4. Animate using Styled Components

27. P24-phone-book

1. Project overview

2. Phone Book main UI

3. Create a Contact React Components

4. Create a Contact List React Components

5. Display all contacts from the Contacts Database

6. Create the Toggle Search and Filter Contacts Components

7. Sort Contact A-Z and Z-A

8. Search contact

28. P25-Expenses calculator and tracker App

1. Project overview

2. Components Planing

3. Create a Expenses Form Component

4. Create a Expenses List Component

5. Create a List Item Component

6. Style the budget using Styled components

7. Add state to all components

8. Add budget using useState , useEffect and useRef

9. Save and Load data from Local Storage

10. Handle all input and submission

11. Add unique Id

12. Display all expenses

13. Clear local storage and add new expenses

14. Handle Clear all expenses from storage and UI

15. Handle Delete one expense from storage and UI

16. Handle Edit one expense from storage and UI

17. Calculate the total expenses and economies

18. Add Alerts

29. P26-mortgage-calculator

1. Project overview

2. Main component and Ui design

3. Add State to all components

4. Calculate the Loan Amount

5. Calculate monthly payments

6. Display monthly payments and Alerts

30. P27-Course-store

1. Project overview

2. Project structure and UI design

3. Create the Courses component

4. Create a Course component and design

5. Create a Database for all Courses

6. Currencies Database and converter Buttons

7. Convert the Currencies with the React useContext Hook

8. Change Course appearance depending on its currency

31. P28-Authentication App

1. Project overview

2. Ui design

3. Form Wrapper and Shake animation

4. Authentication container

5. Authentication status using context

6. Authentication User name and password

7. Authentication Login Logout and Try again

32. P29-Speech Synthesizer

1. Project overview

2. UI Structure and main component

3. Speech Narrator UI Component

4. Text splitter and Highlighted Text

5. Start Pause and Rate

33. P30-lazy-loading

1. Project overview

2. Ui

3. Get post

4. Implement Lazy load

53,700 تومان

خرید اشتراک افزودن به سبد خرید

خرید دانلودی فوری

در این روش نیاز به افزودن محصول به سبد خرید و تکمیل اطلاعات نیست و شما پس از وارد کردن ایمیل خود و طی کردن مراحل پرداخت لینک های دریافت محصولات را در ایمیل خود دریافت خواهید کرد.

تولید کننده: Udemy-Training