ReactJS Course: Learn JavaScript Library Used by Facebook&IG

The Astonishing Power of High Performance JS (Without The Headache). Brought to You By Facebook and Instagram as React
3.3 (31 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,012 students enrolled
$50
Take This Course
  • Lectures 41
  • Length 3 hours
  • Skill Level Intermediate Level
  • 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 7/2015 English

Course Description

Stop struggling to code front-end the hard way. React is performing fast DOM manipulations and is easy to learn. No more events attached to the DOM elements. Just declare in React and it will do the necessary manipulations for you (declarative style).

This course is designed for web developers who are familiar with JavaScript and interested in using React as a view layer for their front-end web apps.

Warning: React by Facebook is Taking Over The World

I stumbled upon some guy from Zurich, Switzerland who was arguing that you don't need MVC (model, view, controller) with Reactjs.

What?

I love controversial topics! How refreshing to hear such a brave opinion after almost a decade of MVC-domitaion.

Anyway, I really suck at Angular.

It's just weird to me to use directives in HTML.

It's almost like using HTML to code JavaScript.

I never got used to it. At the same time, I keep hearing good things about React.

That's why I had this idea of learning myself and teaching you Reactjs (with this course).

I used the same approach 4 years ago when I wrote my first book on Nodejs.

It became Amazon #1 Best Seller in the Client-Server category and helped a few thousand engineers.

7 Ways To ROCK With Reactjs

Reactjs is a JavaScript library.

It's used for creating user interfaces (UIs).

It's created and used by giants such as Facebook and Instagram.

Millions of people use apps built on Reactjs.

Think of Reactjs as the View in Model, View, Controller.

The difference between Backbonejs, Angularjs and Reactjs is that Reactjs creates its own virtual DOM (Document Object Model) for pages' components.

You work with them, not the DOM.

This provides tremendous flexibility and awesome performance,

because Reactjs knows the needed changes beforehand and updates the DOM tree accordingly.

This allows to avoid unnecessary DOM operations and makes updates more effective.

Here are some of other advantages of Reactjs:

  • Decoupling
  • Increased cohesion using a component model
  • Abstraction,
  • Composition
  • Expressivity
  • Virtual DOM & Synthetic events (which basically means they completely re-implemented the DOM and its event system)
  • Enables modern HTML5 event stuff on IE 8 Server-side rendering Testability Bindings to SVG, VML, and <canvas>

Only Wise People Can Qualify

Smart people learn on their mistakes while wise learn on mistakes of others. Save time with this course...

I published nine books on JavaScript and Nodejs that have been downloaded or bought by over 10,000 developers.

In addition to that, I have experience in online courses.

Three of my courses have over 2,000 students enrolled.

I'm not bragging.

I'm only making a point that I am capable of delivery once the demand is proven by the campaign. :-)

I worked with Backbonejs before. I'm not an expert on Reactjs. I haven't build anything production-ready with it (yet).

This will give me the advantage of a beginner's mind.

That is I won't have the knowledge curse and will be able to explain everything in the layman's terms.

Join me on this journey and learn Reactjs by backing this campaign with $50.

High Performance JavaScript Without The Headache—Limited Time Offer

The course will have at least 1 hour of HD video, and examples on the following topics:

  • React custom components
  • Communication between React components
  • Integration of React with jQuery UI / Bootstrap components
  • React Router and routing in React
  • Rendering React on the server
  • React and server / mBaaS

PS: Reactjs is hot, hot, hot. Learn it with me. Take this course and get the confidence in Reactjs that everyone will envy.

What are the requirements?

  • JavaScript

What am I going to get from this course?

  • Build front-end apps with React.js as a view layer
  • Utilize JSX
  • Render React.js on the Node.js server (isomorphism)

What is the target audience?

  • Web developers who want to learn React.js

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

01:17

In this lecture, you can download slides and source code for the course.

02:33

In this lecture, you will learn how to check if you have Node.js and npm installed whether you are using Windows, Mac or Linux. You will also be provided with the different ways on how to install them.

(Source code and slides are in the Lecture 1 under the resources.)

Section 1: Module 1: React.js Basics
02:40

In this lesson, you will learn what react.js is about and what the key differences of the current version from the old one are.

(Source code and slides are in the Lecture 1 under the resources.)

05:29

Before getting deeper with React.js, you will first learn how to create a Hello World html. There are several ways of downloading React.js and they are enumerated in this lecture.

In creating a Hello World html, you will know about:

  • React.js Inclusion
  • React.js CDN
  • HTML Structure
  • Creating h1 Element
  • Rendering
  • Running the Page
  • Inspecting HTML
  • HTML Arguments
  • for and class Attributes

(Source code and slides are in the Lecture 1 under the resources.)

02:46

This is a continuation of the Hello world exercise.

(Source code and slides are in the Lecture 1 under the resources.)

04:06

In this part, you will learn the following:

  • Definition of JSX.
  • Benefits of using JSX.
  • Two ways of using JSX.
  • A step-by-step procedure and the requirements in using JSX for React.js.

(Source code and slides are in the Lecture 1 under the resources.)

01:43

This is a continuation of the JSX example. Here, you will learn how to use the HTML skeleton but this time we use the React.js- Node.js library and the JSX transformer file which is in the same folder of the HTML file.

(Source code and slides are in the Lecture 1 under the resources.)


03:23

In this lesson, you will know the following:

  • What is Babel and it's key features.
  • How to separate code into two files.
  • Code inclusion.
  • Installing Babel.
  • End results of running Babel.

(Source code and slides are in the Lecture 1, under the resources.)

03:04

In lecture 9, you will know how to use Babel.

(Source code and slides are in the Lecture 1 under the resources.)

03:14

In this lecture, you will be introduced to the two components of React.js and their main differences.

A demo/code will be provided to define a component, refactor a HelloWorld component and to compile JSX with Babel.

Section 2: Module 1 (Cont)
02:47

In this tutorial, you will know how to nest elements inside of div.

The recommended pattern of nesting including the things to avoid will also be discussed here.

You will also learn the following:

  • Rendering title and text
  • Single Top-Level Tag
  • Recommended pattern in creating nested structure in custom components
  • Running the code
  • Order of the code

(Source code and slides are in the Lecture 1 under the resources.)

02:12

In this section, you will learn how to render variable inside of JSX and a plunkr demo will be provided.

(Source code and slides are in the Lecture 1 under the resources.)

04:15

Here, we will cover the following:

  • What is state?
  • How is state set?
  • How is state updated?
  • How is state outputted and rendered?

An example about state will be provided via plunkr.

(Source code and slides are in the Lecture 1 under the resources.)

03:28

In this part, you will learn the following:

  • Calling method inside of JSX
  • Events in components
  • Declaring Events
  • Button onClick Event

(Source code and slides are in the Lecture 1 under the resources.)

05:31

Here, you will learn the following:

  • Props or properties
  • How to use a prop as an event handler
  • How to supply props to the ClickCounterButton component
  • Where to put logic
  • Exchanging props between children
  • Parent component
  • componentDidMount event and its example

(Source code and slides are in the Lecture 1 under the resources.)

02:46

This is to summarize the following:

  • JSX for React.js
  • Using Babel
  • Components
  • Nesting elements
  • Rendering variables
  • States and props

(Source code and slides are in the Lecture 1 under the resources.)

React.js Basics
5 questions
11:22

This is a demo on how to build a timer application.

(Source code and slides are in the Lecture 1 under the resources.)

Section 3: Module 2: Developing with React.js
Congrats
00:42
02:04

In this lesson you will understand the following:

  • Definition of list and it's uses
  • List implementation

A menu example will also be shown.

(Source code and slides are in the Lecture 1 under the resources.)

10:00

This is a demo where you will learn how to create a sample menu.

(Source code and slides are in the Lecture 1 under the resources.

04:31

In this lesson, you will learn the following:

  • What is Refs
  • Refs' DOM
  • Default props and an example
  • Parent with a missing props

A demo on default props will also be shown

(Source code and slides are in the Lecture 1 under the resources.)

01:44

This is a presentation of how default props example looks like and it's end result.

(Source code and slides are in the Lecture 1 under the resources.)

02:06

Here, you will understand the following:

  • Prop types on React.js classes
  • Front-end validation warning
  • Development vs Production in React.js
  • Validating props and some examples

(Source code and slides are in the Lecture 1 under the resources.)

01:52

This is a continuation of properties- here, you will understand:

  • How to make a prop type required
  • Custom validation
  • Additional prop types
(Source code and slides are in the Lecture 1 under the resources.)
05:19

In this part, we will:

  • Define mixins
  • Declare mixins
  • Know how to use mixins

A few examples of using mixins and a demo will also be shown.

(Source code and slides are in the Lecture 1 under the resources.)

Section 4: Module 2 (Cont)
03:19

Here, we will tackle the following:

  • Children components
  • Children props and an example
  • Parent
  • Children, an array
  • Children truthy check

(Source code and slides are in the Lecture 1 under the resources.)

04:06

In this part we will:

  • Define forms and its main elements
  • Understand the form events
  • Know what's inside of the form
  • Capture enter
  • Discuss uncontrolled components and it's benefits (an example is also shown)
  • Discuss controlled components and it's benefits (an example is also shown)
  • Know how to use default value

(Source code and slides are in the Lecture 1 under the resources.)

04:10

This lecture covers:

  • Controlled components' meaning and benefits
  • An example of controlled component
  • What default values are and how they are set on input fields

(Source code and slides are in the Lecture 1 under the resources.)

02:22

In this demonstration, I'll illustrate how passing and rendering of elements in JSX and React.js is done.

(Source code and slides are in the Lecture 1 under the resources.)

03:23

In this section, I will demonstrate uncontrolled component.

(Source code and slides are in the Lecture 1 under the resources.)

03:06

In this demo, I'll show you controlled component.

(Source code and slides are in the Lecture 1 under the resources.)

02:56

Here, I'll show you an example in the style attribute.

(Source code and slides are in the Lecture 1 under the resources.)

01:45

This section summarizes:

  • Lists with the map method
  • Mixins with the mixins: [Name] property
  • Controlled vs. uncontrolled components
  • Prop types
  • Refs
  • Prop validation with the propTypes property
  • Development vs. production mode
  • Passing children elements with this.props.children
  • Inline style attribute with a JSON object and {}
(Source code and slides are in the Lecture 1 under the resources.)
Section 5: Module 3: Getting Reactive with Message Board (Express+MongoDB+React+Gulp+JSX)
11:41

In this demo, you will learn how to create a message board with React.js, Jquery ajax, and Express.js Mongo.db; and its end result.

(Source code and slides are in the Lecture 1 under the resources.

12:31

In this section, we will have a demo on creating an Express.js app.

(Source code and slides are in the Lecture 1 under the resources.)

02:48

Here, we will have a demo on using the postman 3.0, a chrome extension, to test the server and endpoints.

(Source code and slides are in the Lecture 1 under the resources.)

05:04

In this demonstration, I will illustrate how to create the front end React.js application.

(Source code and slides are in the Lecture 1 under the resources.)

04:56

To continue with the previous demos, in this part, you will know how to implement the message board component.

(Source code and slides are in the Lecture 1 under the resources.)

08:45

After implementing all the components on the previous lesson, in this demo you will learn creating the message list.

(Source code and slides are in the Lecture 1 under the resources.)

04:44

In this presentation, we will implement the message list.

(Source code and slides are in the Lecture 1 under the resources.)

Section 6: Module 4: Isomorphic JavaScript or How to Render React on the Express Server
10:04

Here, you will know about modifying the server code.

(Source code and slides are in the Lecture 1 under the resources.)

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Azat Mardan, Author of Apress books on Node&JS, Technology Fellow

Azat Mardan has over 12 years of experience in web, mobile and software development. With a Bachelor's Degree in Informatics and a Master of Science in Information Systems Technology degree, Azat possesses deep academic knowledge as well as extensive practical experience.

Currently, Azat works as Technology Fellow at Capital One Financial Corporation. Before that, Azat worked as a Team Lead / Senior Software Engineer at DocuSign, where his team rebuilds 50 million user product (DocuSign web app) using the tech stack of Nodejs, Expressjs, Backbonejs, CoffeeScript, Jade, Stylus and Redis.

Recently, he worked as an engineer at the curated social media news aggregator website, Storify dot com (acquired by LiveFyre) which is used by BBC, NBC, CNN, The White House and others. Storify runs everything on Nodejs unlike other companies. It's the maintainer of the open-source library jade-browser.

Before that, Azat worked as a CTO/co-founder at Gizmo — an enterprise cloud platform for mobile marketing campaigns, and has undertaken the prestigious 500 Startups business accelerator program.

Prior to this, Azat was developing he developed mission-critical applications for government agencies in Washington, DC, including the National Institutes of Health, the National Center for Biotechnology Information, and the Federal Deposit Insurance Corporation, as well as Lockheed Martin.

Azat is a frequent attendee at Bay Area tech meet-ups and hackathons (AngelHack hackathon '12 finalist with teamFashionMetric dot com).

In addition, Azat teaches technical classes at General Assembly, Hack Reactor, pariSOMA and Marakana (acquired by Twitter) to much acclaim.

In his spare time, he writes about technology on his blog: webapplog dot com which is number one in “expressjs tutorial" Google search results. Azat is also the author of Expressjs Guide, Rapid Prototyping with JS and Oh My JS; and the creator of open-source Nodejs projects, including ExpressWorks, mongoui and HackHall.

Ready to start learning?
Take This Course