React Programming Training Course | Code College


React Programming Training Course

Learn React Programming and how to build React apps in no time!



Duration

  • 5 Days Full-time

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 500)
  • Competency : Only offered as part of a Coding Bootcamp
  • You may apply for credits in NQF level 5 but these are to be ordered seperately at additional cost

Pre-requisites

You should have passed our HTML, CSS, JavaScript and JavaScript courses before doing this course

Delivery

  • In-Person (Woodmead Classroom)
  • Remote Online (Discord Webinar)

Who will benefit

  • Programmers who want to learn one 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 more advanced and sophisticated features of React.

    • 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
    • This course constitutes the core subject portion of the corresponding module in the Web Developer Bootcamp

    Content



    Day 1

    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 2

    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 3

    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 4

    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 5

    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

    Calendar