codedamn logocodedamn
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.7
334 ratings
3611 students enrolled
Course Creator: Team codedamn

Hang on...

Heads up!

This is an official course from Full Stack Web Developer Learning Path 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.7
Course Rating

85%

11%

1%

1%

1%

Reviews

profile pic for Relangi Sathish
Jan 26, 2022
i realy love this short and sweet clear explinations
profile pic for Neeraj Chavan
Jan 25, 2022
Great course!
profile pic for Shofiya Bootwala
Jan 25, 2022
The course is awesome to get in depth React knowledge
profile pic for Ayserz
Jan 25, 2022
Very Informative
profile pic for Arman
Jan 25, 2022
it's just awesome

Your Course Instructor

Course Instructor Image

Team codedamn

Official courses from codedamn team

Hi! We're team codedamn - and we are developers, creators, designers building the best interactive programming courses on the planet. Sign up for a free account on codedamn to stay in touch.

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)