React: Learn ReactJS Fundamentals for Front-End Developers
3.8 (53 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
1,975 students enrolled
Wishlisted Wishlist

Please confirm that you want to add React: Learn ReactJS Fundamentals for Front-End Developers to your Wishlist.

Add to Wishlist

React: Learn ReactJS Fundamentals for Front-End Developers

Get started in React as quickly as possible!
3.8 (53 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
1,975 students enrolled
Created by Luke Fabish
Last updated 11/2016
English
Current price: $10 Original price: $55 Discount: 82% off
1 day left at this price!
30-Day Money-Back Guarantee
Includes:
  • 4 hours on-demand video
  • 14 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Create web interfaces using React components and JSX
  • Understand the advantage of using React
  • Understand how JSX becomes HTML and Javascript
  • Create reusable components using JSX
  • Reduce code complexity using React's event model
  • Understand how pages render using React's virtual DOM
View Curriculum
Requirements
  • You should have a basic understanding of Javascript.
  • You should be understand how HTML, Javascript and CSS work together.
  • You should be comfortable typing code in a plain text-editor and running it in a browser.
Description

This course is for front-end developers who want to get a head-start in ReactJS by learning the fundamentals as quickly as possible.

Students who take this course will learn to use React components, JSX and React's top-down design methodology to build interactive interfaces while cutting down on code complexity.

The course is presented in a series of videos, quizzes and coding exercises. Students can choose to code along with the lectures, or download sample code provided with each lecture.

The course dives straight into a simple demonstration application to provide an overview of React concepts, all of which are explored later in the course in detail as students build the second, larger example application.

If you want to get up to speed in ReactJS as quickly as possible, this is the course for you!

Who is the target audience?
  • Developers who understand Javascript
  • Front-end developers who have worked with other JS frameworks in the past (e.g. Angular)
  • It is NOT for developers who wish to use React with server-side Javascript
  • It is NOT for developers who with to learn a workflow using broserify/gulp/grunt etc and ReactJS
Students Who Viewed This Course Also Viewed
Curriculum For This Course
Expand All 26 Lectures Collapse All 26 Lectures 03:46:19
+
Introduction to the Course
4 Lectures 09:13

Get to know your instructor! I'll go over my credentials as a software professional and talk about what we will and won't cover in the course.

Preview 01:34

Here we'll go over in more detail what we'll during the course.

Preview 02:19

This is a quick look at the application we'll spend the most time building during the course.

Preview 02:18

Here we'll make sure you can open run a React application in your browser.

Preview 03:02
+
Diving into React
4 Lectures 41:18

Here we go through a super-fast introduction to React by introducing our first example application, a Calculator. After this lecture you'll know how to build React components and pass information between them.

Preview 18:46

Here we'll finish off the Calculator application. You'll see how composing interfaces with React components can make web development much simpler.

Finishing off the React Calculator
15:10

This lecture introduces the libraries we need to use for building React applications in a browser. Once you've completed this lecture, you'll be able to understand and use the minimal dependencies for React development.

React Infrastructure
05:22

Here we check your knowledge on React libraries.

Mini-test on React Infrastructure
1 question

Once you've completed this lecture you'll understand where React fits in the web-development ecosystem.

React's Place in the World
02:00

This is where we check your understanding of where React fits into the web development stack.

How does React fit into modern web development?
1 question
+
React Concepts
11 Lectures 01:38:18

Ok everyone, this is where we take a closer look at JSX, see how it's used and incorporated with regular Javascript.

After watching this lecture you'll understand what JSX is, what the benefits of using it are, and how it's compiled into Javascript.

React Fundamentals - JSX
04:24

Let's make sure the JSX lecture made an impression on you and you're completed it with the key takeaways intact! :)

JSX Chekup
3 questions

In this lecture we start getting a little more acquainted with React components. We'll be spending a lot of time with React components in this course since they're the building blocks of a React application, but in this lecture we just consolidate what we've seen so far.

After this lecture you'll know how components are created, what the minimum requirement for implementing a React component is, and how to display a component in the browser.

React Fundamentals - Components
02:21

Just a quick check to see if that last lecture made an impression! 

Component Pop-Quiz
1 question

In this lecture we start working on our next example application, something I've called the Invoicer application. It's for making an invoice in your browser that you can then print to PDF.

As previously, I've provided a skeleton file for you to get started: invoicer.zip

Getting started on our next example application
06:38

This is an opportunity to get tons of practice putting together React components. Or, if you don't enjoy doing more or less the same thing over and over again, your can watch me do it instead.

Seriously, you should do a few of them to get used to working with React components and JSX. If you do this you'll get used working through common mistakes that come up as we code in React.

Filling out the example application's components, Part 1
14:52

This is a continuation of the previous lecture, where we work through doing an initial implementation of all the components we'll need to implement the Invoicer application.

Filling out the example application's components, Part 2
16:34

This is where we take an in-depth look at React component properties.

At the end of this lecture you'll have enough information to assign, initialize and validate component properties.

React Component Properties
08:42

Let's take a quick review of component properties!

Component Properties Quiz Time
2 questions

This is a practical lecture where you can get some practice adding properties to components and assigning initialization and validation to them.

Adding some properties to the Invoicer example application
08:55

React's default one-way data flow is one of the most interesting things about it! 

Once you've finished this lecture you'll understand how one-way data works in React, what the benefits of it are, and some of its drawbacks.

One-way data flow in React
04:12

This is where we learn two techniques for sending data between child and parent components, and work through a small coding sample as a demonstration.

Two-way data flow in React
08:43

State is super-interesting in React. It's what really makes things happen in a React application.

In this lecture we'll look at how component state is intitialized and updated in React, and what the implications of changing state are.

Finally, we'll get some practice working with state by adding some to the Invoicer application.

React Component State
19:12

Let's see if the exciting dynamics of changing React state made an impression on you!

React State Review
3 questions

The Virtual DOM sounds weird at first, but it's a great idea and helps us write efficient applications.

The best part about it is we don't need to do anything special to use it! React does it all for us.

It's still important to understand how it works and what benefits we (and React) derive from it.

By the end of this lecture, you'll know what the Virtual DOM is, how it's used to update the browser DOM, and what the benefits of a Virtual DOM are.

React's Virtual DOM
03:45

The Virtual DOM is an odd beast. This is a little refresher to see what you made of it.

Virtual DOM Review
2 questions
+
Exploring React Further
7 Lectures 01:17:30

Events in React are so similar to regular Javascript events that it's really easy to get caught out when you find our the differences!

After this lecture you'll understand how events work in React, where they differ from 'native' Javascript events, and how you can work around those differences if you need to.

Reacts Events
05:38

Array handling in React is a little different to what many people are used to, even though it just uses regular Javascript to do it.

In this lecture we'll learn how to render arrays in JSX and how to modify arrays stored in component state.

We'll also make the Invoicer application more dynamic by adding an array to its state.

Working with arrays in React
15:25

This is a coding session where you can get some practice handling state, properties and updating components dynamically.

Coding Time! Updating the Totals in the Invoicer Application
10:33

React components have a lifecycle, and the React API gives us opportunities to take action at each part of that cycle.

In this lecture you'll learn which parts of the API are fired when React components are created, updated, and removed from the DOM.

React's Component Lifecycle
07:57

This is part 1 of a coding session where I work through implementing the remainder of the Invoicer application. It's not an explication of any React concepts in particular, but an example of working with React code once it reaches non-trivial complexity.

I've included two versions of the Invoicer application in the resources section - one is without the changes for adding and removing line items, and the other is the completed version of the application.

Finishing the Invoicer Part 1 - Adding line items
19:39

This is part 2 of a coding session where I work through implementing the remainder of the Invoicer application. It's not an explication of any React concepts in particular, but an example of working with React code once it reaches non-trivial complexity.

I've included two versions of the Invoicer application in the resources section - one is without the changes for adding and removing line items, and the other is the completed version of the application.

Finishing the Invoicer Part 2 - Deleting line items
17:37

Time to say goodbye :)
00:41
About the Instructor
Luke Fabish
3.8 Average rating
53 Reviews
1,975 Students
1 Course
Senior Professional Software Engineer

Hi folks! I've been a software professional for - gulp! - 17 years now, and I still enjoy it as much as I did as a graduate!

After graduating top of my Honors class at university, I went on to work at a software consultancy based in Melbourne, Austraila. While there I spent all day, every day involved in every stage of software development - data models, SOAP and REST APIs, web-application logic and web-based user interfaces. I've since moved on to working as an independent software consultant.

The one constant in my career has been the need to learn, and keep on learning every day. This is one of the reasons I enjoy teaching and presenting education materials to help other software professionals keep on improving themselves.