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 

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 

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

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

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