Front-end Web Development using ReactJS

Introduction

ReactJS is a declarativeefficient, 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.

Training venue

The training is residential and will be held at T4D Training Centre in Westlands Nairobi, Kenya. The course fees cover the course tuition, training materials, two break refreshments, lunch, and study visits.

All participants will additionally cater for their, travel expenses, visa application, insurance, and other personal expenses.

Tailor- made

We can also tailor-make our courses for you. This way, you/your organization will benefit by:

  • Using own 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

For further inquiries, please contact us on details below: 

Email: This email address is being protected from spambots. You need JavaScript enabled to view it.

Mobile: +254 706909947

Accommodation

Accommodation is arranged upon request. For reservations contact the Training Officer.

Email: This email address is being protected from spambots. You need JavaScript enabled to view it.

Mobile Number: +254 706909947

Training fee

The course fee is KES 150,000.00 or USD 2,200.00 exclusive of VAT. The course fees covers the course tuition, training materials, two (2) break refreshments, lunch and study visits. Participants will cater for their travel and accommodation costs.

Payment

Payment should be transferred to Tech For Development - T4D account through bank on or before the course starting date.

Send proof of payment to This email address is being protected from spambots. You need JavaScript enabled to view it.

Cancellation policy

Payment for the all courses includes a registration fee, which is non-refundable, and equals 15% of the total sum of the course fee.

  1. Participants may cancel attendance 14 days or more prior to the training commencement date.
  2. No refunds will be made 14 days or less to the training commencement date. However, participants who are unable to attend may opt to attend a similar training at a later date, or send a substitute participant provided the participation criteria have been met

Please Note: The program content shown here is for guidance purposes only. Our continuous course improvement process may lead to changes in topics and course structure

Event Properties

Event Date 06-07-2020 8:00 am
Event End Date 17-07-2020 5:00 pm
Capacity 100
Cut off date 06-07-2020
Individual Price USD2,200.00
Location T4D Training Center
We are no longer accepting registration for this event
Share this event:

Connect with us

fb Facebook
twitter icon Twitter
linkedin Linkedin
g Google Plus

 

Contact us

+254 706909947

  outreach@t4d.co.ke

  Westlands Road, 

  Gate 18, 1st Floor, W6.

©2020 Tech 4 Development. All Rights Reserved.

Search

Essential SSL