React: Learn ReactJS Fundamentals for Front-End Developers

Get started in React as quickly as possible!
4.0 (45 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,936 students enrolled
$19
$55
65% off
Take This Course
  • Lectures 26
  • Length 4 hours
  • Skill Level All Levels
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 6/2016 English

Course 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!

What are the 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.

What am I going to get from this course?

  • 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

What 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

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: Introduction to the Course
01:34

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.

02:19

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

02:18

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

03:02

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

Section 2: Diving into React
18:46

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.

15:10

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

05:22

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.

1 question

Here we check your knowledge on React libraries.

02:00

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

1 question

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

Section 3: React Concepts
04:24

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.

3 questions

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

02:21

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.

1 question

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

06:38

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

14:52

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.

16:34

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.

08:42

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.

2 questions

Let's take a quick review of component properties!

08:55

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

04:12

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.

08:43

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.

19:12

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.

3 questions

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

03:45

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.

2 questions

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

Section 4: Exploring React Further
05:38

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.

15:25

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.

10:33

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

07:57

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.

19:39

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.

17:37

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.

Time to say goodbye :)
00:41

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Luke Fabish, 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. 

Ready to start learning?
Take This Course