Course image for React Fundamentals 2021

React Fundamentals 2021

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.9
34 ratings
1897 developers learning
Course Creator: Mehul Mohan

Hang on...

Heads up!

This is an official course from Frontend Web 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:01:13 total duration

Introduction to React

(4 lectures • 13 minutes)
  Introduction (Watch video)
00:59
  First Program (Watch video)
04:42
  First Program Explained (Watch video)
02:26
  React Hello World (Practice concept)
05:00
  File structure (Watch video)
05:48
  Components (Watch video)
05:16
  JSX Expressions (Watch video)
05:51
  DOM Events (Watch video)
03:58
  Stateful Components - useState (Watch video)
06:43
  Building an increment decrement counter (Practice concept)
05:00
  How JSX expressions work? (Watch video)
03:28
  Forms (Watch video)
07:25
  Conditional Rendering (Watch video)
05:29
  Props (Watch video)
05:34
  props.children (Watch video)
03:41
  Lists (Watch video)
06:00
  Routing (react-router v5) (Watch video)
07:27
  Link (Watch video)
04:07
  Parameterized Routing (Watch video)
04:17
  useRef Hook (Watch video)
03:38
  useEffect Hook (Watch video)
09:34
  Intro to Context API (Watch video)
04:47
  useContext (Watch video)
05:03
  Introduction (Practice concept)
05:00
  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 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

Course Reviews

Aug 02, 2021
Very nice course thanks
Jul 26, 2021
love the course
Jul 29, 2021
Excellent style of teaching with exercises.
Jul 23, 2021
The course content is impressive.
Jul 19, 2021
this app is pretty sweet! I just finished with one of the in-app code tests which was actually really cool, it had me write some code, then tested the code to see if it worked. keep in mind this was a webpage application it tested. The lectures are also extremely thorough but quick and to the point at the same time, I love this.

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 :)
codedamn logo

We ♥ quality. And we would love to see your growth. Hence, codedamn comes with a pro plan for advanced and accelerated learning!

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
  • Support over WhatsApp
  • Full learning path unlocked
  • Unlimited hands-on practice
Try codedamn Pro (7 day free refund)