Course image for Learn React 18 for free

Learn React 18 for free

Learn basics about React UI library and understand how to work with React for small to mid-sized projects

5 hours+ of total content
4.8
124 ratings
3301 students enrolled
Course Creator: Mehul Mohan

Hang on...

Heads up!

This is an official course from Full Stack Developer learning path.

Goals

  • Build powerful, fast, user-friendly and reactive web apps
  • Provide amazing user experiences by leveraging the power of JavaScript with ease
  • Learn React Hooks & Class-based Components
  • Apply for high-paid jobs or work as a freelancer in one the most-demanded sectors you can find in web dev right now

Description

JavaScript is the major driver of modern web applications since it's the only programming language which runs in the browser and hence allows you to provide highly reactive apps. You'll be able to achieve mobile-app like user experiences in the web.

But using JavaScript can be challenging - it quickly becomes overwhelming to create a nice web app with vanilla JavaScript and jQuery only.

React to the rescue!

React is all about components - basically custom HTML elements - with which you can quickly build amazing and powerful web apps. Just build a component once, configure it to your needs, dynamically pass data into it (or listen to your own events!) and re-use it as often as needed.

Need to display a list of users in your app? It's as simple as creating a "User" component and outputting it as often as needed.

This course will start at the very basics and explain what exactly React is and how you may use it (and for which kind of apps). Thereafter, we'll go all the way from basic to advanced. We'll not just scratch the surface but dive deeply into React as well as popular libraries like react-router and Redux.

By the end of the course, you can build amazing React (single page) applications!

Course Structure

60 lectures 05:14:10 total duration

Introduction to React

(5 lectures • 24 minutes)
  Introduction (Watch video)
01:31
  Developer Setup (Watch video)
05:04
  First Program (Watch video)
06:17
  First Program Explained (Watch video)
07:02
  React Hello World (Practice concept)
05:00
  createRoot in React 18 (Watch video)
03:15
  Components (Watch video)
04:09
  JSX Expressions (Watch video)
08:03
  Props (Watch video)
05:28
  Conditional Rendering (Watch video)
05:59
  DOM Events (Watch video)
03:20
  Stateful React components (Watch video)
07:27
  useState functional argument (Watch video)
08:01
  Building an increment decrement counter (Practice concept)
05:00
  Random quote generator (Watch video)
04:51
  useEffect Hook (Watch video)
05:53
  Introduction (Watch video)
00:59
  Building to do app (Watch video)
09:47
  Running function on enter key (Watch video)
07:29
  Delete item (Watch video)
06:59
  Creating UI for first question (Practice concept)
05:00
  Creating Single Question component (Practice concept)
05:00
  Adding answers to questions (Practice concept)
05:00
  Expanding and collapsing answers (Practice concept)
05:00
  Introduction to project (Practice concept)
05:00
  Setting the first question dynamically (Practice concept)
05:00
  Setting the first question answers dynamically (Practice concept)
05:00
  Adding question index state variable (Practice concept)
05:00
  Handling quiz end (Practice concept)
05:00
  Calculating quiz score (Practice concept)
05:00
  Introduction to project (Practice concept)
05:00
  Creating birthday view container (Practice concept)
05:00
  Populating static list data (Practice concept)
05:00
  Displaying the UI (Practice concept)
05:00
  Adding a Clear button (Practice concept)
05:00
  Introduction (Practice concept)
05:00
  Creating the project structure (Practice concept)
05:00
  Adding player styles (Practice concept)
05:00
  Loading multiple videos through API (Practice concept)
05:00
  Snapping videos to top (Practice concept)
05:00
  Creating video metadata panel (Practice concept)
05:00
  Creating like, share, comment and music disc buttons (Practice concept)
05:00
  Making like button work (Practice concept)
05:00
  Making videos play/pause correctly (Practice concept)
05:00
  Introduction (Watch video)
09:10
  Exact route match (Watch video)
03:15
  Dynamic Routes (Watch video)
05:00
  Data fetching in React (Watch video)
05:11
  Introduction to Project (Practice concept)
05:00
  Fetching Tours Data (Practice concept)
05:00
  Setting Loader (Practice concept)
05:00
  Creating Tours UI (Practice concept)
05:00
  Adding "Read More" button (Practice concept)
05:00
  Removing Tours (Practice concept)
05:00
  Introduction to project (Practice concept)
05:00
  Getting basic UI Ready (Practice concept)
05:00
  Passing data to Menu page (Practice concept)
05:00
  Creating Categories (Practice concept)
05:00
  Creating filter function (Practice concept)
05:00
  Making categories dynamic (Practice concept)
05:00

Student feedback

4.8
Course Rating

90%

7%

0%

2%

1%

Reviews

Oct 25, 2021
very helpful and nice course
Oct 24, 2021
literally i tried so many platforms for web dev i loved this course structure and quality more than any other platform he is giving to us
Oct 24, 2021
Helpful
Oct 22, 2021
The most extensive one I've ever seen...would recommend to anyone who wants to go full stack while still having a strong understanding of the subject.
Oct 23, 2021
Всё классно!

Your Course Instructor

Course Instructor Image

Mehul Mohan

Full-stack developer and security researcher

I'm a full-stack developer working with JavaScript and its associated runtimes for the past 7 years. I love to play with code and make something useful out of it! You can find me on social media, I'm quite active there :)

Upgrade to codedamn Pro Plan and unlock more courses for accelerated learning. Unlimited courses, interactive learning and more.

Free

  • HD video content
  • Certificate of completion
  • Mentorship from codedamn staff
  • Support over WhatsApp
  • Full learning path unlocked
  • Unlimited hands-on practice

Pro

  • HD video content
  • Certificate of completion
  • Mentorship from codedamn staff
  • All exclusive courses unlocked
  • Unlimited hands-on practice
Try codedamn Pro (14-day free refund)