Banner

Getting Started with React | React Basics

Live Classroom
Duration: 4 days
Live Virtual Classroom
Duration: 4 days
Pattern figure

Overview

This course is designed for web developers who are looking to enhance their skills and learn how to build a simple React component with JSX syntax to demystify its usage. In this course, participants learn how to configure the Facebook Graph API, get their ‘likes’ list, and render it using React. The course focuses on core lifecycle events for integration in the React world and also moves on to touch advanced-level topics, such as React on the server side and Redux towards the end of the course.

What You'll Learn

  • Understand the ReactJS basics
  • Install and create your first React component
  • Refactor the ReactJS component using JSX
  • Integrate your React application with the Facebook login and Graph API, then fetch data from your liked pages in Facebook and display them in a browser
  • Handle UI elements events with React, respond to users input, and create stateful components
  • Use some core lifecycle events for integration and find out about ES6 syntaxes in the React world
  • Understand the FLUX architecture and create an application using FLUX with React
  • Make a component more reusable with mixins and validation helpers and structure your components properly
  • Explore techniques to test your ReactJS code
  • Deploy your code using WebPack and Gulp

Curriculum

  • Introducing ReactJS
  • Downloading ReactJS
  • Tools
  • Trying ReactJS

  • What is JSX?
  • Why JSX?
  • The ReactJS anatomy

  • Component properties
  • Configuring Facebook open-graph API
  • Rendering data in a ReactJS component

  • Properties versus states in ReactJS
  • Exploring the state property
  • Events

  • High-performance questions: Ask vs. Tell
  • Experimenting and hypothesis testing
  • Lean startup and canvases
  • Kanban values and systems
  • Iterative framework and sampling of practices

  • An overview of Flux
  • Flux versus the MVC architecture
  • Actions
  • Dispatchers
  • Stores
  • Controller-views and views
  • Revisiting the code

  • Understanding Mixins
  • Validations
  • The structure of the component
  • Summary

  • Testing in JavaScript using Chai and Mocha
  • Testing using ReactTestUtils
  • The jestTypical example of a Testsuite with Mocha, expect, ReactTestUtils and Babel
  • Testing with shallow rendering

  • An introduction to Webpack
  • Advantages of Webpack
  • Introduction to Gulp

  • An introduction to Webpack
  • Advantages of Webpack
  • Introduction to Gulp
waves
Ripple wave

Who should attend

This is an introductory-level React development course, designed for basic-level web developers that need to further extend their skills in modern web development.

This course is highly recommended for:

  • React developers
  • Lead React developers
  • Java developers with React
  • React.js developers
  • Web developers

Prerequisites

Participants must to have current, hands-on experience in developing basic web applications, and be proficient in HTML5, CSS3 and JavaScript essentials. They should have attended the course Introduction to HTML5/CSS3 and JavaScript or have equivalent knowledge and skills.

Interested in this Course?

    Ready to recode your DNA for GenAI?
    Discover how Cognixia can help.

    Get in Touch
    Pattern figure
    Ripple wave