Table of Contents

0. Welcome to the course..............................................................................1

0.1. Course Introduction.............................................................................1
0.2. Course Overview.................................................................................3
0.3. Course Outline....................................................................................3
0.4. Helpful tips for course completion......................................................4
1. Building rich front-end app with React and ES6........................................5
Introduction to Front-End Frameworks and React.........................................5
Understand React Structure.........................................................................5
Expert Viewpoints: Using Front-end Javascript Frameworks.........................6
Introduction to ES6.......................................................................................7
Introduction to JSX........................................................................................8
Reading: CRA versus Vite Tool......................................................................9
Lab: Hello World with React........................................................................10
Lesson 1 Summary: Building Rich Front-End App with React and ES6........10

0. Welcome to the course

0.1. Course Introduction
_ Top-rated front-end framework

 42% React: top web technologies, efficient, intuitive (based on

feeling rather than facts, proof)

_ Who should take this course

_ skill up start career, client-side skill, cloud centric project

_ What will you learn

_ React -> cross platform, interactive, user-friendly web

_ use special language: jsx

_ function and class components

 _ dom manipulation

_ hook management

_ Redux

_ Learn Material

_ instructional videos

_ final project

_ hand-on labs

_ reference material

_ Hand on projects

_ apply what u learn in realistic

_ topics: rating app, event, planner, todo app

_ Final projects

_ shopping cart app

_ Prerequisites

_ HTML, CSS

_ Programming concepts

_ Git/Githubs

_ Multiple program available

_ IBM Full-stack Javascript dev,

_ IBM Full-stack Software Dev

_ IBM Front end Dev

_ Cross-platform Mobile App Dev

0.2. Course Overview

1. Part of following program
 Full-Stack Development using JavaScript
  Full Stack Software Developer Professional Certificate
 Full-Stack Development using Python and JavaScript
 Front-End Development
 Cross-Platform Mobile App Development (coming soon)
 Cloud Application Development Foundations

2. Before taking this course, you should complete the following

courses.
 Getting Started with Git and GitHub , AND
 Introduction to Web Development with HTML, CSS, JavaScript , OR
 JavaScript Programming Essentials

0.3. Course Outline

Module 1: Introduction to React and Class Components

_ Front end framework, libraries and even further through learning

about prominent features of React

_ ES6, JSX Fundamentals -> create dynamic React components

effortlessly

_ State, Props, handling events

Module 2: Understanding Function Components with Array and DOM

Manipulation

_ Building dynamic React app, including

function components, arrays, how to use virtual DOM

_ Start from exploring props, event handling to pass data, create

interaction between components

_ Exploring component composition, learn its principles through

practical examples

_ state management in function components

_ Array in React components and the virtual DOM

 By the end you ll be able to build web applications using React’s

array handling
Module 3: In-depth Understanding of Advanced React Functionality

_ React hooks -> form management

_ Retrieve data from third party external services

_ redux library core concepts

_ Redux, Saga, Thunk, Redux tookit

Module 4: Practice, Final Project, and Peer Review Assignment

 Create react shopping cart

0.4. Helpful tips for course completion

1. Familiarise yourself with the course content
Browse module overview, objectives
Understand topic, associated assets
Familiarise with content order
Connect ideas to create completion plan

2. Form your plan and make a rough timeline for course

completion
Review completion time
Set reasonable time goal
Determine course completion deadline
Schedule daily study time
3. Actively manage your learning
Complete your independent tasks
Get support
Pass your quizzes
4. Talk with your friends and family about the course
Stay accountable, commit to the course
Talk to friends, family
Engage in conversation
Seek beneficial perspectives
5. Follow your plan
 1. Building rich front-end app with React
and ES6
Introduction to Front-End Frameworks and React

Understand React Structure

What ll learn

_ Vite build tool

_ Steps to create React Project

_ React Folder structure

Introduction to build tools

_ CRA tool: large, unnecessary

_ Vite: Improved, use with many frameworks, Bundle code only when
required

What’s bundling code? v

Create React project:

