Assignment 3: React Forms and Redux

Loading...

来自 The Hong Kong University of Science and Technology 的课程

Front-End Web Development with React

46 个评分

The Hong Kong University of Science and Technology

Front-End Web Development with React

46 个评分

课程 2（共 4 门，Specialization Full-Stack Web Development with React）

This course explores Javascript based front-end application development, and in particular the React library (Currently Ver. 16.3). This course will use JavaScript ES6 for developing React application. You will also get an introduction to the use of Reactstrap for Bootstrap 4-based responsive UI design. You will be introduced to various aspects of React components. You will learn about React router and its use in developing single-page applications. You will also learn about designing controlled forms. You will be introduced to the Flux architecture and Redux. You will explore various aspects of Redux and use it to develop React-Redux powered applications. You will then learn to use Fetch for client-server communication and the use of REST API on the server side. A quick tour through React animation support and testing rounds off the course. You must have preferably completed the previous course in the specialization on Bootstrap 4, or have a working knowledge of Bootstrap 4 to be able to navigate this course. Also a good working knowledge of JavaScript, especially ES 5 is strongly recommended. At the end of this course you will: - Be familiar with client-side Javascript application development and the React library - Be able to implement single page applications in React - Be able to use various React features including components and forms - Be able to implement a functional front-end web application using React - Be able to use Reactstrap for designing responsive React applications - Be able to use Redux to design the architecture for a React-Redux application

从本节课中

React Forms, Flow Architecture and Introduction to Redux

In this module you will be introduced to uncontrolled and controlled forms and briefly examine form validation in React applications. You will get an overview of the Flux architecture and introduced to Redux as a way of realizing the flux architecture

Assignment 3: React Forms and Redux5:27

与讲师见面

Jogesh K. Muppala
Associate Professor
Department of Computer Science and Engineering

It's time for the third assignment in this course.

In this module, we examined redux force.

We saw both controlled forms and uncontrolled forms.

Then you had a brief introduction to redux and then we looked at

react-redux forms as a way of creating forms in our React application.

In this assignment, we will explore forms in a little more detail.

There are three tasks in this assignment.

Let's look at the details next.

When you go to the application in the browser and then go to

that menu and then select any specific dish,

now within the dish,

right below the comments,

you will see this new button being added.

Now, this would be part of a new component called as

the comment form component that you will add to the dishdetailcomponent.js file.

This comment form component will be used in the render comments

function component that you have implemented in the dishdetailcomponent.js file,

and when included, will add this button into the field there.

Now, when this button is clicked,

this will pop up in model containing the form for our component.

So, creating this comment form component and

then adding it into our application is the first task in this assignment.

In the second task, as a said,

when you click on that Submit Comment button,

you would have the comment form pop up in the model as shown here.

Now, constructing this form would be the second task of your assignment.

So, in this form,

you will find three items there.

The first one is a rating field which we use the select to create the rating field here.

So, you will have the choice between one and five for giving the rating.

So, you will use that select for creating that.

The next one will be a text field where you type in the name here,

and then the third part would be a text area field with the label comment.

The text area field here itself contains six rows that allows

you to type in the comment about the dish here.

Then of course, a button called Submit which,

when clicked, will submit that comment.

So, you need to implement all of these,

support for this in your comment form component there.

This is the view of the comment form component.

So, you're making use of a button there which,

when clicked, will pop up this model,

and inside the model,

you're displaying the form as shown here.

Then the third task in your assignment would be to add form validation.

In this case, the only form validation that you need to add is to the author name here.

So, the author name as you'll see would contain at least,

so if you don't type anything in there in the author name,

and then you would immediately notice that an error message pops up saying,

"Must be greater than two characters."

So, as you type in,

the name disappears,

and as you see,

once you exceed 15 characters,

then the error message pops up that it must be 15 characters or less.

So, that's the form validation that you need to do for this author field in your form.

So, that will be the third task in your assignment.

Now, when you fill in that form,

so let's select a rating of three,

and then I'll type in

a more meaningful name there,

and then submit, then of course,

you have the handle submit function that is implemented in

the comment form component which will show this comment in an alert box as shown here,

and also will print this out into the console lock.

So, in the alert box,

you'll see the three fields being shown here: the author,

the rating, and the comment field been shown here.

When you click on the OK,

both the comment form and the alert box are both dismissed.

So, that complete the third task in this assignment.

So, three tasks to complete in this assignment as shown here.

After you complete the three tasks of your assignment,

do a Git commit with the message, assignment three solution.

探索我们的目录

免费加入并获得个性化推荐、更新和优惠。

Coursera 致力于普及全世界最好的教育，它与全球一流大学和机构合作提供在线课程。

© 2018 Coursera Inc. 保留所有权利。

通过 App Store 下载

通过 Google Play 获取