Learn by Example : ReactJS

Learn by Example : ReactJS, available at $34.99, has an average rating of 4.5, with 74 lectures, based on 147 reviews, and has 3011 subscribers.

You will learn about Decompose complex UI into simple and reusable components using React and JSX Use props and state in the right way with components Customize components using React lifecycle methods Use mixins, ES6 classes, the React context and other advanced features Work with React plugins for animations and routing Use React in a production environment This course is ideal for individuals who are Yup! Any web programmer looking to harness the power of component driven development using React or Nope! Students who have never done web development using Javascript before It is particularly useful for Yup! Any web programmer looking to harness the power of component driven development using React or Nope! Students who have never done web development using Javascript before.

Enroll now: Learn by Example : ReactJS

Summary

Title: Learn by Example : ReactJS

Price: $34.99

Average Rating: 4.5

Number of Lectures: 74

Number of Published Lectures: 74

Number of Curriculum Items: 74

Number of Published Curriculum Objects: 74

Original Price: $89.99

Quality Status: approved

Status: Live

What You Will Learn

Decompose complex UI into simple and reusable components using React and JSX
Use props and state in the right way with components
Customize components using React lifecycle methods
Use mixins, ES6 classes, the React context and other advanced features
Work with React plugins for animations and routing
Use React in a production environment

Who Should Attend

Yup! Any web programmer looking to harness the power of component driven development using React
Nope! Students who have never done web development using Javascript before

Target Audiences

Yup! Any web programmer looking to harness the power of component driven development using React
Nope! Students who have never done web development using Javascript before

NOTE: This course uses React 15.3.2�

React JS re-imagines the web user interface by breaking complex UI down into granular, reusable components. Learn ReactJS by example: from basic building blocks to animations and routing using React add-ons

Let’s parse that.

Re-imagines the web user interface: React is not a framework, it is a library focused on building web UI which is compact, robust, maintainable and reactive to user and server updates.

Breaking complex UI down into granular, reusable components: Each component in React is self-sufficient and knows how to handle its own state and behavior. Components come together in the form of a tree hierarchy to build complex components with many moving parts

In this course, we will learn by example. Each example is self-contained, has its source code attached, and gets across a specific React use-case. Each example is simple by itself, but they come together as building blocks to build complex use cases.

What’s included in this course:

Installing and setting up a basic development web server with React, JSX for HTML specification and the Babel compiler

React basics: React nodes, fragments and components, performance optimizations using the virtual DOM, the Babel compiler for JSX transformation, passing data to components using state and props, the spread operator, synthetic events

React in-depth: The React component lifecycle, the component mounting, updating and unmounting phases, mixins, ES6 classes to specify React components, controlled components, forms and validation, accessing native DOM elements, the React context, DOM reconciliation

React in production environments: npm, Webpack, Babel 6 and JSX to build React code in a production environment, animations using transition groups and CSS transition groups, single page applications and routing

Course Curriculum

Chapter 1: You, This Course and Us

Lecture 1: You, This Course and Us

Chapter 2: Introduction

Lecture 1: What Is React?

Lecture 2: What Makes React Cool?

Chapter 3: Install and Set up

Lecture 1: Npm And Http Server Install

Lecture 2: Running Examples On The Http Server

Lecture 3: Accessing ReactJS Files

Lecture 4: Using SublimeText For Coding In React

Chapter 4: React Basics

Lecture 1: Example 1: Hello World

Lecture 2: The Virtual DOM

Lecture 3: Example 2: Nested Elements

Lecture 4: Terms In React

Lecture 5: Example 3: Factory Functions

Chapter 5: JSX and the Babel Compiler

Lecture 1: What Is JSX?

Lecture 2: The Babel REPL Environment

Lecture 3: Babel For Development And Production Environments

Lecture 4: Example 4: Elements With JSX

Chapter 6: React Components

Lecture 1: Introduction To Components

Lecture 2: Example 4: A Stateless React Component

