Sorry this is taking so long. Something might have gone wrong. Please try reloading.


Solid React

3 Days
JS Frameworks, Patterns

Description

The open-source React library from Facebook is becoming very popular. Not only is it used for the main Facebook website but lots of other major companies are adopting React. This class will introduce delegates to building web applications using React. Many developers think of React as just a View part of the Model View Controller pattern. With the proper understanding of React gained during this course you will understand its true powers. The course doesn’t stop where React itself stops. It enables you to build rich Single Page Applications (SPA) using the popular React-Router library. You will also learn about architecting React applications using the Flux design pattern. We will do this using the popular Facebook implementation.

Modules in Solid React:

Reactive Framework Introduction

React is a popular framework for creating browser based user interfaces. In this module you will learn how to get started with React. We will start with the basics of creating a React application and using the JSX syntax often used with React.  Next you will learn different ways we can transpile our JSX code. You will use ECMAScript 2015 capabilities in the process. We will also take a closer look at the different ways of creating React components and their pros and cons. You will learn the different ways of working with properties, state and events. You will also learn how to work with raw DOM elements in the browser. Finally you will learn how to unit test your React components. After this module you will be able to start building React applications.

Single Page Applications using React-Router

Single Page Applications (SPA) are popular these days and for a good reason. Often SPAs provide a much nicer experience for the end user. In this module you will learn how to get started with the React-Router library. Using this library you will turn your React applications into a SPA. We will also take a look at the pros and cons of single page applications. You will learn how to achieve the best result by using the Single Page Module or mini SPA pattern. After this module you will be able to build React Single Page Applications.

Using the Flux architecture with React

While React is a UI library that, unlike some other frameworks, allows for quite a bit of flexibility. To get the best results with React Facebook has added the Flux architecture. The Flux architecture helps developers using React. One of the important concepts of the Flux architecture is the Unidirectional Data Flow. In this module you will learn how to use the Unidirectional Data Flow principal. You will learn about Dispatchers, Actions and Stores to build your applications. We will take a look at some of the more popular Flux implementations and how to get started with them. After this module you will be able to architect more complex React applications.

Tooling for building React applications

It is possible to write React applications without any extra tooling. This isn't common though. There is a rich ecosystem out there with tools to help you. With these developer tools you can write your application faster and more reliable. In this module you will learn how to configure an efficient tool chain for building React applications.

  1. Babel
  2. Browserify
  3. Webpack
  4. TypeScript
  5. NPM
  6. Gulp
  7. ESLint

Building better React components

There are many best practices for building React components. You can build applications without following these best practices if you want. Yet you will find that you are a lot more effective of you do follow some proven design principals. In this module you will learn how to build better React components. These components are easier to test and more reliable.

  1. Composition
  2. Props, state and context
  3. Using immutable data
  4. Higher order components
  5. Events
  6. Components, promises and setState

Reactive Data entry forms

There are few applications that do not need the user to enter data of some sort into the system. When building React components there are some choices on how to create data entry forms. In this module you will learn how to create data entry forms with React. You will learn how to validate data. Finally you will display validation messages when appropriate. In this module you will learn how to create excellent data entry forms.

  1. Controlled versus uncontrolled components
  2. React Two-Way Binding Helpers
  3. Validation

Using Redux with Reactive

Redux is the most popular state container for JavaScript applications. It is similar in architecture to Flux and serves the same purpose. These days Redux is the most popular Flux implementation. In this module you will learn how to build applications using Redux.

  1. The three principals of Redux.
    1. There is a single source of truth
    2. State is read only
    3. Changes are made with pure functions
  2. Unidirectional data flow
  3. Creating a store using actions and reducers
  4. Using Redux with React
  5. Using Redux with React-Router

Server Side rendering with React

Rich JavaScript applications like React render the markup on the client. While this works just fine most of the time Rich Javascript applications execute in the browser on the client. While this works just fine most of the time there are cases when this is not optimal. One of these is search engine optimization (SEO) where another program parses the markup returned. In this case of SEO the Javascript is usually not executed. The SEO program will thus not find any content in your web site to index reducing your Google ratings. A second issue with client side rendering is that the markup can only display after the execution. This means a user sees nothing before execution finishes. Using server side rendering you can render the initial markup on the server. Sending this markup to the client results in actual meaningful content delivered. This is beneficial regardless if the client is a search engine or an actual user with a browser. In this module you will learn how to configure server side rendering.

  1. Why use server side rendering
  2. Using ReactDOM.renderToString()
  3. Server side rendering when not using Node.js on the server