Course info
Mar 19, 2014
2h 44m

This course covers the features offered by React and explains their advantages and disadvantages relative to the other popular options available. Important topics include: React's one-way reactive data flow, the virtual DOM, and JSX syntax for describing markup.

About the author
About the author

Liam is a software developer, technologist and product delivery expert. He thinks a lot about how to manage software delivery projects and how to grow high performance teams.

More from the author
React Fundamentals
4h 13m
Jun 21, 2018
F# Fundamentals
5h 40m
Mar 10, 2016
Backbone.js Fundamentals
4h 42m
Sep 5, 2012
Section Introduction Transcripts
Section Introduction Transcripts

A React application, or widget, is built from a set of components. This module will introduce components and serve as the foundation for the rest of this course. What is a component? Components are the fundamental unit of a React application. They are both simple and powerful. Each component corresponds to an element in the DOM. The component is responsible for rendering the content of that element and for handling any events that occur within it. Components can be nested inside each other. This is what is meant by composing components and it's a powerful technique for achieving reuse. Nested components correspond to nested DOM nodes. The outer component is said to own the inner component.

JSX is an external, domain-specific language that is optimized for generating XML-like documents. That may not sound very exciting, but keep in mind that your web application markup language is HTML and HTML is XML-like. For a React application JSX will typically be used to generate HTML, but it also supports custom react components and SVG. This module will describe JSX, provide strategies for using and not using JSX, discuss attribute and child expressions, and cover peculiarities of their sects, such as illegal attribute names, unescaping content, and the style attribute.

The features we have covered in previous modules only allow you to build read only interfaces, but if you have a read only interface then you are probably better off using a server-side technology like ASP. NET, MVC or Ruby on Rails. Events are what make client-side user interfaces useful. Think of your favorite client-side web application, maybe it's Trello, Gmail or Outlook web access. What makes the user experience compelling is the nearly instantaneous reaction to your input. The handling of events and responding with UI changes is decoupled from the server and associated network latency. React has a simple, consistent, normalized event system. Just as React has its own DOM abstraction, it also has its own event abstraction. There are a couple of reasons why this is necessary. Firstly, to normalize event behavior. React makes events behave the same across all supported browsers. This is similar to the event support in jQuery. Secondly, React creates a uniform event system for DOM events, such as a button click or a form submission and component events, which are custom events raised by a React component. To normalize DOM event objects, React replaces them with a wrapper called SyntheticEvent. SyntheticEvent works pretty much the same as the native browser event objects, which you can still get access to via the nativeEvent property. It's nice to have access to the native event object, however, it's worth noting that under normal circumstances you should have no need for it, and depending on nativeEvent, reintroduces the need to manually handle browser specific issues.

Most web applications end up requiring some support for forms. It's easy for server-side web applications because HTML has a form element, which supports serializing and posting form values. Client-side web applications are left to implement form support for themselves. React has some very basic form support built-in. This includes binding values to the form, binding values back out of the form, and accessing individual form elements. Notably absent, is any built-in support for form validation.