Type script, javascript ?? variant? v

React folder structure:

Node_modules: all dependencies

Public: Static assets, html, images, fonts

Src:

_ app.jsx: Root component of React app

_ main.jsx: Entry point for React

Package.json: metadata, scripts, for running, building ,testing

Vite.config.js: Config setting for vite build tool

ReadME: Instruction, usage guidelines, project doc

Index.html: Entry point for web app

Eslintrc.cjs: Configuration file used by ESlint

Eslintrc.cjs?Vite.config.js

Recap

What’s bundling code when required vite?

Expert Viewpoints: Using Front-end Javascript Frameworks

Which frontend frameworks u prefer

React: component-driven architecture

Props, state hold state of your app

React vs Angular ??

_ React faster

_ React resolve problems, cross browser issues

JSX: show errors, warning

_ Angular more verbose

 Vue vs React ??

User friendly, good dc

Reac has big community

React allows for cross platform mobile app, easiest cross over to
get into native app dev

Vue – progressive web app??

Introduction to ES6
What ll u learn
Define ES6

How to use new js feature, part of es6

ES6 standard

Create a Wide range of global info, communications, technology

standards

Js adheres to Ecma’s specifications EcmaScript 6 ES6

JS ES6:

_ let const

_ arrow functions: treated as variable, shorter and cleaner way to deal

with function

1 statement doesn’t need curly brackets

Can be pass as parameter (callback)

Return value make statement must be in curry

brackets
 _ promise: object representing the completion of an asynchronous
operation

_ classes: make object-oriented programming feasible

Blueprint for create object

Built on prototype in js

_ class: constructor: method that creates an object of a class

Body: contained in curly brackets

Object: Create using a new keyword

_ Inheritance: a class can inherit from another class

A class ll inherit all from its super classes

Call the superclass constructor with a super() method

Recap: New features: let, const, arrow funct, promise, class

Different types of arrow functions,

Object oriented make feasible

Introduction to JSX
What ll u learn: explain pp

Syntax

Compiling

Benefit

Pp: combine js with html

Read like html

 Support js expression

Syntax: use html elements, elements enclosed in brackets

Sample code:

Compiling: Use babel to compile?? Transform into js objects

Benefits of jsx: more accessible

Early identification of errors

Inline styles keep code simple

Performance

More secure

JSX vs Javascript

Recap: JSX read similarly to html

Use html element combined with js expression

Rely on compiler to transform html like text

benefits

Reading: CRA versus Vite Tool

CRA:

Webpack?

Module reloading?
 Robust solution for starting react projects, especially for beginner to do
small-medium sized applications

Vite:

Same creator with Vue.js

Leverage ES module imports, native browser support for es modules to

provide extremely fast hot module replacement

ES module import ? v

Module replacement? v

Native browser support?

Support various modern js features, type script, jsx, css preprocessors

CSS preprocessors?

Vite speed, simplicity -> more efficient development experience, as

projects grow in size, complexity

Lab: Hello World with React

Npm install webvitals ??

Lesson 1 Summary: Building Rich Front-End App with

React and ES6
Libraries offer: reusable code components

Frameworks provides: comprehensive structure for building app

React features: component-based architecture, declarative syntax, virtual

DOM, one way data binding, JSX integration, React Hooks employment

You can create React projects using CRA, Vite as alternate tool. Vite leverage
modern browser capabilities
ES6 (new features introduced in js)

JSX: extension to js

2. Introduction to Class Component

Introduction to Components
What’s a component?

_ A bunch of chunks of code that form building blocks that makes

building UI easier since it makes UI become reusable, can be handle
independently with

Purpose?

_ Render

_ Event handler

Component features?

Store data, pass data, update ui, manage dom

Functional Components:

Written like js functions

Working with React Class Components: Props and Event
Handling
Introduction to States
Passing Data and States between Components
Class Component Lifecycle
Lab: Content Rating Application to Like or Dislike Content
Lesson 2 Summary: Introduction to Class Components
Lesson 2 Practice Quiz: Introduction to Class Components