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.
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.
- Props, state and context
- Using immutable data
- Higher order components
- 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.
- Controlled versus uncontrolled components
- React Two-Way Binding Helpers
Using Redux with Reactive
- The three principals of Redux.
- There is a single source of truth
- State is read only
- Changes are made with pure functions
- Unidirectional data flow
- Creating a store using actions and reducers
- Using Redux with React
- Using Redux with React-Router
Server Side rendering with React
- Why use server side rendering
- Using ReactDOM.renderToString()
- Server side rendering when not using Node.js on the server