Course Name: Front-end Web Development using ReactJS
Venue: Tech for Development Training Center, Nairobi, Kenya
Event Date: 06th to 17th Jan, 2020
Course Fee: KES 150,000 OR USD 2,000
Online Registration: Register here
Tech For Development -T4D would like to invite you to a high impact Training Course in Front-end Web Development using ReactJS to be held in Nairobi, Kenya from 06th to 17th Jan, 2020
Introduction
ReactJS is a declarative, efficient, and flexible JavaScript library for building reusable UI components. It is an open-source, component-based front end library which is responsible only for the view layer of the application. It was initially developed and maintained by Facebook and later used in its products like WhatsApp & Instagram.
This course will start at the very basics and explain what exactly React is and how you may use it (and for which kind of apps). Thereafter, we'll go all the way from basic to advanced. We'll not just scratch the surface but dive deeply into React as well as popular libraries like react-router and Redux.
By the end of the course, you can build amazing React (single page) applications
Who should attend?
• Anyone who want to learn how to build reactive and fast web apps.
• Anyone who's interested in learning an extremely popular technology used by leading tech companies like Netflix, Uber, Airbnb and many more.
• Anyone who want to take their web development skills to the next level and learn a future-proof technology.
Requirements
• JavaScript + HTML + CSS fundamentals are absolutely required
• You DON'T need to be a JavaScript expert to succeed in this course
• ES6+ JavaScript knowledge is beneficial but not a must-have
• NO prior React or any other JS framework experience is required
Duration
10 days
Course Objectives
What you will learn:
• Building powerful, fast, user-friendly and reactive web apps
• Learn how to provide amazing user experiences by leveraging the power of JavaScript with ease
• Learn React Hooks & Class-based Components
• Forms and form validation in React apps
• Authentication
• Redux and React-Router
• Deploy your React apps live to the web
• Learn the latest React libraries and tools
Course Content
Module I
Getting Started
• Introduction to React
• Real-world SPAs vs React Web Apps
• Understanding Single Page Applications and Multi Page Applications
• First React Application
React Base Features and Syntax
• The Build Workflow
• Using Create React App
• Understanding the Folder Structure
• Understanding Component Basics
• JSX and JSX Restrictions
• Creating a Functional Component
• Working with Components & Re-Using Them
• Outputting Dynamic Content
• Props and States
• Events with Methods
• State Manipulation
• Stateless vs Stateful Components
• Passing Method References Between Components
• Adding Two Way Binding
• Adding Styling with Stylesheets
Module II
Working with Lists and Conditionals
• Rendering Content Conditionally
• Handling Dynamic Content "The JavaScript Way"
• Outputting Lists
• Lists & State
• Updating State Immutably
• Lists & Keys
• Flexible Lists
Styling React Components and Elements
• Setting Styles and Class Names Dynamically
• Adding and Using Radium
• Using Radium for Media Queries
• Introducing Styled Components
• Styled Components & Dynamic Styles
• Working with CSS Modules
• CSS Modules & Media Queries
Debugging React Apps
• Understanding Error Messages
• Finding Logical Errors by using Dev Tools & Sourcemaps
• Working with the React Developer Tools
• Using Error Boundaries (React 16+)
Module III
Deep Dive into Components and React Internals
• A Better Project Structure
• Splitting an App Into Components
• Comparing Stateless and Stateful Components
• Class-based vs Functional Components
• Component Creation Lifecycle
• Component Update Lifecycle (for props Changes)
• Component Update Lifecycle (for state Changes)
• Using useEffect() in Functional Components
• Cleaning up with Lifecycle Hooks & useEffect()
• Using shouldComponentUpdate for Optimization
• Optimizing Functional Components with React.memo()
• PureComponents instead of shouldComponentUpdate
• How React Updates the DOM
• Rendering Adjacent JSX Elements
• Using React.Fragment
• Higher Order Components (HOC)
• Passing Unknown Props
• Setting State Correctly
• Using PropTypes and Refs
• Refs with React Hooks
• Using the Context API
Module IV
Reaching out to the Web (Http / Ajax)
• Understanding Http Requests in React
• Creating a Http Request to GET Data
• Rendering Fetched Data
• POSTing Data to the Server
• Sending a DELETE Request
• Handling Errors Locally
• Adding Interceptors to Execute Code Globally
• Setting a Default Global Configuration for Axios
• Creating and Using Axios Instances
Routing : Multi-Page-Feeling in a Single-Page-Application
• Routing and SPAs
• Setting Up Links
• Setting Up the Router Package
• Setting Up and Rendering Routes
• Rendering Components for Routes
• Switching Between Pages
• Using Routing-Related Props
• The "withRouter" HOC & Route Props
• Absolute vs Relative Paths
• Styling the Active Route
• Passing and Extracting Route Parameters
• Using Switch to Load a Single Route
• Navigating Programmatically
• Nested Routes
• Redirecting Requests and Conditional Redirects
• Working with Guards
• Handling the 404 Case (Unknown Routes)
• Loading Routes Lazily
• Routing and Server Deployment
Module V
Forms and Form Validation
• Creating a Custom Dynamic Input Component
• Setting Up a JS Config for the Form
• Dynamically Create Inputs based on JS Config
• Handling User Input and Form Submission
• Custom Form Validation
• Adding Validation Feedback
• Handling Overall Form Validity
Redux
• Understanding State and Complexity of Managing State
• Understanding the Redux Flow
• Setting up Redux
• Dispatching Actions
• Subscribing and Dynamic Actions
• ES6 Object Destructuring
• ES6 Array Destructuring
• Refactoring and Organizing
• Reducers
• Working with Multiple Reducers
• ES6 Spread Operator in Reducers
• Spreading Objects
• Filtering Redux Data
• Sorting Redux Data
Redux Advanced
• Adding Middleware
• Using the Redux Devtools
• Async in Redux
• Async Writes in Redux
• Async Status and Error Handling
• Testing React
• Testing Redux
• Production Builds
Module VI
Deploying the App to the Web
• Deployment Steps
• Building the Project
• Production Webpack
• Deploying on Firebase, Heroku
React Hooks
• What are "React Hooks"?
• The useState Hook
• useState vs. setState
• Complex State with useState
• The useEffect Hook
• useEffect Dependencies
• Cleaning up Effects
• The useReducer Hook
• The Context API & useContext Hook
• Creating Custom Hooks
Methodology
The instructor led trainings are delivered using a blended learning approach and comprise of presentations, guided sessions of practical exercise, web based tutorials and group work. Our facilitators are seasoned industry experts with years of experience, working as professionals and trainers in these fields.
All facilitation and course materials will be offered in English. The participants should be reasonably proficient in English.
Accreditation
Upon successful completion of this training, participants will be issued with a certificate of participation.
Action plan
Visit our website for more details.
Tailor-made training
This training course can also be tailored for your organization. This way, your organization will benefit by:
• Using own datasets and tools during the training.
• Being able to choose areas of interest you wish the trainer to put more emphasis on.
• Taking the course in-house or at a venue of choice.
• Cutting on the cost of transport and accommodation.
Testimonials
Kindly visit this link to see video and photo testimonials of our previous training events.
FAQs
Need more information? Kindly visit this link to see answers to frequently asked questions.
How to participate
Register as individual.
Contact information
Email: outreach@t4d.co.ke
Tel: +254 706909947
Website: www.t4d.co.ke
Kind regards.

Sylvia Kura,
Customer Relationship Officer,
Tech For Development
Innovation for impact