Introduction to ReactJS

• JSX concepts and rules

• Component analysis and programming

• Key advantages of using ReactJS

• Motivation and Support

ReactJS Demo 1:

Goal: 

• Set up React development environment

• Running a React program

• Write basic JSX

• Create React components

• Passing data through React props

ReactJS Demo 2:

Goals:

• Continue on ReactDemo1 and improve on CSS for Form control.

• Write React Hooks to create component's State and change State.

• Learn defining:   const [state, setState ] = useState( '' )

• Form handling in React and how to specify controlled Form elements.

• React Chrome Developer tool

ReactJS Project 1 Live Demo:

Goal:

• Write an API function to retrieve movie data from external API website.       

• Write a Search component to get the query string for movie search.

• Retrieve the movie information from API website.

• Present the movie information in an interesting UI (flip-card).

• Approach:   Model <-> Control <-> View

• Deployment of web application on Firebase on Google

ReactJS Project 1: Movie Search - Part 2 Live Demo.  ( please watch previous video first)

ReactJS Project 1 Deployment on Firebase Tutorial.

Goal:   

how to deploy your ReactJS application on the Internet for others to view and use? 

There are many Hosting websites available on the Internet.  We use Firebase from Google in this example.   Try it!

Firebase deployment Live Demo.

React Project 1:  Deployment on Firebase: 

10 Steps:

1. Create account on google firebase   

2. Create a project on firebase   

3. In React project app folder, npm install firebase-tools -g

4. At terminal: login to firebase:  firebase login

5. Create build file for React:   npm run build

6. After login,  enter:  firebase init

7. At terminal, enter:  firebase deploy

8. Choose firebase project created earlier

9. Choose hosting,  directory prompt:  build

10. Answer NO to all (i.e. unless you use SPA) questions.

Once successfully deployed, will be given a URL to your ReactJS app

===================================================

React Project 2: useState,  useEffect in a API data retrieval application.

Goals:   

• How to make components generic and reusable. 

• Coding <Resource  />  APIs and <ShowCat />  <Header />  render props.

• How to separate Data Access logic and Presentation logic. 

Live demo Part 2 of Project 2 - Cat Fun House

This is a continuation of earlier video demo.   Project 2 demonstrated how to code Re-usable components so that future development of applications can re-use the component easily - saving time and potential errors.

Part 3 Live Demo of Project 2 - Fun Cat House.   A demonstration of coding Re-usable and generic components on ReactJS.

Live Demo Part 1 of Project 3:  Dog Fun House.

Goal: 

• Demonstrate how to Re-use the Components of Resource for a different API external database 

• Show how to separate data access logic and rendering functions. 

Note:

- a demonstration of how to Re-use components from Project 2.      In this project, you will experience the saving of time and avoiding errors in coding.

Live Demo Part 2 of Project 3:  Dog Fun House.

Goal: 

• Demonstrate how to Re-use the Components of Resource for a different API external database 

• Show how to separate data access logic and rendering functions. 

Goal:   write a To-do List for learning ReactJS - Context API , Reducer

Solving the problem of sharing States between sibling components in React application.

Tasks in Project 4:

• Create a Header component

• Write a Create component to add a Task

• Write a Read component to display the list of Tasks

• Write a Update component to update the status of completion of a Task

• Write a Delete component to delete a Task

• Write the Task list on local storage

• Read the Task list from local storage

Live Demo of ReactJS Project 4: Part 1 -

Goals:

Learning how to use ReactJS Hooks to create context of states and sharing with other components. 

Live Demo of ReactJS Project 4: Part 2 -

Goals:

Learning how to use ReactJS Hooks to create context of states and sharing with other components. 

Live Demo of ReactJS Project 4: Part 3 -

Goals:

Learning how to use ReactJS Hooks to create context of states and sharing with other components. 

Live Demo ReactJS Project 4: To-Do-List Part 4 - Summary :

By the end of this Project 4 demo, and practices, you will gain the understanding of how to create context at a global component and how to use the Context Hooks API to make the states available for other components to use.

Summary in short:   you don't need to write Class based ReactJS compoents - which are burdensome, complicated with excessive wrapping and harder to share component's logics.       And you do not need to use Redux as well as we can achieve sharing of Component's state easily with Context APIs.

