React Fundamentals

React is one of the world's most popular libraries for creating web user interfaces. This course will teach you how to confidently construct React applications that are simple and easy to maintain.
Course info
Rating
(100)
Level
Intermediate
Updated
Jun 21, 2018
Duration
4h 13m
Table of contents
Description
Course info
Rating
(100)
Level
Intermediate
Updated
Jun 21, 2018
Duration
4h 13m
Description

The web has become the dominant programming model of our time, but building rich web applications can become extremely complicated. In this course, React Fundamentals, you will learn foundational knowledge of React. First, you will learn how to structure an application out of components and how to build those components with React. Next, you will discover JSX syntax and how to use it to connect React components together. Finally, you will explore application state management with Redux. When you are finished with this course, you will have the skills and knowledge of React needed to build your own complete web applications.

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
F# Fundamentals
Beginner
5h 40m
Mar 10, 2016
Backbone.js Fundamentals
Intermediate
4h 42m
Sep 5, 2012
More courses by Liam McLennan
Section Introduction Transcripts
Section Introduction Transcripts

Course Overview
My name is Liam McLennan and welcome to my course, React Fundamentals. I am the chief technology officer at StartsAt60. com I have a knack for seeing the potential in tools and techniques, having published Pluralsight's first courses on React and JavaScript. In this course, we are going to learn the basics of React and develop a simple web-based game. Some of the major topics that we will cover include: React components, JSX syntax, implementing forms, and application state management. By the end of this course, you'll know how to build a maintainable user interface with React. Before beginning the course, you should be familiar with JavaScript and web development. I hope you'll join me on this journey to learn React with the React Fundamentals course at Pluralsight.

Introducing React
Hello and welcome to the first module of React Fundamentals. In these early days of client-side web interfaces, frameworks and libraries are evolving fast and free. Some large frameworks cover the entire client-side requirements such as AngularJS, em-ba, and Meteor. React has taken a different approach. It focuses narrowly on the rendering and event handling of client-side user interface components, leaving the program up with a responsibility and opportunity to choose other specialized components to complete their application. Which approach you prefer will depend on your style and the requirements of your project. The plan for this module is to introduce and lightly show off React. We will look briefly at the advantages and disadvantages of React. While React is a general purpose browser application UI library, it might not be suitable for every project or team. To understand the best way to construct React applications, we need to understand a little about how React applications work so we will examine the architecture of a React application. With a rapid pace of change in JavaScript libraries, it is impossible to provide an exhaustive comparison. However, it is useful to understand the high-level differences between major libraries so I will briefly contrast React with its major competitor, Angular.

Components
A React Application or widget is built from a set of components. This module will introduce components and then create the foundation for the rest of the course. Every React Application has a single root component. Typically, that root component contains other components that in turn contain more components all organized into a tree. We will discuss what a component represents in a React Application. First, we must define the component then we can use the component by rendering that component into the DOM. We will discuss what a component's props are and what lifecycle events are available for our component. React components have a facility called State which we will look into before finishing with a brief look at some of the options available for testing components.

JSX
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 our 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 JSX, discuss attribute and child expressions, and color peculiarities of JSX such as illegal attribute names, unescaping contents and the style attribute. To develop a proper understanding of JSX, we will begin by investigating what JSX is and how it compiles to JavaScript. We will look into how to use JSX or not use JSX. How to pass data into components and out of components. And how to compose components into larger components.

Events
Could you create a React application that makes no use of events? Sure! You could have a read only application. In this scenario react would function as an over complicated view templating engine. Comparable to Handlebars EJS, Razor ERB or Hammel. React is at its best in highly interactive user interfaces and that means dealing with events. Most developers will have worked with events before. However for completeness we will briefly discuss what events are and why we should care. The events generated by the browser DOM we will call DOM events. This includes things like button clicks, scrolling and change events. When we create our own components we can give them their own events. We will call these component events.