Learn by Example : ReactJS
4.1 (136 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
2,960 students enrolled

Learn by Example : ReactJS

A step-by-step guide to component-driven development using React
4.1 (136 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
2,960 students enrolled
Created by Loony Corn
Last updated 1/2017
English
English [Auto-generated]
Current price: $64.99 Original price: $99.99 Discount: 35% off
8 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 7.5 hours on-demand video
  • 72 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll 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
Course content
Expand all 74 lectures 07:34:33
+ Install and Set up
4 lectures 11:37
Running Examples On The Http Server
02:41
Accessing ReactJS Files
01:51
Using SublimeText For Coding In React
02:16
+ React Basics
5 lectures 24:41
The Virtual DOM
05:20
Example 2: Nested Elements
05:25
Terms In React
04:58
Example 3: Factory Functions
03:48
+ JSX and the Babel Compiler
4 lectures 21:13
The Babel REPL Environment
04:32
Babel For Development And Production Environments
04:57
Example 4: Elements With JSX
03:14
+ React Components
3 lectures 15:09
Example 4: A Stateless React Component
07:15
Example 5: The Render Function
05:30
+ State and Props: Immutable Props
10 lectures 01:00:35
Example 7: Props
03:48
Example 8: Passing Props To Nested Components
05:02
Example 9: Transferring Props To Child Components
05:27
Example 10: The Spread Operator
04:48
Example 11: Dynamic Types Using Props
08:52
Example 12: Validation With Prop Types
10:50
Example 13: Accessing A Component's Children Using Props
04:45
Example 14: Lambda Expressions As Children
04:45
Example 15: Components And Child Expressions
07:52
+ State and Props: The Component as a State Machine
5 lectures 29:25
Example 16: State
03:13
Example 17: Update State
09:53
Example 18: Accessing Previous State
05:22
Properties Of State
06:10
+ Synthetic Events in React
4 lectures 30:31
Example 19: Events
06:18
The Synthetic Event
12:34
Example 20: Working With Synthetic Events
03:51
+ Bringing It All Together in A Single Application
4 lectures 29:26
Example 22: The Comment App With Props
05:04
Example 23: Adding A New Comment
09:30
Example 23: Deleting Comments
05:43
Requirements
  • Basic understanding of HTML and CSS
  • Basic programming in Javascript
Description

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
Who this course is for:
  • 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