Front-end Web Development using ReactJS

Posted By : User Ref No: WURUR49095 0
  • Image
  • TypeWorkshop
  • Image
  • Location Nairobi, Kenya
  • Price
  • Date 06-01-2020 - 17-01-2020
Front-end Web Development using ReactJS, Nairobi, Kenya
Workshop Title
Front-end Web Development using ReactJS
Event Type
Workshop
Workshop Date
06-01-2020 to 17-01-2020
Last Date for Applying
06-01-2020
Location
Nairobi, Kenya
Organization Name / Organize By
Tech For Development
Presented By
T4D
Sponsored By
T4D
Organizing/Related Departments
Tech For Development
Organization Type
Event Organizing Company
WorkshopCategory
Technical
WorkshopLevel
International
Related Industries

Education/Teaching/Training/Development

Information Technology

Computer/Technology

Internet/Ecommerce

Location
Nairobi, Kenya

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: [email protected]
Tel: +254 706909947
Website: www.t4d.co.ke

Kind regards.

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

Registration Fees
Not Mention
Registration Ways
Email
Phone
Website
Address/Venue
  Westlands Road 104834-00101  Pin/Zip Code : 00101
Landmark
Kenya
Official Email ID
Contact
Jeff karani

Westlands Road 104834-00101

[email protected]

   0706909947    Fax No: 00101
Jeff karani

Westlands Road 104834-00101

[email protected]

   +254706909947    Fax No: 00101