Course Code: reamatd3besp
Duration: 28 hours
Course Outline:

REACT - strongly with TS - (2-2.5 days)

  • Design Principles behind React
  • Understanding the React Shadow DOM
  • Setting up your Development Environment
  • Advanced components in React
  • The Component Life Cycle
  • Overview of JSX Syntax, quick intro only
  • Overview of React Hooks, best practices, scenarios
    • when does it make sense to build your own react hooks
    • useQuery and other hooks to optimize caching huge amount of data on the client side
  • Components' Relationships, best practices
  • Event Handling and Conditional Rendering
  • Container vs Presentational Components
  • Implementing Forms and Processing User Input
  • Testing Your React Web Application, vitest
    • best practices
    • proper mocking in isolation
    • in the context of Redux
  • Integrating React with other Frameworks and Plugins
  • Deploying your React Application
    • vite, deploying at one time approach
  • Debugging, strict mode, rendering twice
  • Redux, quick intro (hooks, practices)
    • sagas and reducers, states

MATERIAL UI - (around 0.5 days)

  • Overview of Material UI Resources and Tools
  • Understanding the patterns
    • implementing a Navigation Bar
    • implementing a List of Products
  • Creating a Custom Theme, advanced configuring
  • Testing the Application
  • Debugging the Application
  • Styling React components, in the MUI context
    • best practices

D3.JS - (1 day)

  • Overview of the data visualization process
  • Data visualization components: HTML, CSS, Javascript, DOM, D3, SVG
  • Overview of D3 methods: scaling, events, transitions and animations
  • Attaching your data to DOM (Document Object Model) elements
  • Using CSS3, HTML and/or SVG to showcase data
  • Making data interactive with D3.JS data-driven transformations and transitions
  • Working with layouts
  • Exporting SVG
  • Unit Testing D3
  • Troubleshooting 
  • Summaries and Conclusions