React - Complete Developer Course with Hands-On Projects

Focused View

YouAccel Training,Blue Digital Media

10:24:44

12 View

1 - Introduction to React

1 - Course-Files.zip

1 - Skills Required.mp4

01:03

2 - What is React.mp4

04:49

2 - Project 1 Build a Calculator in React

3 - Project Overview.mp4

01:05

4 - Hello React.mp4

06:31

5 - Tools Needed.mp4

01:09

6 - Code Pen.mp4

04:47

7 - Intro to JSX.mp4

04:12

8 - Functional Components in React.mp4

05:39

9 - Why Components.mp4

03:09

10 - Intro to Props in React.mp4

03:59

11 - React Components Props and Callbacks.mp4

04:23

12 - Building the Calculator Visuals.mp4

11:08

13 - OnClick Events in React.mp4

05:54

14 - Passing Parameters in Callback Functions.mp4

04:36

15 - Using React State Hook.mp4

04:49

16 - Implementing the calculator Display.mp4

07:35

17 - Implementing the calculator Operators.mp4

05:16

18 - Debugging in React.mp4

05:16

19 - Project Summary.mp4

01:56

3 - Project 2 Build a Connect4 Clone in React

20 - Project Introduction What We Will Build.mp4

01:34

21 - Tools Needed.mp4

01:01

22 - Creating the Game Board.mp4

11:56

23 - Game Circle OnClickEvent.mp4

05:41

24 - Passing Props Destructing React Children.mp4

07:04

25 - Passing Arguments to Click Events.mp4

09:25

26 - Inline Styling.mp4

05:47

27 - Square to Circle Component.mp4

13:18

28 - Global Styling.mp4

03:59

29 - Dynamic Styling.mp4

03:59

30 - Dynamic Classes.mp4

03:47

31 - Handling Callbacks.mp4

03:47

32 - Using React State Hook again.mp4

14:32

33 - Updating the Player Circle.mp4

17:12

34 - Initializing the Game Board.mp4

08:20

35 - React Key Property.mp4

02:11

36 - Styling the Game Board Header and Footer.mp4

11:16

37 - Calculating the Winner.mp4

13:38

38 - Displaying the Winner.mp4

14:41

39 - Determining a Draw Condition.mp4

05:50

40 - React Lifecycle Events.mp4

03:24

41 - Initializing the Game.mp4

06:23

42 - Suggesting a Move Implementing a Computer Player.mp4

12:12

43 - Smart Computer Player Basic AI.mp4

19:07

44 - CSS Variables.mp4

07:14

45 - Conditional Rendering.mp4

08:22

46 - Deploy to Netlify.mp4

06:07

47 - Deploy to Surge.mp4

02:47

48 - Project Summary.mp4

06:23

4 - Project 3 Build an ECommerce Site in React

49 - Project Introduction What We Build.mp4

02:00

50 - Scaffolding the Project.mp4

04:04

51 - Intro to JSON Server.mp4

04:07

52 - Fetch API.mp4

10:41

53 - Styling the Store.mp4

04:14

54 - Rendering the Categories.mp4

10:56

55 - Binding the Products.mp4

08:12

56 - Refactor the Fetch API call.mp4

08:56

57 - Dealing with errors in Fetch API.mp4

08:33

58 - Tidy the Fetch API call.mp4

02:28

59 - Styling the Product List.mp4

13:07

60 - Installing React Router.mp4

06:14

61 - Fixing the Key Warning.mp4

04:04

62 - React Router Detail Page.mp4

12:31

63 - Fetch API Get Product By Id.mp4

09:03

64 - Product Description.mp4

05:32

65 - Intro to Styled Components.mp4

13:07

66 - Styled Components Product Description.mp4

03:14

67 - Dangerously Set HTML Yeah Really.mp4

04:14

68 - Refactor the Categories.mp4

08:31

69 - Refactor the Layout.mp4

05:32

70 - Refactor the Home Page.mp4

05:57

71 - Intro to Context in React.mp4

09:01

72 - UseContext Hook and UseReducer Hook in React.mp4

18:06

73 - Basket Layout.mp4

11:18

74 - Implementing the Basket.mp4

06:29

75 - Implementing Basket Icons.mp4

04:43

76 - Implementing Basket Total.mp4

07:58

77 - Finishing the Checkout.mp4

01:14

78 - Checkout Fixing the State.mp4

12:38

79 - Implementing the Order Confirmation.mp4

06:51

80 - Intro to Local Storage.mp4

13:14

81 - Implementing Search Results.mp4

14:30

82 - Better Searching with Debouncing.mp4

07:43

83 - Validating Forms in React Part 1.mp4

08:55

84 - Validating Forms in React Part 2.mp4

09:22

85 - Validating Forms in React Part 3.mp4

08:18

86 - Validating Forms in React Part 4.mp4

08:02

87 - Project Summary.mp4

02:52

Description

Learn React JS through a Series of Hands-On Projects. Build an E-Commerce Site, Calculator, and Connect4 Game.

What You'll Learn?

What is React?
The Tools Needed to Build React Projects
Introduction to Code Pen
Functional Components in React
Building a Fully Functional Calculator in React
Using React Props
Debugging in React
Using the React State Hook
Introduction to JSX
Styling React Projects
React Events
Building a Single and Multi-Player Connect-4 Clone Game with AI
Introduction to JSON Server
Using Fetch API
Building a Custom E-Commerce Site in React
Building an Integrated Search Function using React
Validating Forms in React

