Master React, Quick Code tutorial. Part 5

[atherdon]

https://medium.com/quick-code/lets-learn-react-chapter-5-component-state-f9eccc8df2cf https://reactjs.org/docs/state-and-lifecycle.html

Expected result

• [x] Read this tutorial chapter
• [x] follow code steps
• [x] move your code to this repository(at least one commit per day)
• [x] explain to me, what did you learn from it in a few sentences(not less than 5)
• [x] pass the test section
• [x] after reviewing your progress and closing this issue - you can move to the next chapter.

as this chapter is more about understanding details - there no a coding test section

Question

what do you think, after reading this chapter - is state will replicate partially a work of jquery things? i mean will state reduce amount of jquery work?

[chefigueroa-rodriguez]

What I learned from the chapter: In this chapter we talked about the component state. We added a text input and a button. We configured our button to dynamically update our state when the button is clicked. Also, to iterate through our array we had to install lodash. There were 2 important lines of code:

1. renderMeals() { return _.map(this.state.meals, meal =>
2. {meal}
); }

This function will return a new < li > element with the meal, for each meal

2. <input onChange={e => this.setState({meal: e.target.value})} value={this.state.meal} type="text" /> <button onClick={() => this.setState({meals: [...this.state.meals, this.state.meal]})}>

Right here input will add the new inputted meal to the state, and this event is triggered the the onClick.

I am loving how we can make the web page act dynamically. Not only does it reduce the need for JQuery, but I sense(I might be wrong) that using state might eliminate the use of JQuery in our React app. Cool Stuff.

[atherdon]

Ohh, i just wanted to tell you, at prev task, that you should install underscore or loadash, because they make basic operations with arrays/objects more comfortable.

---

yep, this is why i love in React. it's not overcomplicating things. it's really the easiest way to start to learn nodejs, react, oop js and es6 features like fat arrows. I hope soon react free component base will grow more and all old jquery plugins just became a history. But 5-7 years ago - jquery was a king. But stuff like validations, sliders, responsiveness can be done in much clearer ways.