-
What’s new here? What do you understand is happening functionally?
- Now the interface is more functional, and when you click on the button it actually activates an event. For example, when you click on the COMPOSE button, it opens the editor window, and when hit SEND, the data inputed is printed on the page. The interesting thing here is that even when the tags are independent, a function stated in one tag can be referenced and called from another tag, as long as they have a parent-child relationship.
-
How is component based thinking working?
- In this case it is clear how components are hierarchically organized and how they are related. Therefore, even when we can think of components as independent elements, they can be interrelated: some tags can contain other tags; functions called in a child tag (e.g.
parent.closeEditor
) can be defined in the parent tag; data inputted in a child tag can be printed in a sibling tag (e.g.mail-item tag
).
- In this case it is clear how components are hierarchically organized and how they are related. Therefore, even when we can think of components as independent elements, they can be interrelated: some tags can contain other tags; functions called in a child tag (e.g.
-
How is Compose represented in a data state?
- COMPOSE is presented in a false state, which means that the
mail-editor
tag will not appear until the user hits the COMPOSE button. This activates a function that toggles change the state from false to true.
- COMPOSE is presented in a false state, which means that the
-
How might you build out the functionality or change in state?
- Just by changing the variable state and setting it to true. In tis case we have the conditional that says that
if={editor}
is true then the tag should show. But because the editor variable was initialized as false, it is not until the user hits the COMPOSE button,that the toggle function changes the value to true, therefore, making themail-editor
tag visile to the user.
- Just by changing the variable state and setting it to true. In tis case we have the conditional that says that
-
What is the state of the button initially? Why do you think that is?
- The state of the button is true. It has to be true so the user knows what to do. In terms of user experience, the button indicates that when hit, something is going to change in the DOM. The button indicates interactivity to the user. Therefore is a cue that is needed. In its absence (if it was in a false state), the user wouldn't know what to do.
-
Why are we using the parent property here?
- Through the parent property we are calling the function defined in the parent tag. If we don't include the parent property, nothing happens.
-
Why is the closeEditor function in a different tag file?
- Because it is changing the state of the
mail-editor
tag bak to false, and is using one of the variables defined in the parent tag.
- Because it is changing the state of the
-
Where is the function called from? How are we wiring different components together?
- It is call from the button in the child tag.
-
How are we sending data from the smaller component (editor) to the larger mail app?
- The larger mail tag contains the other 2 tags: mail-editor and mail-list. Because we are pushing the data inputed by the user to the array of objects
emailList
, this array is being updated with the user's input. Likewise, themail-list
was defined with aeach
RIOT loop that prints every object in the array, included those inputed by the user.
- The larger mail tag contains the other 2 tags: mail-editor and mail-list. Because we are pushing the data inputed by the user to the array of objects
-
How is riot’s way of getting specific references to elements different from regular JS?
This
is the main form used. By referencingthis
, we are pointing to the current tag when console.logged globally or to a specific function, for example, when console.logged inside the particular function.
-
How is the mail app component updating when the email is sent? Talk about it in terms of changes in state.
- When the email is sent, there is a function called that is in charge of pushing that data into the array of object defined in the parent tag. And the closeEditor function is also called from inside that same function. Like it was stated before, the close function changes the state of the
mail-editor
tag from true to false, so the editor hides again.
- When the email is sent, there is a function called that is in charge of pushing that data into the array of object defined in the parent tag. And the closeEditor function is also called from inside that same function. Like it was stated before, the close function changes the state of the
riot-gmail's Introduction
riot-gmail's People
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.