Pelatihan Modern React and Redux Front-End Framework

Pada tanggal 22-24 Agustus 2019 telah dilangsungkan pelatihan inhouse dengan topik Modern React and Redux Web Front-End Framework. Peserta dari pelatihan kali ini adalah pengembang aplikasi web dari PT Focus Inti Solusi, Jakarta.

Materi yang dibahas pada pelatihan ini adalah mengembangkan aplikasi Web menggunakan React dan Redux, pada pelatihan ini peserta akan diajak membuat beberapa contoh aplikasi dengan menggunakan React dan Redux sehingga lebih mudah untuk memahami konsep-konsep yang diajarkan.

Adapun materi yang dibahas pada pelatihan ini adalah sebagai berikut:

  • Pengenalan React
  • Menggunakan Boilerplate Projects
  • Project Setup, Taste of JSX, More on JSX, Import Statements
  • ReactDOM vs React, Differences Between Component Instances and Component Classes
  • Render Targets, Component Structure, Youtube Search API Signup
  • Export Statements, Class-Based Components
  • Handling User Events, Introduction to State
  • More on State, Controlled Components
  • Breather and Review, Ajax Requests with React, Youtube Search Response
  • Refactoring Functional Components to Class Components, Props, Building Lists with Map
  • List Item Keys, Video List Items, Detail Component and Template Strings
  • Handling Null Props, Video Selection, Styling with CSS, Searching for Videos, Throttling Search Term Input
  • Modeling Application State, What is Redux?, More on Redux, Even More on Redux
  • Managing App State with Redux, Connecting Redux to React
  • Implementation of a Container Class, Containers and Reducers Review
  • Actions and Action Creators, Binding Action Creators, Creating an Action
  • Consuming Actions in Reducers, Conditional Rendering
  • Reducers and Actions Review, Intermediate Redux: Middleware
  • Component Setup, Controlled Components and Binding Context, Form Elements in React
  • Working with API’s, Introduction to Middleware
  • Ajax Requests with Axios, Redux-Promise in Practice
  • Avoiding State Mutations in Reducers, Building a List Container, Mapping Props to a Render Helper
  • Adding Sparkline Charts, Making a Reusable Chart Component, Labeling of Units
  • Google Maps Integration
  • React Router + Redux Form, Exploring the Posts Api
  • Installing React Router, Setting Up React Router, Route Configuration, Nesting Of Routes
  • Form Validation, ReactRouter and ReduxForm

2