Do you want to write interactive applications in HTML and JavaScript? Or are you already writing Single Page Applications, but is the HTML filled with unmaintainable semi code? Is data binding debugging and performance causing you headaches?
Don't you remember how data finds its way to the user interface?
Lets React:
Facebook created a functional approach to tackle traditional complexities in JavaScript: React (open source). Maligned in 2013, embraced since 2015 by the dominant websites in the world. Lets build fast components in a lasting and meaningful way.
In this course you will learn all about React, hooks and its ecosystem. Redux and React Router are covered extensively. EcmaScript 202X (or TypeScript), npm, Babel and Webpack will be used throughout the course.
Students, depending on their own project requirements, can choose to do exercises with a focus on function or class components and a focus on JavaScript or TypeScript. Solutions for all situations are provided.
New React functionality will be added to the course as soon as they are published.
Afterwards you are able to add React parts immediately to both existing and new websites.
Course content:
Introduction:
• What is React
• Why React
Module 1: Language constructs for React & Redux:
• EcmaScript 2015 and later (JavaScript)
• JSX
• Babel transpiler
Module 2: Basic:
• Render
• Fragments
• Properties & State
• Databinding
• Events
Module 3: Building Apps:
• Functional vs Class components, single responsibility
• Multiple components
• Reusable components (prop-types / typescript)
Module 4: Component Life:
• Component lifecycle
• Fetch server data
Module 5: Developer experience:
• Debugging
• Developer tools
• Unit testing
• Updating to new React versions
Module 6: Good to know:
• Error Boundaries
• Forms
• DOM interactions
• Portals
• Wrapping existing components
• Optimizations (using shouldComponentUpdate)
Module 7: Setting up a project:
• Webpack
• ESLint
• Hot Module Replacement
• Create-react-app
• Zeit Next
Module 8: Redux Basics:
• Redux Basics
• Redux Dev Tools
Module 9: React patterns (partly used by Redux):
• Pattern: Higher Order Components
• Pattern: Render Props
• Context (Pattern: Implicit state)
Module 10: Advanced Redux:
• Presentational vs Container Components
• React-Redux
• Async actions
• Redux Middleware
• Redux Undo
Module 11: React Router:
• Static routing
• No match (like a 404)
• Dynamic routing
• Redirection
• Prompt
Module 12: Isomorphic Applications:
• Server side rendering (universal / isomorphic applications), ReactJS.NET, Search Engine Optimization (SEO)
Module 13: Styling:
• Animations
• CSS, Inline styles
Module 14: Future:
• Suspense
• Time Slicing
Audience:
This course is intended for professional developers who are familiar with HTML and JavaScript programming
Language:
• English course material, English speaking instructor
Instructor: Rick Beerendonk
Rick is a senior consultant and trainer from The Netherlands. He has over 20 years of professional experience while working in small, large and fast growing organisations. His passion is simplicity, well-written code and team dynamics. He is specialised in front-end technologies and speaks regularly about these topics at international events. Rick have teached and talked about React since 2014.