When I first started to learn ReactJS, state and props did my head in. I was learning mounds in a short time. Too short for a visual learner who likes to see the connections. I need time between lecture and homework to do my doodles. I did get it, though, and I learned to love React. I still do, but it is something that fades if I do not keep it up.
After too much time had gone by, I felt insecure with my understanding of state, so I revisited ReactJS with React for Beginners by Wes Bos. My instructors at The Iron Yard were clear and (ERMAHGERD) patient, but they were teaching live, so I could not stop them whenever I wanted, rewind what they said exactly, pause, repeat until I made sure my notes were clear to me. Sure, I could have recorded them myself, but what we see online has been scripted and edited. I want to repeat and review edited lectures. Online tutorials solve that problem for me. I sure miss my instructors helping me via conversation, though. I don’t get that in a tutorial. There are pros and cons to both. Apples and oranges, to use a cliché.
After many viewings of the section on state (clip 13), I was ready to write it out for reference. Although colouful, I crammed too much on a small piece of paper. By the time I realised it, it was too late to plan for scissors and tape. No big deal. The more I do this, the more it sets in.
Solution: make state big and colourful like a jacked unicorn at a Skittles factory.
Step 1: Write the finished code in a bluhblah colour. No offense to navy blue. Optional step 1b is to make it look like real screens. If you do step 1b, then it’s mandatory that you do step 1c: quit stalling by colouring.
Step 2: Get comfy with your lap desk, relegate laptop to your shins, have a sentient being who thinks you hang the moon in case you need the ego boost.
Step 3: Go to town with colours, arrow, and notes. Know how you learn and learn that way. I kept my numbers in one colour but used other colours to separate my notes by theme or topic. I highlighted or underlined my code as needed. I gave all of zero rat arses for whether this makes sense to anyone but myself. My brain; my rules.
Et voilà! I glued and taped the sheets together and used tape to reinforce the edges. I am keeping The State Scroll forever!
Yo, VIP, let’s get it!State state baby
State state babyAll right stop
Colour-code and listenState’s not bad but I need intervention.
Something’s off; my notes are unsightly
Then I code like a zombie daily and nightly.Will I get it?
Yo, I don’t know
Turn off the rules and I’ll flow.To the extreme, I colour and I doodle
Fill up a page and scribble from my noodle.DanceBum numb. Sittin on cushion.
The bigger the state the sweeter the pushin’.
Deadly, when my app gets stately,
So anyway I learn improves it greatly.Colour and draw it
This is my own way
I better git push now
Don’t got all day.React’s state was my problem
So I solved it.
Check out my notes while my colors resolve it:State state baby. React. Jay. Ess.State state baby. React. Jay. Ess.State state baby. React. Jay. Ess.State state baby. React. Jay. Ess.Now let’s make an AddForm componentRender return and put a form on it.
Adding refs makes my form breathtaking
They hook up inputs to the object I’m making.Refs takes in (input) and then fat arrowthis dot name is input, straight n narrow.And I make an object with this info:like name colon *this* dot name dot value.Object is in this form, you know
But it’s not in state, so my App don’t knowBuild a constructor()and quick call super()Why do that?!Because you need *this*!Keep on coding to the next step:*this* dot ‘n’ state and I’m building me an object.That state was bare.Yo so I continued to create one much-needed method.I update state, spread a copy in a new state,but it’s not yet there so I update with a setState.Jealous of this method of mine?When I started out it was barely more than slime.Ready for this method and kiss.
Constructor’s acting chill because it’s got bind(this)!Now props, like a wave they’re swellThey send stuff to state, like a bat from hell.Addin’ to the child componentmake now a prop, this dot methodBumper to bumper the App file’s packed
I’m moving to the child before my mind goes slackProps on the scene
You know what I meanI use props now, between the *this* and method.React’s state was my problem
So I solved it.
Check out my notes while my colors resolve it:State state baby. React. Jay. Ess.…Too bad, I’m not a talented poet.I Googled my rhymes in case you didn’t know it.AddForm, that created this here smackdownGets *this* dot props dot method all around.‘Cause my style’s like a sewage spill
Queasy dull rhymes worse than a pneumonic drill.Constructor, props, state:
They’re a hell of a concept.I make it mine and you want to do your own.
Memories can fade, so I do what I can now.
Save like a git commit so fast
Better young devs say, “damn”
If my rhyme made you pissed.
I would take it on the lam.Keep my composure when it’s time to code live.
Mesmerised by the job and I might nosedive.React’s state was my problem,
So I solved it.
Check out my notes while my colors resolve it:State state baby. React. Jay. Ess.…
Yo Katy, let’s get out of here
Word to your developer.State state baby. No toast. No toast.State state baby. No toast. No toast.State state baby. No toast. No toast.State state baby. No toast. No toast.
Katy Cassidy 
One thought on “State the Rainbow of Fruit Colors”