tailordev-academy / javascript-react

Material for the "Great user interfaces with React" training.

Great user interfaces with React

Table of Contents

• Introduction
  • What is React?
  • What is Flux?
  • What is Redux?
  • Modern JavaScript
    • ES5
    • ES2015 (ES6)
      • Block scoped declarations
      • Block scoped declarations – Example
      • Arrow functions
      • Destructuring
      • Imports/Exports
      • Imports – Example
      • Exports – Example
      • Template literals (strings)
      • Tagged template literals
      • Default parameters
      • Classes
      • Enhanced Object Literals
      • Dynamic object keys
      • Array spread
    • ESNext
      • Static class properties
      • Object Spread
      • Async/Await
      • Async/Await – Example
    • Reminder: Map/Filter/Reduce
  • 🚀 Hands-on
    • Exercise 1.1
    • Solution 1.1
  • Unit testing
    • Jest 101
    • Jest + Babel = ❤️
    • It works™
  • 🚀 Hands-on
    • Exercise 1.2
    • Solution 1.2
  • Transpilation with Babel
    • NPM scripts
    • Create a NPM module (1/2)
    • Create a NPM module (2/2)
    • Publish a NPM module
  • 🚀 Hands-on
    • Exercise 1.3
    • Exercise 1.4
  • Code coverage
• Writing components
  • Create React App
  • 🚀 Hands-on
  • ~/react/seqbook
  • *
  • The JSX syntax
    • Example please
    • React
    • ReactDOM
    • Class component
      • Example
    • Stateless/functional component
      • Example
    • React component tree
    • Composition
    • Lists and keys
      • Example
    • <App />
  • 🚀 Hands-on
    • Exercise 2.1
    • Solution 2.1 (The component)
    • Solution 2.1 (Usage)
  • About imports
    • Index or not index?
    • Absolute imports
  • Dealing with data (props)
    • What are props?
    • Props & class component
    • Props & stateless component
    • Typechecking With PropTypes
      • PropTypes on class-based components
      • PropTypes on functional components
  • 🚀 Hands-on
    • Exercise 2.2
    • Solution 2.2 – List
    • Solution 2.2 – Item
    • Exercise 2.3
    • Solution 2.3
  • Dealing with data (state)
    • What is state?
    • Example
  • 🚀 Hands-on
    • Exercise 2.4
    • Exercise 2.5
  • Props vs State
  • Receiving user's events
    • Events
    • Example
    • Alternative/Better syntax
  • Forms
    • Controlled components
      • Example
    • Uncontrolled components
  • 🚀 Hands-on
    • Exercise 2.6
    • Exercise 2.7
    • Checkpoint #1
  • Divide & Conquer
  • 🚀 Hands-on
    • Exercise 2.8
    • Exercise 2.9
    • Exercise 2.10
    • Checkpoint #2
    • Exercise 2.11
    • Exercise 2.12
    • Checkpoint #3
  • Advanced concepts
    • Lifecycle methods
    • Lifting state up
      • Example
    • CSS classes
      • classnames
  • Unit testing/Snapshots
    • Snapshot testing
      • Example of a snapshot test
      • Example of a reference file
      • Updating reference files
    • Enzyme
      • Enzyme API
      • Example with shallow()
      • Example with mount()
    • Code coverage
  • 🚀 Hands-on
    • Exercise 2.13
    • Exercise 2.14
    • Checkpoint #4
    • Exercise 2.15
    • Checkpoint #5
• Managing application state
  • What is Redux?
    • Trade-off
    • State tree
    • Immutability
    • Pure functions
  • Writing reducers, action creators and actions
    • Actions
    • Action creators
    • Reducers
    • Store
  • Ducks!
    • Example of a Duck(s)
  • Connecting React & Redux
    • <Provider />
    • Configuring the store
    • The root reducer
    • connect()
    • map*ToProps()
      • Example
    • Presentational vs Container Components
    • Directory structure
  • (Redux) Dev Tools
    • Browser Extension
      • Installing the browser Extension
    • Logger Middleware
      • Installing the Logger Middleware
  • 🚀 Hands-on
    • Exercise 3.1
    • Checkpoint #6
  • Unit testing
    • Presentational components
      • Example
    • Container components
      • Example
    • Redux
  • Refactoring with selectors
    • The problem
    • The solution
  • 🚀 Hands-on
    • Exercise 3.2
• Consuming APIs
  • Fetch and HTTP
    • Usage
    • Polyfills
  • Redux middleware
    • Redux Thunk
      • Example of a thunk
    • Redux Persist
      • Usage (with devtools extension)
      • Usage (with devtools extension)
    • Middleware vs Enhancers
  • 🚀 Hands-on
    • The Plot
    • Exercise 4.1
    • Exercise 4.2
    • Checkpoint #7
    • Exercise 4.3
  • Routing
    • React Router
      • Example
      • 404 - Not Found
  • 🚀 Hands-on
    • Exercise 4.4
    • Exercise 4.5
• The sky is the limit!
  • Code formatting
  • Flow types
    • On class-based components
    • On functional components
    • Library Definition
    • Flow coverage
  • Performance optimization
  • More on testing
    • redux-thunk & fetch
      • redux-mock-store
      • fetch-mock
    • Hidden Jest features
  • Server-Side Rendering (SSR)
    • Problem #1
    • Problem #2
    • Problem #3 (1/2)
    • Problem #3 (2/2)
    • Start the server
    • This was a Proof of Concept

License

This material is licensed under a Creative Commons Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license. See the bundled LICENSE file for further information. Any code provided (if not specifically indicated) is released by TailorDev under a MIT license.