Lecture 3: Example 5: The Render Function

Chapter 7: State and Props: Immutable Props

Lecture 1: Introduction To State And Props

Lecture 2: Example 7: Props

Lecture 3: Example 8: Passing Props To Nested Components

Lecture 4: Example 9: Transferring Props To Child Components

Lecture 5: Example 10: The Spread Operator

Lecture 6: Example 11: Dynamic Types Using Props

Lecture 7: Example 12: Validation With Prop Types

Lecture 8: Example 13: Accessing A Component's Children Using Props

Lecture 9: Example 14: Lambda Expressions As Children

Lecture 10: Example 15: Components And Child Expressions

Chapter 8: State and Props: The Component as a State Machine

Lecture 1: Components As State Machines

Lecture 2: Example 16: State

Lecture 3: Example 17: Update State

Lecture 4: Example 18: Accessing Previous State

Lecture 5: Properties Of State

Chapter 9: Synthetic Events in React

Lecture 1: Capture And Bubble Phases

Lecture 2: Example 19: Events

Lecture 3: The Synthetic Event

Lecture 4: Example 20: Working With Synthetic Events

Chapter 10: Bringing It All Together in A Single Application

Lecture 1: Example 21: The Comment App Visual Representation

Lecture 2: Example 22: The Comment App With Props

Lecture 3: Example 23: Adding A New Comment

Lecture 4: Example 23: Deleting Comments

Chapter 11: The React Component Lifecycle

Lecture 1: Component Lifecycle Methods: The Mounting Phase

Lecture 2: Example 24: The Mounting Phase Lifecycle Methods

Lecture 3: Example 25: The Unmounting Phase Lifecycle Methods

Lecture 4: Component Lifecycle Methods: The Updating Phase

Lecture 5: Example 26: The Updating Phase, componentWillReceiveProps()

Lecture 6: Example 27: The Updating Phase, shouldComponentUpdate()

Lecture 7: Example 28: The Updating Phase Lifecycle Methods

Chapter 12: Mixins

Lecture 1: Mixins

Lecture 2: Example 29: Mixins

Lecture 3: Example 30: Nested And Multiple Mixins

Chapter 13: ES Syntactic Sugar

Lecture 1: ES6 Classes For React

Lecture 2: Example 31: ES6 Classes And The React.createClass() Function

Chapter 14: Forms

Lecture 1: Introduction To Forms

Lecture 2: Example 32: Controlled Components

Lecture 3: Example 32: Controlled Components Continued

Lecture 4: Example 33: Componentize Forms

Lecture 5: Example 33: Componentize Forms Continued

Lecture 6: Example 34: Form Validation

Chapter 15: Miscellaneous

Lecture 1: Example 35: Accessing Native DOM Elements

Lecture 2: Example 36: Accessing DOM Elements In A React Component

Lecture 3: Example 36: The React Context

Lecture 4: DOM Reconciliation

Chapter 16: React In Production

Lecture 1: React In Production: Setting Up Webpack

Lecture 2: React In Production: The Babel Loader

Lecture 3: React In Production: Watching For App Changes

Chapter 17: Animations

Lecture 1: Animation Add Ons In React

Lecture 2: Example 38: The React Transition Group

Lecture 3: Example 38: The React Transition Group continued

Lecture 4: Example 39: The React CSS Transition Group

Chapter 18: Routing

Lecture 1: Example 40: React Router: Basic Routing

Lecture 2: Example 40: React Router: Routing With Links

Chapter 19: One Last Thing…

Lecture 1: The Webpack Dev Server

Instructors

Loony Corn
An ex-Google, Stanford and Flipkart team

Rating Distribution

1 stars: 3 votes
2 stars: 7 votes
3 stars: 20 votes
4 stars: 51 votes
5 stars: 66 votes

Frequently Asked Questions

How long do I have access to the course materials?

You can view and review the lecture materials indefinitely, like an on-demand channel.

Can I take my courses with me wherever I go?

Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!

Menu