Скачать или смотреть Editing a list of contacts (part 1)

In this lesson we'll start working on a simple application for editing a list of contacts.

End of lesson sandbox: https://codesandbox.io/s/21nwkro1vp

Transcript:

Hello, In this lesson we'll start working on a simple application for editing a list of contacts.

I'll start by forking the Calmm Starter application on CodeSandbox.

A contact has a name and a phone number.

The Contact component gets the state of a contact as an argument.

It then passes the state of the name to a TextInput component.

And the same goes for the state of the phone number.

We can now edit the contact through the UI.

The TextInput component is just a single function from the state of the input to the UI, including not just the visual elements of the UI, but also the actions that the user can invoke.

It is important to understand that the `value` parameter is not just a plain value. It is an observable, first-class object called an atom.

The TextInput component itself is stateless. This is also why we can so easily use the TextInput component on both the name and phone number of a contact.

We can understand the whole TextInput component simply by looking at the function.

The same applies to the Contact component. It is just a single function from the state of a contact to the UI.

The Contact component decomposes the contact state by creating views of the name and the phone number substates of the contact state.

This concludes the lesson. Thank you for listening!