|
Mastering React | React, Redux, JSX, Flux, Forms, Unit Testing, & More (TTSREACT3)
Code:
TTSREACT3
Duration:
5 Day
|
$2895
USD
|
Mastering React is a 5-day, in-depth hands-on course that aims to be the single most useful resource on getting up to speed quickly with React. Geared for more experienced web developers, this course provides students with the core knowledge and hands-on skills they require to build reliable, powerful React apps.
After the first few modules, youll have a solid understanding of Reacts fundamentals and will be able to build a wide array of rich, interactive web apps with the framework. Topics like client-side routing between pages, managing complex state, and heavy API interaction at scale are also discussed. We cover all the fundamentals with a progressive, example-driven approach. Youll create your first apps, learn how to write components, and start handling user interaction. We will also explore the inner workings of Create React App (Facebooks tool for running React apps), writing automated unit tests, and building a multi-page app that uses client-side routing.
The latter part of this course moves into more advanced concepts that youll see used in large, production applications. These concepts explore strategies for data architecture, transport, and management: Redux is a state management paradigm based on Facebooks Flux architecture. Redux provides a structure for large state trees and allows you to decouple user interaction in your app from state changes.
If your team requires different topics or tools, additional skills or custom approach, this course may be easily adjusted to accommodate. We offer additional related React, Redux, Angular, web development, scripting, programming and design courses which may be blended with this course for a track that best suits your objectives.
This course is available in the following formats:
Duration: 5 Day
|
Delivery Format: Virtual Classroom
|
$ 2895 |
|
|
Delivery Format: Virtual Classroom
|
$ 2895 |
|
|
Delivery Format: Virtual Classroom
|
$ 2895 |
|
|
Delivery Format: Virtual Classroom
|
$ 2895 |
Working within in an engaging, hands-on learning environment, attendees will learn to:
- Understand the ReactJS basics through an overview
- Install and create your first React component
- Refactor the ReactJS component using JSX
- Handle UI elements events with React, respond to users input, and create stateful components
- Use some core lifecycle events for integration and find out about ES6 syntaxes in the React world
- Understand the FLUX architecture and create an application using FLUX with React
- Make a component more reusable with validation helpers and structure your components properly
- Explore techniques to test your ReactJS code
- Deploy your code using webpack.
Course Topics: This is a high-level list of the course topics covered in this training. Please see the detailed Course Agenda with session details, lessons and labs listed below.
- Your first React Web Application
- Components
- JSX and the Virtual DOM
- Advanced Component Configuration with props, state, and children
- Forms
- Unit Testing
- Routing
- Intro to Flux and Redux
- Intermediate Redux
- Using Presentational and Container Components with Redux
- (OPTIONAL) Working with React Native
Your first React Web Application
- Building Product Hunt
- Setting up your development environment
- Special instruction for Windows users
- JavaScript ES6/ES7
- Getting started
- Whats a component?
- Building Product
- Making Product data-driven
- React the vote (your apps first interaction)
- Updating state and immutability
- Refactoring with the Babel plugin transform-class-properties
Components
A time-logging app
Step 1: Getting started
- Breaking the app into components
- The steps for building React apps from scratch
Step 2: Build a static version of the app
Step 3: Determine what should be stateful
Step 4: Determine in which component each piece of state should live
Step 5: Hard-code initial states
Step 6: Add inverse data flow
- Updating timers
- Deleting timers
- Adding timing functionality
- Add start and stop functionality
- Methodology review
JSX and the Virtual DOM
- React Uses a Virtual DOM
- Why Not Modify the Actual DOM?
- What is a Virtual DOM?
- Virtual DOM Pieces
- ReactElement
- JSX
Advanced Component Configuration with props, state, and children
- Intro
- How to use this chapter
- ReactComponent
- props are the parameters
- PropTypes
- Default props with getDefaultProps()
- context
- state
Forms
- Forms 101
- Text Input
- Remote Data
- Async Persistence
- Redux
- Form Component
- react-input-enhancements
- tcomb-form
- winterfell
- react-redux-form
- Unit Testing
- Writing tests without a framework
- What is Jest?
- Using Jest
- Testing strategies for React applications
- Testing a basic React component with Enzyme
- Writing tests for the food lookup app
- Writing FoodSearch.test.js
Routing
- Whats in a URL?
- Building the components of react-router.
- Dynamic routing with React Router
- Supporting authenticated routes
- Intro to Flux and Redux
- Why Flux?
- Flux implementations
- Redux
- Building a counter
- Building the store
- The core of Redux
- The beginnings of a chat app
- Building the reducer()
- Subscribing to the store
- Connecting Redux to React
Intermediate Redux
- Preparation
- Using createStore() from the redux library
- Representing messages as objects in state
- Introducing threads
- Adding the ThreadTabs component
- Supporting threads in the reducer
- Adding the action OPEN_THREAD
- Breaking up the reducer function
- Adding messagesReducer()
- Defining the initial state in the reducers
- Using combineReducers() from redux
Using Presentational and Container Components with Redux
- Presentational and container components.
- Splitting up ThreadTabs
- Splitting up Thread
- Removing store from App
- Generating containers with react-redux
- Action creators
(OPTIONAL) Working with React Native
- Init
- Routing
- <Navigator />
- Web components vs. Native components
- Styles
- HTTP requests
- What is a promise
- Single-use guarantee.
- Creating a promise
- Debugging with React Native
This skills-centric course is about 50% hands-on lab and 50% lecture, designed to train attendees in core modern web development skills, coupling the most effective techniques with the soundest industry practices. Throughout the course students will be led through a series of progressively advanced topics, where each topic consists of lecture, group discussion, comprehensive hands-on lab exercises, and lab review. Our courses include a wide range of supporting materials and labs to ensure all students are appropriately challenged or assisted at all times.
This is an introductory-level React development course, designed for experienced web developers that need to further extend their skills in modern web development using React.