Sign in

React Training Course

Learn the fundamentals of React,and how to apply your React knowledge

Duration

  • 5 Days

What do I need?

  • Webinar : A laptop, and a stable internet connection. The recommended minimum speed is around 10 Mbps.
  • Classroom Training : A laptop, please notify us if you are not bringing your own laptop. Please see the calendar below for the schedule

Certification

  • Attendance : If you have attended 80% of the sessions and completed all the class work, you qualify for the Attendance Certificate. (Course Price : R14 995)
  • Competency : If you have also enrolled for the additional competency projects, you qualify for the Competency Certificate. (Course Price : R18 995)

Alignment

  • NQF5 - Systems Development - Unit Standard 115368(12 credits) (If an MICT-Granted student)
  • The NQF accreditation forms part of the competency portion of the course
  • You have to enroll for the competency certification, not the attendance certification to obtain the NQF accreditation credits.
.

Pre-requisites

Who will benefit

  • Programmers who want to learn on of the leading JavaScript-based frameworks of today
  • Developers who found that JavaScript alone is inadequate to develop a rich, fully-fledged front-end. We then start from the nuts-and-bolts and building up to the most advanced and sophisticated features of React, going in-depth.

    • What you will learn

    • Know the fundamentals of the React JavaScript-based framework
    • Know how well-known single page-applications are designed and represented by components, in this case React Components
    • Know how React Components exchange information amongs another on a page
    • Know how React Pages share information with Redux
    • Use life-cycle Hooks in React
    • Consume a RESTful API with a React application
    • Develop a standalone React app utilising a Firebase database
    1. Home
    2. Training Courses
    3. React

    Day One

    INTRODUCING REACT AND UI DESIGN

    • What is React?
    • How to Set up a React-Based Application
    • Installing create-react-app
    • Creating Your First React Application
    • Activity: Creating an Application with create-react-app
    • Exploring the Generated Content
    • The create-react-app Commands
    • The npm start Command
    • Changing File Content and Viewing the Result
    • Activity: Starting and Changing the Application
    • The npm test Command
    • The npm run build Command
    • The npm run eject Command
    • How to Design a UI
    • Everything Is a Component
    • Decompose a User Interface
    • Container and Presentational Components
    • Activity: Detecting Components in a Web User Interface

    Day Two

    CREATING COMPONENTS

    • Definition of a Component 
    • Building Our First React Component 
    • Managing Styles 
    • Adding CSS 
    • Activity: Defining a Shopping Cart 
    • Using JSX 
    • Activity: Translating HTML into JSX 
    • Composing Components 
    • Combining Components 
    • Activity: Defining a Composed Cart 
    • Data Propagation 
    • Activity: Creating a Cart Item Component 
    • Managing the Internal State 
    • Activity: Adding State Management to the Cart Component 

    Day Three

    MANAGING USER INTERACTIVITY

    • Managing User Interaction
    • HTML Events versus React Events
    • Event Handlers and the this Keyword
    • Changing the State
    • Activity: Adding Items to the Shopping Cart
    • Component Lifecycle Events
    • Activity: Showing the Quantity of Items Added to the Cart
    • Managing Routing 
    • Installing React Router 
    • Using the Router 
    • Defining Views 
    • Some Notes About the Route Component 
    • Nested Views 
    • Path Parameters 
    • Activity: Adding a View About Shipping Methods 

    WORKING WITH COMPONENTS

    • Styles
    • Example Application

    CONDITIONAL RENDERING

    • Inline If with Operator
      • Inline If-Else with Conditional Operator
    • props.children

    Day Four

    BUILDING FORMS USING FORMIK

    • Create an Initial Form Template
    • Adding more Custom Validation
    • Formatting Validation Error Messages

    GETTING DATA FROM RESTFUL APIS WITH AXIOS

    • GitHub RESTful API
    • Getting Data
    • Life Cycle componentDidMount
    • Showing a Loader Icon
    • Implementing a GitHub Results Display Page
    • Adding an Input to GitHub Results Display Page

    ROUTING

    Installing React-Routing-DOM

    • Setting Up Our Routes
    • Navigation Bar Links
    • Route Parameters
    • Specifying Route Parameters

    Retrieving Route Parameters

    • Programmatic Navigation

    Day Five

    C.R.U.D. WITH FIREBASE

    More on Firebase

    • Using Firebase
    • Adding Firebase to our React App
    • Working with a Firebase Database
    • Displaying List of Users
    • Preparing for Routing
    • Setting Permissions for Read
    • Adding a User
    • Deleting a User
    • Delete Dialog
    • Populating the Form on Edit
    • Updating a User

    INTRODUCTION TO REDUX.

    • What is Redux?
    • Transiting from Component States to Application State
    • Understanding the Redux Flow
    • Reducers
    • Setting Up Reducer and Store
    • Defining Actions
    • Reducer
    • Connecting Actions, Reducer and Store

    REACT WITH REDUX

    • Building our App
    • Reactstrap CSS
    • Props
    • AddProduct Component
    • Running your app
    Start learning

    Subscribe to our Newsletter for latest news.

    If the pdf download does not work, try a different browser

    Save as PDF
    © 2004+
    Back to top