A Busted Yolk and Half-baked Understandings

The third week of code school was positively medieval. My instructors dragged us around in code by our hair, like sinners through the street, asking bewildering questions and shouting “React! React!”. I was rendered a brain-battered fool.

Learning code is like being frustrated about your egg yolk breaking but the yolk is also shaped like a weird heart so you kind of like it anyway.

Just kidding, I’m not really looking for any emotional REACTions, here. Ed and Jack are very patient and can repeat stuff I don’t understand a thousand times without any ill-judgement. They rock. They are the epitome of class, essential componentsto my success, propsto them. . .now I will statemy business.

My business, in case my punny allusions elude you, is to work through my thoughts of what stateand propsare in React which is a JavaScript library used for frontend development.

state and propsare ways to move data to components. Components are JavaScript functions that result in React elements… React elements are just React elements and that’s all I know about that.

The way data moves in React is in one direction, from parent components to child components. Or like a waterfall, obeying gravity from top to bottom.. I don’t know about the nuances of that either. But these things are noted.

props is short for “properties”. They allow you to reuse code from one component in other components. A property has a parent component and can be used in subsequent components. propsare unchangeable, don’t change them. It is bad.

Example of propstransferring the string “I yam a sweet potato taco” from the Taco component to the moreTacoTime component.

1   class Taco extends Component {
2 render ( ) {
3 return (
4 <div>
5 <MoreTacoTime tacoType={’I yam a sweet potato taco’}/>
6 </div>
7 )
8 }
9 }
10
11 const Title = ({tacoType}) => {
12 return (
13 <h1>{tacoType}</h1>
14 )
15 }
16
17 //Line 5 is where the prop tacoType is passed to MoreTacoTime.
18 //MoreTacoTime is the component that is reusing tacoType.
19 //Below, on line 24 the class MoreTacoTime references tacoType
20 //with {this.props.tacoType} and
21 //the text “I yam a sweet potato taco” would appear in the h2
22 //tags.
23
24 class MoreTacoTime extends Component {
25 render ( ) {
26 return (
27 <div>
28 <h2>{this.props.tacoType}<h2>
29 </div>
30 )
31 }
32 }

state seems very interesting and delightfully dynamic. stateis similar to propsbut can handle ever-changing data. It seems like you establish a stateobject first, as something of a template, and then create a setStateobject which handles new data. setStatemakes a new instance of state. setStateexists because “They” say you should not manipulate the stateobject directly. That is bad.

Here is an example from class where the addAnimalfunction uses setStateto receive new animal qualities:

Thanks for witnessing my half-baked viewpoint. Ciao.