ReactJS Course: Learn JavaScript Library Used by Facebook&IG
3.1 (33 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,018 students enrolled
Wishlisted Wishlist

Please confirm that you want to add ReactJS Course: Learn JavaScript Library Used by Facebook&IG to your Wishlist.

Add to Wishlist

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.1 (33 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,018 students enrolled
Created by Azat Mardan
Last updated 8/2015
English
Price: $50
30-Day Money-Back Guarantee
Includes:
  • 3 hours on-demand video
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Build front-end apps with React.js as a view layer
  • Utilize JSX
  • Render React.js on the Node.js server (isomorphism)
View Curriculum
Requirements
  • JavaScript
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.

Who is the target audience?
  • Web developers who want to learn React.js
Students Who Viewed This Course Also Viewed
Curriculum For This Course
41 Lectures
02:56:34
+
Don't Watch Me!
2 Lectures 03:50

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

Preview 01:17

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.)

Preview 02:33
+
Module 1: React.js Basics
8 Lectures 26:25

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.)

Preview 02:40

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.)

Preview 05:29

This is a continuation of the Hello world exercise.

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

Hello World Demo
02:46

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.)

JSX
04:06

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.)


JSX Demo
01:43

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.)

Babel
03:23

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

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

Babel Demo
03:04

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.

Components
03:14
+
Module 1 (Cont)
7 Lectures 32:21

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.)

Nesting Elements
02:47

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.)

Variables
02:12

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.)

State
04:15

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.)

Methods and Events
03:28

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.)

Props
05:31

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.)

Summary
02:46

React.js Basics
5 questions

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

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

Project: Timer
11:22
+
Module 2: Developing with React.js
8 Lectures 28:18
Congrats
00:42

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.)

Lists
02:04

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.

Project: Menu
10:00

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.)

Refs and Default Props
04:31

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.)

Default Props Demo
01:44

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.)

Prop Types
02:06

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.)
Required Props
01:52

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.)

Mixins
05:19
+
Module 2 (Cont)
8 Lectures 25:07

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.)

Rendering Children Elements
03:19

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.)

Forms, Events and Uncontrolled Components
04:06

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.)

Controlled Components and Default Values
04:10

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.)

Rendering Children Demo
02:22

In this section, I will demonstrate uncontrolled component.

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

Uncontrolled Components Demo
03:23

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

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

Controlled Components Demo
03:06

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

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

Style Attribute Demo
02:56

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.)
Summary
01:45
+
Module 3: Getting Reactive with Message Board (Express+MongoDB+React+Gulp+JSX)
7 Lectures 50:29

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.

Board Part 1: Package.json and Gulpfile.js
11:41

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.)

Board Part 2: Express.js+MongoDB REST API Server POST and GET Endpoints
12:31

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.)

Board Part 3: Testing REST API Server POST and GET Endpoints with Postman
02:48

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.)

Board Part 4: HTML Page with Twitter Bootstrap
05:04

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.)

Board Part 5: Header and Footer React JSX Components
04:56

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.)

Board Part 6: Getting JSON from REST API Server and Saving Data with AJAX/XHR
08:45

In this presentation, we will implement the message list.

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

Board Part 7: JSX List Table with Map
04:44
+
Module 4: Isomorphic JavaScript or How to Render React on the Express Server
1 Lecture 10:04

Here, you will know about modifying the server code.

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

Refactoring Message Board to Render React on the Server and Browser
10:04
About the Instructor
Azat Mardan
3.7 Average rating
416 Reviews
18,905 Students
8 Courses
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.