Who is this for?

Students interested in learning to Build Web Apps using React

Students interested in using JavaScript libraries for Building our Functional UI Components.

Students interested in interactive front-end development using React

What You Need to Know?

Basic Computer Skills

No programming experience needed. You will learn everything you need to know.

More details

Description
Welcome to the Complete React Certification course. This course offers a comprehensive guide into one of the most powerful, modern JavaScript libraries available - ReactJS. Whether you are completely new to React, or youâ€™ve dabbled with it in the past, one thingâ€™s for sure - Youâ€™ve likely interacted with a number of web applications that use the React library for building out user interface components. Some of the most well known examples include Netflix, Facebook, and Airbnb. Developed and maintained by Meta along with a community of independent developers, React remains free and open-source. React is a component based library built entirely on JavaScript, which makes it perfect for designing complex UIâ€™s. With React, developers can build encapsulated components that efficiently manage their own state and render UI updates specifically when data changes. For example, think of the automated content refresh feature you see on a twitter feed, or Facebook like button. Here, the state of the UI component changes on the page without having to manually refresh when the data is updated. This is just one small, yet powerful UI feature built into React.

This course starts with exploring the foundations of React and its core use cases. We offer a concise definition of what React is and what itâ€™s not. From there, we explore the tools needed to get started along with an introduction into JSX, and Functional React components. Through a complete hands-on project you will learn a number of important concepts including react props, callbacks, OnClick Events and passing parameters within callback functions. By the end of module one you will have built a fully functional calculator, complete with display and numerical operators. We will also cover important topics such as the React State Hook, and Debugging.

In the second module students build out a multiplayer Connect-4 clone, with AI integration. Here we start with styling the individual game board components followed by advanced onClickEvents. This includes global, dynamic and inline styling. From there, we move on to passing props, destructing, and React children. Students will explore the React key property, along with Lifecycle events, game initialization, CSS variables, and conditional rendering. By the end, you will have built a complete Connect-4 game capable of automatically determining the winner in both a multi-player and AI based single player setting.

In module three we further unleash the power of React by building out a complete e-commerce site with multiple product categories, a product showcase, shopping cart feature, and much more. Here, we introduce a number of integral new concepts including: JSON server, Fetch API, and installing React router. These essential building blocks will be used to render the product categories, style the product list, and configure the product details page. From there we dive into styled components, refactoring the shop layout, and exploring the concept of â€œcontextâ€ in React. In the final stages of the project students will configure the shopping cart basket, and the integrated checkout feature. We will also implement a product search feature, followed by in-depth exercises on validating input forms in React.

As you can see this course covers a tremendous bit of ground. Best of all itâ€™s authored by Tim Maclachlan - a renowned senior full-stack developer with over 20 years of commercial development experience. As a multi-faceted developer, Timâ€™s core competencies include algorithmic, analytical and mobile development. To date, heâ€™s written hundreds of applications and worked in a number of industries from commercial aviation and military, to banking and finance. Tim has a genuine passion for teaching others how to become better coders and looks forward to interacting with his students.

With that said, we hope youâ€™re just as excited about this course as we are, if so - hit the enroll button and letâ€™s get started.

Who this course is for:
Students interested in learning to Build Web Apps using React
Students interested in using JavaScript libraries for Building our Functional UI Components.
Students interested in interactive front-end development using React

User Reviews

Rating

average 0

Total votes0

Focused display

React

YouAccel Training

Instructor's Courses

YouAccel was founded in 2015 with the mission to be one of the most interactive e-learning platforms on the web. YouAccel is now a leading provider in online training, serving a global audience of over 2 million passionate learners. This includes 6+ Million enrollments, across 50 best-selling courses. YouAccel offers courses across numerous industries from Programming & IT to Business, Marketing, Design, and Productivity.The e-learning experience provided by YouAccel is Dynamic. Each course is streamed in High Definition with corresponding assignments, quizzes, and exams that are delivered and graded electronically. All YouAccel courses are taught by certified educators that have numerous years of work experience in the field for which they provide instruction. The courses can be taken at one's own pace and are offered at several levels including beginner, intermediate and advanced. Taking the experience to a new personalized level, free support is available to all students who register for a course. All courses come with a certificate of completion and no age restrictions apply.YouAccel strongly believes that the future of online learning will be through open community-based initiatives, where everyone’s voice is equally heard. This is exactly what YouAccel strives to achieve – an inclusive environment, where students have control over the direction of course content. YouAccel courses are continuously updated based on feedback from students and engaged community members. YouAccel instructors encourage communication at every step of the learning process. To date, hundreds of contributors around the globe have invested both time and resources, to ensure YouAccel courses meet the highest level of quality. YouAccel instructors are world renowned and many of them have been featured in mainstream publications such as Forbes, Mashable, Entrepreneur, and PBS among others.

Blue Digital Media

Instructor's Courses

We are dedicated to developing and providing exceptional educational content across a diverse range of topics. Enhance your career by enrolling in one of our courses. For those seeking to advance their skills, search no further. We uphold rigorous standards in our course offerings, and all our instructors are accredited professionals in their respective industries. Start your learning adventure with us today.

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.