Introduction To React

React is a JavaScript framework for building interactive UIs that are particularly suited for Single Page Applications (SPA) or mobile apps. It was developed and is currently maintained by a team at Facebook as well as a community of developers.

React is the one of the three primary front-end web frameworks for building modern web applications (the other being Angular from Google and Vue.js). React is typically used alongside additional libraries for state management, routing, and interaction with an API.

In the Stack Overflow Developer Survey of 2021, React was ranked as the most in-demand JavaScript framework. Some of the most popular applications that use React include Facebook, Instagram, Whatsapp, Netflix, AirBnb, Atlassian and DropBox. 

What You Will Learn:

• React architecture and its core features
• Working with React components
• Working with JSX
• Using Hooks for state management
• Interacting with an external API
• Deploying to Firebase

Prerequisite:

• Participants MUST BE familiar with HTML5, CSS3 and basic / vanilla JavaScript (ES5 or lower). Acquaintance with ECMA2015 / ES6 or later would be an added advantage.
• As React uses some of the more advanced features of JavaScript, this course may be too difficult for participants who have never worked with JavaScript before.

Course Structure:

• Day 1
• Introduction to React
• Single Page Applications (SPA), React features, overview and architecture, virtual DOM, components and component hierarchy,
• Lab Exercise 1
• Revision of core JavaScript basics, ES6: let, const, classes, fat arrow functions, this,
• Lab Exercise 2
• Building a basic React app, Using JSX and understanding JSX expressions and features, handler functions, callback handlers
• Lab Exercise 3
• Creating and working with components and their children, component composition, reusable components, fragments
• Day 2
• State, data flow and events
• Mutable and immutable state, property types, nature of data flow in React, working with events
• Lab Exercise 4 
• Lifting state, advanced / impossible state,  component communication and data flow, handling props correctly,
• Lab Exercise 5
• Declaring and using event handlers, binding handlers, inline event handlers, handler context and parameters,
• listening and reacting to events,
• Hooks
• Concept of Hooks, using hooks for adding state to function components
• Lab Exercise 6
• Managing component state with various hooks: useState, useReducer, useRef, Handling side-effects properly
• Lab Exercise 7
• Form elements and events, updating state in forms
• Day 3
• Component life cycle
• Life cycle methods, rendering and updating phase
• Lab Exercise 8
• Working with life cycle methods in the context of a full React app
• Routing in React
• Routing approach and context in React
• Lab Exercise 9
• Declaring routes, parent and child routes, basic linking, route parameters
• REST and Web APIs
• REST architecture and HTTP, JSON, standard implementation of Web APIs
• Lab Exercise 10
• Using Postman client to demo fetching JSON data through standard REST API calls
• Lab Exercise 11
• Fetching and re-fetching data, async / await, handling asynchronous data in React
• Day 4
• Firebase
• Intro to Firebase platform, setting up a project, configuration, settings
• Lab Exercise 11
• Creating a fully featured React app and deploying to Firebase