React Project 5: 

Goal: 

• Learn React Router Dom features.

• Build SPA

• Integrate Project 1, 2, 3, 4 into Project 5.

• Demonstrate Client routing and linking features

Live demo of coding ReactJS Router DOM features and building SPA.

React Project 6:  Pet Shop SPA

Goal: 

• Develop full web SPA.  See interface design.

• Implement ReactJS Client-side Routing and conditional navigation

• React-Hooks Form programming

• Invoke HTTP request to Backend server for CRUD.

• Basic security using JWT.  (JSON Web Token)

• Organize program architecture (MVC)

Live Demo of React Project 6 Part 1

Live Demo of ReactJS Project 6 Part 2

Live Demo of ReactJS Project 6 Pet Shop SPA part 3 of 7

Live Demo of React Project 6:  Pet Shop SPA Part 4 of 7

Live Demo of React Project 6:  Pet Shop SPA Part 5 of 7

Live Demo of React Project 6:  Pet Shop SPA Part 6 of 7

Live Demo of React Project 6:  Pet Shop SPA Part 7 of 7

ReactJS Summary - what have we learnt:

• JSX,  Virtual DOM,  Components

• ReacJS Hooks,  Reusability

• Props,  States,  Context APIs

• ReactJS deals with View Layer of MVC

• Lessons from Project 1:  Components and HTTP Request API and Rendering

• Project 2: Components programming, Props, Generic Component, Reusability by separating Access Logic and Presentation Logic

• Project 3: Re-using components in project 2 example.  Coding time drastically reduce and minimize errors

• Project 4: Context APIs of To-do-list and CRUD operations

• Project 5: ReactJS Client-side routing and SPA structure

• Project 6: full SPA Web application with client-side routing, conditional navigation and access control - Login / Register / Member validation - by using JSON Web Token provided by the Back-end server.

  
  

  What's next?    Learn Server Programming!

Introduction to Server-side Programming

Concepts:

• MERN Stack – Overview

• Node.js – a runtime environment for JavaScript

• Node.js set up and installation

• Express introduction

• MongoDB introduction

Live demo of coding JavaScript to access objects in Node.js and running of JavaScript programs.   

Express – Web Application Framework

Concepts:

• Routing control

• Middleware

• Error Handling

• Static file management

Express Middleware and Error Handling:

Concepts:

• What is Express Middleware?

• How to use and code Middleware?

• How to management Static files (ie. HTML / CSS / pictures etc. ) on server?

• How to handle errors properly and gracefully?

  
  

Live demo of JavaScript program coding using Express web app framework

Live demo of JavaScript program coding using Express web app framework - Part 3

Express, Mongoose ODM (Object Data Model) and MongoDB

Concepts:

• Web application program architecture

• Routing control and coding structure

• HTTP Requests:   Get, Post, Put, Delete

• Mongoose ODM

• Schema and Data Model Creation

• MongoDB on Atlas,  Database Access and Methods

• Create, Read, Update, Delete methods for MongoDB

• Data validation and error messages

• API testing using Postman

Live demo of coding using Express, Mongoose ODM. 

Live demo of coding using Express, Mongoose ODM.  Part 3

Live demo of coding using Express, Mongoose ODM.  Part 4

Live demo of coding using Express, Mongoose ODM.  Part 5

Live demo of coding using Express, Mongoose ODM.  Part 6

Live demo of coding using Express, Mongoose ODM.  Part 7 Summary

Project 7:  Server-side Program for Single-Page Application (SPA)

Live Demo:   integration with ReactJS Project 6 (SPA) for a Pet Shop Single-Page Application

Live Demo: Project 7:  Server-side Program for Single-Page Application (SPA) Part 2.

Live Demo: Project 7:  Server-side Program for Single-Page Application (SPA) Part 3.

Live Demo: Project 7:  Server-side Program for Single-Page Application (SPA) Part 4.

Live Demo: Project 7:  Server-side Program for Single-Page Application (SPA) Part 5.

Summary

Propose new project Assignments:

• Add MongoDB access to ReactJS To-do-List ( Project 4 )

• Enhance Project 6/7 with Pet Shop Shopping Cart

• New SPA for new domains (eg. Hotel, Car Rental, Social Media, Events, Hospital etc. )