Coursera-React

> >

> > ``` - Save all the changes and do a Git commit with the message \"Intro. to Redux\".

Conclusions

In this exercise you learnt to install and configure Redux and use it in your React application.

Introduction to Redux: Additional Resources

PDFs of Presentations

3-MVC.pdf PDF File 4-Flux-Arch.pdf PDF File 5-Intro-Redux.pdf PDF File

React Resources

- [Redux](https://redux.js.org/) - [Redux on Github](https://github.com/reactjs/redux) - [React and Redux](https://redux.js.org/basics/usage-with-react) - [Redux Basics Documentation](https://redux.js.org/basics) ```{=html} ``` - [The Flux Architecture](https://facebook.github.io/flux/)

Other Resources

- [Redux Tutorials](https://github.com/markerikson/react-redux-links/blob/master/redux-tutorials.md) - [Flux Architecture In Depth Overview](https://facebook.github.io/flux/docs/in-depth-overview.html#content)

Module xx: React Redux Form: Objectives and Outcomes

In this lesson we will learn to create forms using react-redux-form that enables us to store form information in the Redux store, and brings additional benefits. At the end of this lesson you will be able to: - Configure and use react-redux-form to create Controlled forms - Store the form state in the Redux store

Chapter 1. React Redux Forms

Chapter 2. Exercise (Video): React Redux Form

Chapter 3. Exercise (Instructions): React Redux Form

Objectives and Outcomes

In this exercise you will install react-redux-form and then convert the controlled form that we created earlier into a form supported by react-redux-form. At the end of this exercise you will be able to: - Install and configure react-redux-form - Implement a controlled form using react-redux-form

Installing and Using react-redux-form

- We first install the react-redux-form into our project as follows: ``` > yarn add ``` - Then open ContactComponent.js and update the Feedback Form to use react-redux-form: ``` > . . . > import { Breadcrumb, BreadcrumbItem, > Button, Row, Col, Label } from 'reactstrap'; > import { Control, LocalForm, Errors } from 'react-redux-form'; > . . . > handleSubmit(values) { > console.log('Current State is: ' + JSON.stringify(values)); > alert('Current State is: ' + JSON.stringify(values)); > // event.preventDefault(); > } > . . . > this.handleSubmit(values)}> > > First Name > > placeholder="First Name" > className="form-control" > /> > > > > Last Name > > placeholder="Last Name" > className="form-control" > /> > > > > Contact Tel. > > Conclusions In this exercise we installed and used the react-redux-form to design a controlled form.

Module xx: Exercise (Video): React Redux Form Validation

Chapter 2: Exercise (Instructions): React Redux Form Validation

Objectives and Outcomes

In this exercise we will explore simple form validation for react-redux-form. At the end of this exercise you will be able to: - Configure and implement simple form validation for controlled forms designed using react-redux-form.

Implementing Simple Form Validation

- Open ContactComponent.js and update it as follows to implement form validation: ``` > . . . > const required = (val) => val && val.length; > const maxLength = (len) => (val) => !(val) || (val.length <= len); > const minLength = (len) => (val) => val && (val.length >= len); > const isNumber = (val) => !isNaN(Number(val)); > const validEmail = (val) => /^[A-Z0-9._%+-]+@[A-Z0-9.-]+.[A-Z]{2,4}$/i.test(val); > . . . > > First Name > > placeholder="First Name" > className="form-control" > validators={{ > required, minLength: minLength(3), maxLength: maxLength(15) > }} > /> > className="text-danger" > model=".firstname" > show="touched" > messages={{ > required: 'Required', > minLength: 'Must be greater than 2 characters', > maxLength: 'Must be 15 characters or less' > }} > /> > > > > Last Name > > placeholder="Last Name" > className="form-control" > validators={{ ``` - Save all the changes and do a Git commit with the message \"React Redux Form Validation\"

Conclusions

In this exercise you learnt about implementing simple form validation using react-redux-form.

Chapter 2: React Redux Form: Additional Resources

PDFs of Presentations

6-React-Redux-Form.pdf PDF File

React Resources

- [React Redux Form Documentation](https://davidkpiano.github.io/react-redux-form/docs.html)

Other Resources

- [The boring React Redux forms](https://medium.com/@steida/the-boring-react-redux-forms-a15ee8a6b52b) - [How to populate react-redux-form with dynamic default values](https://swizec.com/blog/populate-react-redux-form-dynamic-default-values/swizec/8158) - [Should you store your form state in Redux?](https://goshakkk.name/should-i-put-form-state-into-redux/)

Assignment 3: React Forms and Redux

Peer-graded Assignment: React Forms and Redux

DeadlineNov 6, 11:59 PM PST Ready for the assignment? You will find instructions below to submit. In this assignment you will be updating the React application with a react-redux-form based local form and do the form validation in code.

Step-By-Step Assignment Instructions

less Assignment Overview In this assignment you will update the DishdetailComponent.js to include a form and do the form validation in code. At the end of this assignment, you should have completed the following tasks to update the page: - Added a new class component named CommentForm to > DishdetailComponent.js. - Provide a form to enable users to submit their comments - Validate the information entered by the users in the form Assignment Requirements Task 1 In this task you will add a new class component named CommentForm. You need to complete the following: - Add a new class component named CommentForm that will add a button > to the view as shown in the image below. - When the button is clicked, it toggles a modal that will display the > comment form. - The CommentForm component is used by the RenderComments function to > display the button for toggling the modal. Task 2 In this task you will construct the form for users to submit their comments as shown in the image below. You need to complete the following: - Set up the form as a local form using the react-redux-form with the > three fields: author, rating and comment. - The rating field in the comment form is implemented using a select, > the author is implemented using a text field, while the comment > uses a textarea with six rows. Task 3 In this task, you will enable form validation as shown in the images below. You need to complete the following: - The author field should at least be three characters long. - The author field should be less than or equal to 15 characters. - The user should be alerted by showing the invalid message displayed at the bottom of the field. Image006.

Review criteria

less Upon completion of the assignment, your submission will be reviewed based on the following criteria: Task 1: - A CommentForm component is implemented that adds a button to the view, which when clicked will toggle a modal containing the form. Task 2: - The form is set up with the three fields correctly. - A select is included in the form to enable users to submit the rating, a text field for author and a text area for the comment. Task 3: - The author field is being properly validated. If incorrect, the user is alerted.

Assignment 3: React Forms and Redux: Additional Resources

Assignment Screenshots

React Resources

- [reactstrap Modal Component](https://reactstrap.github.io/components/modals/) - [React Redux Form Documentation](https://davidkpiano.github.io/react-redux-form/docs.html)

Redux Actions: Objectives and Outcomes

In this lesson we will look at how to create redux actions and how action creators can be designed to return the action objects. Thereafter we look at how to dispatch actions. We also look at how to split the reducer into simpler functions and combine them. At the end of this exercise, you will be able to: - Define Redux actions - Create action creator functions that return action objects - Split the reducer function into multiple simpler functions and combine the reducer functions

Module xx: Redux Actions

Module xx: Exercise (Video): Combining Reducers

Exercise (Instructions): Combining Reducers

Objectives and Outcomes

In this exercise you will learn about how we can have separate reducers managing parts of the state, and how they can be combined together to manage the whole state. At the end of this exercise you will be able to: - Implement reducers that are responsible for only part of the state - Combine the reducers to manage the entire state

Splitting the Reducer

- In the redux folder, create a new file named dishes.js and add the following to it: ``` > import { DISHES } from '../shared/dishes'; > export const Dishes = (state = DISHES, action) => { > switch (action.type) { > default: > return state; > } > }; ``` - Then, create a file named comments.js and add the following to it: ``` > import { COMMENTS } from '../shared/comments'; > export const Comments = (state = COMMENTS, action) => { > switch (action.type) { > default: > return state; > } > }; ``` - Similarly, create a new file named promotions.js and add the following to it: ``` > import { PROMOTIONS } from '../shared/promotions'; > export const Promotions = (state = PROMOTIONS, action) => { > switch (action.type) { > default: > return state; > } > }; ``` - And finally, create a new file named leaders.js and add the following to it: ``` > import { LEADERS } from '../shared/leaders'; > export const Leaders = (state = LEADERS, action) => { > switch (action.type) { > default: > return state; > } > }; ``` - Now that we have split the management of state into different reducers that manage partial state, we need to combine them together. Open configureStore.js and update it as follows: ``` > import {createStore, combineReducers} from 'redux'; > import { Dishes } from './dishes'; > import { Comments } from './comments'; > import { Promotions } from './promotions'; > import { Leaders } from './leaders'; > > export const ConfigureStore = () => { > const store = createStore( > combineReducers({ > dishes: Dishes, > comments: Comments, > promotions: Promotions, > leaders: Leaders > }) > ); > return store; > } ``` - Now we can safely delete the reducer.js file from the project. - Save all the changes and do a Git commit with the message \"Combining Reducers\".

Conclusions

In this exercise we have learnt to split the reducer into multiple reducers that manage partial state, and then combine them together.

Module xx: Exercise (Video): Redux Actions

Exercise (Instructions): Redux Actions

Objectives and Outcomes

In this exercise we will learn to define various Redux actions and implement the action creators to dispatch the actions to the Redux store. At the end of this exercise you will be able to: - Define Redux actions and implement the action creators - Dispatch actions from the action creators to update the system state in the Redux store

Creating Actions

- In the redux folder create a new file named ActionTypes.js and add the following to it: ``` > export const ADD_COMMENT = 'ADD_COMMENT'; ``` - Then, create a file named ActionCreators.js and add the following to it: ``` > import as ActionTypes from './ActionTypes'; > export const addComment = (dishId, rating, author, comment) => ({ > type: ActionTypes.ADD_COMMENT, > payload: { > dishId: dishId, > rating: rating, > author: author, > comment: comment > } > }); ``` - Next, update comments.js to initiate action when the action is dispatched by the ActionCreator as follows: ``` > import { COMMENTS } from '../shared/comments'; > import as ActionTypes from './ActionTypes'; > export const Comments = (state = COMMENTS, action) => { > switch (action.type) { > case ActionTypes.ADD_COMMENT: > var comment = action.payload; > comment.id = state.length; > comment.date = new Date().toISOString(); > console.log("Comment: ", comment); > return state.concat(comment); > default: > return state; > } > }; ``` - Now update MainComponent.js to make the action available for use within the DishdetailComponent as follows: ``` > . . . > import { addComment } from '../redux/ActionCreators'; > . . . > const mapDispatchToProps = dispatch => ({ > addComment: (dishId, rating, author, comment) => dispatch(addComment(dishId, rating, author, comment)) > }); > . . . > dish.id === parseInt(match.params.dishId,10))[0]} > comments={this.props.comments.filter((comment) => comment.dishId === parseInt(match.params.dishId,10))} > addComment={this.props.addComment} > /> > . . . > > export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Main)); ``` - Finally, update DishdetailComponent.js as follows to initiate the action upon the user submitting the comment form: ``` > . . . > function RenderComments({comments, addComment, dishId}) { > . . . > > . . . > this.props.addComment(this.props.dishId, values.rating, values.author, values.comment); > . . . > addComment={props.addComment} > dishId={props.dish.id} > /> > . . . ``` - Save all the changes and do a Git commit with the message \"Redux Actions\"

Conclusions

In this exercise we have learnt to create and dispatch actions to update the system state in the Redux store.

Redux Actions: Additional Resources

PDFs of Presentations

Redux Resources

- [Redux Actions](https://redux.js.org/basics/actions) - [Redux Reducers](https://redux.js.org/basics/reducers) - [Redux Usage with React](https://redux.js.org/basics/usage-with-react)

Module xx: Redux Thunk: Objectives and Outcomes

Redux Thunk [middleware](https://github.com/reactjs/redux/blob/master/docs/advanced/Middleware.md) allows you to write action creators that return a function instead of an action. In this lesson you will see the use of redux thunk to return a function. At the end of this lesson you will be able to: - Use Redux Thunk middleware to return a function instead of an action - Use a logger middleware to print a log of actions initiated on the Redux store.

Redux Thunk

Exercise (Video): Redux Thunk

Notes

Exercise (Instructions): Redux Thunk

Objectives and Outcomes

Redux Thunk [middleware](https://github.com/reactjs/redux/blob/master/docs/advanced/Middleware.md) allows you to write action creators that return a function instead of an action. In this exercise you will see the use of redux thunk to return a function. At the end of this exercise you will be able to: - Use Redux Thunk middleware to return a function instead of an action - Use a logger to print a log of actions initiated on the Redux store.

Installing Redux Thunk and Logger

- Install Redux Thunk and Logger as shown below: ``` > yarn add [email protected] > > yarn add [email protected] ``` - Then open configureStore.js and update it to use the Thunk and Logger as follows: ``` > import {createStore, combineReducers, applyMiddleware } from \'redux\'; > . . . > import thunk from 'redux-thunk'; > import logger from 'redux-logger'; > . . . > combineReducers({ > dishes: Dishes, > comments: Comments, > promotions: Promotions, > leaders: Leaders > }), > applyMiddleware(thunk, logger) > . . . ``` - Next, open ActionTypes.js and add new action types as follows: ``` . . . export const DISHES_LOADING = \'DISHES_LOADING\'; export const DISHES_FAILED = \'DISHES_FAILED\'; export const ADD_DISHES = \'ADD_DISHES\'; ``` - Then open ActionCreators.js and add new actions: ``` > . . . > import { DISHES } from '../shared/dishes'; > . . . > export const fetchDishes = () => (dispatch) => { > dispatch(dishesLoading(true)); > setTimeout(() => { > dispatch(addDishes(DISHES)); > }, 2000); > } > export const dishesLoading = () => ({ > type: ActionTypes.DISHES_LOADING > }); > export const dishesFailed = (errmess) => ({ > type: ActionTypes.DISHES_FAILED, > payload: errmess > }); > export const addDishes = (dishes) => ({ > type: ActionTypes.ADD_DISHES, > payload: dishes > }); ``` - Next, open dishes.js and add the code to respond to actions as follows: ``` > import as ActionTypes from './ActionTypes'; > export const Dishes = (state = { isLoading: true, > errMess: null, > dishes:[]}, action) => { > switch (action.type) { > case ActionTypes.ADD_DISHES: > return {...state, isLoading: false, errMess: null, dishes: action.payload}; > case ActionTypes.DISHES_LOADING: > return {...state, isLoading: true, errMess: null, dishes: []} > case ActionTypes.DISHES_FAILED: > return {...state, isLoading: false, errMess: action.payload}; > default: > return state; > } > }; ``` - Add a new component named LoadingComponent.js to display a loading message as follows: ``` > import React from 'react'; > export const Loading = () => { > return( > > >
Loading . . .
>

> ); > }; ``` - Now we will update the remaining components to use the actions. First, open MainComponent.js and update it as follows: ``` > . . . > import { addComment, fetchDishes } from '../redux/ActionCreators'; > . . . > fetchDishes: () => { dispatch(fetchDishes())} > . . . > componentDidMount() { > this.props.fetchDishes(); > } > . . . > const HomePage = () => { > return( > dish={this.props.dishes.dishes.filter((dish) => dish.featured)[0]} > dishesLoading={this.props.dishes.isLoading} > dishesErrMess={this.props.dishes.errMess} > promotion={this.props.promotions.filter((promo) => promo.featured)[0]} > leader={this.props.leaders.filter((leader) => leader.featured)[0]} > /> > ); > } > const DishWithId = ({match}) => { > return( > dish.id === parseInt(match.params.dishId,10))[0]} > > isLoading={this.props.dishes.isLoading} > errMess={this.props.dishes.errMess} > comments={this.props.comments.filter((comment) => comment.dishId === parseInt(match.params.dishId,10))} > addComment={this.props.addComment} > /> > ); > }; > . . . ``` - Open DishdetailComponent.js and update it as follows: ``` > . . . > import { Loading } from './LoadingComponent'; > . . . > if (props.isLoading) { > return( > > > >

Coursera - React

Project Structure

The hands-on project on Build Your First React Website is divided into following tasks:

Front-End Web Development with React

(by The Hong Kong University of Science and Technology)

Part II of Front-end web development by Coursera & Hong Kong University of Science & Technology

About this course:

At the end of this course, you will:

Week - Syllabus

Week 1: Introduction to React - 10hrs

Week 2

React Router and Single Page Applications

Week 3

React Forms, Flow Architecture and Introduction to Redux

Week 4

More Redux and Client-Server Communication

At the end of this course, you will:

Module 1: Full Stack Web Development: The Big Picture: Objectives and Outcomes

At the end of this lesson (#1), you will be able to:

WEEK # 1

Introduction to React

Learning Objectives

Welcome to Front-End Web Development with React 10m

PDFs of Presentations

00-Course-Overview.pdf

00-How to Learn.pdf

React Resources

Coursera Resources

How to Use the Learning Resources 10m

Module 2: What is Full-Stack Web Development?

Objectives and Outcomes

At the end of this lesson, you will be able to:

Full Stack Web Development: Additional Resources

Exercise: Setting up Git

Useful Links

Module 3: Setting up Your Development Environment: Git and Node: Objectives and Outcomes

Setting up your Development Environment

Software Requirements

Exercise (Video): Setting up Git

Exercise (Instructions): Setting up Git

Objectives and Outcomes

Downloading and Installing Git

Some Global Configuration for Git

Exercise (Video): Basic Git Commands

Conclusions

Exercise (Instructions): Basic Git Commands

Objectives and Outcomes

Basic Git Commands

Checking your Git repository status

Checking out a file from an earlier commit

Resetting the Git repository

Conclusions

Exercise (Video): Online Git Repositories

Exercise (Instructions): Online Git Repositories

Objectives and Outcomes

Setting up an Online Git repository

Set the local Git repository to set its remote origin

Pushing your commits to the online repository

Cloning an online repository

Conclusions

Module 4: Node.js and NPM

Exercise (Video): Setting up Node.js and NPM

Exercise (Instructions): Setting up Node.js and NPM

Objectives and Outcomes

Installing Node

Verifying the Node Installation

Conclusions

Exercise (Video): Basics of Node.js and NPM

Exercise (Instructions): Basics of Node.js and NPM

Objectives and Outcomes

Initializing package.json

Installing an NPM Module

Setting up .gitignore

Conclusions

Setting up your Development Environment: Git and Node: Additional Resources

PDFs of Presentations

Additional Resources (Git)

Additional Resources (Node.js and NPM)

Module 4: Introduction to React: Objectives and Outcomes

Front-end JavaScript Frameworks and Libraries Overview