Öppna kurser
Building Web Applications with React and Redux
React is an open-source JavaScript library from Facebook used for building HTML5 web applications. In this training course, you learn how to develop a complete application by building high-performance User Interfaces (UIs) with JSX components targeting a virtual DOM, and creating Flux applications, which provide complementary architectural patterns to construct client-side application functionality.
Kulsmål:
- Create an isomorphic web application using Facebook React and Redux
- Compose a UI using React JavaScript and JSX components
- Integrate React forms with Ajax and back-end REST services
- Apply the Container/Presentational architecture to create applications
- Integrate a variety of React extensions to create a modern application
-
Continue learning and face new challenges with after-course one-on-one instructor coaching
Förkunskaper:
Experience developing web pages with JavaScript, HTML, and CSS at the level of:
Course: JavaScript for Modern Web Development
Kursinnehåll
-
Introduction and Overview
- Features of React and Redux
- Why the Virtual DOM makes React run fast
- Configuring the development and build environment
- Incorporating third-party components
-
Designing Custom React Components
Displaying React content- Employing React.createElement() and React.DOM.render()
- Support well-designed components by leveraging imports
- Dynamically generating the UI
- Coding custom component classes
- Generating component output with the render method
- Composing a JSX component hierarchy
- Extending the hierarchy with the Container/Presentational design pattern
- Understanding the differences between JSX and HTML
-
Activating React Components
Parameterizing components- Disambiguating component properties and state
- Leveraging the children props to pass content dynamically
- Inserting properties into rendered output with this.props
- Improving maintainability and reliability with defaultProps and proptTypes
- Centralising logic at the container level by passing functions as props
- Integrating stateless functional components
- Separating component state from component behaviour
- Reading application data with this.state
- Mutating data with this.setState()
- Efficiently managing state to improve performance
- Best practises for sharing state with createContext
- Attaching and detaching logic and event handlers in componentDidMount and componentWillUnmount
- Enhancing performance with componentShouldUpdate
- Exploiting the react-router for semantic URLs
- Mapping URL paths and parameters to components
-
Developing React Forms
Manipulating form input components- Working with interactive properties
- Capturing form component updates with onChange
- Exploiting controlled components
- Applying the onChange / setState() convention
- Reducing onChange clutter for clearner code
-
Centralising State with Redux
Modelling client-side data interactivity- Architecting loosely-coupled applications for extensibility
- Managing state centrally
- Interacting with data using actions, reducers, and stores
- Defining reducers to correctly manage updates, deletes, and inserts
- Best practises when implementing Redux
- Creating a Redux data store
- Using the React-Redux Higher-Order Components
- Sharing state between containers and presentational components
- Integrating multiple stores/reducers in large applications to avoid complexity
- Reviewing alternatives: Mbox, alt, Relay, Flux, and Reflux
- Making Ajax calls from React using thunk and promises
- Integrating isomorphic-fetch to support client and server-side access
- Mapping CRUD access to REST actions
- Reviewing alternatives
-
Analysing React Applications
Developer tools- Inspecting React components with browser extensions
- Identifying and debugging rendering errors
- Running tests with Jest
- Isolating code under test with Enzyme
- Establishing a baseline
- Analysing performance with Flamegraphs
- Optimising component reconciliation with key
-
Advanced Features
- Building components with Hooks, useState, and useEffect
- Extending your components with Higher Order Components