Gimme some state, shugga.

Eleven months ago, I was in love with ReactJS. I quit working with it when I felt that I needed to review material I didn’t understand as much. That led to forgetting a lot of React. I forgot the details, not the gist. I have returned following a tutorial that’s done in a way that is best for my style of learning: many smaller clips and not one chunk. It’s easy to watch and move on with topics I remember but revisit ones that are rustier to me.

Yesterday and today, I reviewed state and loading state into JSX. Watch watch watch. Take a lot of pretty notes. Apply it to my own. It is not in my head if I’m just coding along. I know I get it when I apply it to my own app.

When I saw this, I kissed my screen:

Screen Shot 2017-04-20 at 9.09.54 PM

Man. I love React!

State the Rainbow of Fruit Colors

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.

beforenotes
Problem: State on one wee page

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.

codedone
Code done: 1 page per js file

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.

armedandready
Getting read: Tutorial and Audience

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.

addfishform
Page 1: AddFishForm.js
app
Page 2: App.js
inventory
Page 3: Inventory.js

Et voilà! I glued and taped the sheets together and used tape to reinforce the edges. I am keeping The State Scroll forever!

afternotes
Final: State all gussied up
 While I was doing this, I got Vanilla Ice stuck in my head (you may have guessed from the start) and had “State state, baby” in my head for a few days. There is really only one way to get it out of my head. This is horrible, but it’s therapy:
Yo, VIP, let’s get it!
State state baby
State state baby
All right stop
Colour-code and listen
State’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.
Dance
Bum 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 component

Render 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 arrow
this 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 know
Build 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 swell
They send stuff to state, like a bat from hell.
Addin’ to the child component
make now a prop, this dot method
Bumper to bumper the App file’s packed
I’m moving to the child before my mind goes slack
Props on the scene
You know what I mean
I 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 smackdown
Gets *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.

Stuck.

I’ve done all the pictures for my ReactJS app except the one that supports the radio button group for the question about my pets. I can’t think of a movie that supports it. I’m thinking Pee Wee’s Big Adventure and the pet store fire scene, but I’m not in love with it. I am not sure everyone will know the scene.

Until then I have a gap.

Screen Shot 2017-04-17 at 9.43.38 PM

I’ve also learned a lesson about doodling and saving. My first go was just to play with Sketch App. In doing so, I built the scene from Jaws. I did not save it. I put it on Instagram and moved on. I cannot find the original, so when I export it by svg, one part fades. Maybe this isn’t something I can’t fix, but I can’t fix for now.

lernin hurtz.

I over re-React-ed

A while back, I started this little trip planning app for me: Unscrambled. With my dad diagnosed with acute myeloid leukemia, I was heading to Dallas a lot. I’d always forget something. This was for me in two ways: it solved one of my own problems, and I needed to practice ReactJS. I built it with Webpack. Or started to. I let it go when I got stuck. I wanted to deal with it in React Meet-ups, but not all Meet-ups are equal (the Dallas ReactJS group is stellar). I was also chicken as a junior developer to ask the well seasoned (“Hi. *picks nose* My name is Katy and I like kitties and doggies and sunshine and coding and I maked dis app will you look at it I also eat paste.”). I felt naked and naive, and not in the sexy ingenue portrayed by a dewy French actor sort of way.

Then my stepsister died.

Then my dad died.

I did not want to stop or abandon the project, but I could not concentrate. I can now. Of course, I still miss them, but now I think “Oh, they’d love this” when I design or build. I’m good. I’m sad; I miss them, but I am good.

What was not good was the app. I also wanted to try the Create React App tool so I could avoid the builds. If I let too much time go, I just forget the process: npm do this, cd into this npm do that to build then cd out to save to GitHub. Schtaaahp. I build an app with Webpack and Perk framework before (Critter Sitter) and was happy with it. I just have a simpler app to build. I have no backend. I have a set list of places I stay in Dallas and my packing list is set. Could I build a component to add to my packing list? Sure. But by now, I have that list down. It’s checking it off that matters. Should I want to add a component called AddItem, I will deal with it later.

Version 1 was not even complete when I opted to move it over. I have been following Wes Bos’s React for Beginners (aka Notorious RFB), coding along, then practicing my own in parallel: Teacher show, Katy copy, Katy do her own. It works for me. Next thing I know, it’s late. I’m still excited, but I’m fading physically. I should have gone to bed, but—no—I was going to move it all over when my brain and body were cooked. (Jeenyiss) My old format is not in the same style as Create React App. Of course, it isn’t. I should have taken the time to move one at a time. It’d be like starting over, but the components are already thought out and built. But no. I moved everything over. Not one thing was horrible, but there were many little things that need changing: paths, ES6, …
I am using this:
class SteveBuscemiIsMyMan extends React.Component {render: function(){yada yada yada}}
export default SteveBuscemiIsMyMan;
when before I had this:
export default React.createClass({render: function(){yada yada yada})}

Which brings us to this entertainment center that I use as a bookshelfstoragething. When I got it, I move all my things into and on to it in a day. I didn’t take the time to have a little crowding in order to put the books in the order I want them to and the craft boxes and bags where I want them to be and the knickknacks where they should be. I have had this mess for a long time. I now do a section at a time when I have the time, but looking back, I should have taken the time to slow down and just do it piecemeal.

What I did last night was similar: I over React-ed. Over re-React-ed, really, but that sounds too much like ovary acted.

a messy bookshelf
The gap is for the iMac that’s in the hospital. Fibre crafts, books, computers are my interests. Clearly not television.

I went to bed frustrated and tweeted about it. My frustration, however, was with me. I’ve posted enough about being an adult with ADHD. I won’t go into it, but this is sort of typical. The good news is that I can sit back and plan. Before I went to bed, I started over (again) and did not let my excitement get in the way. I slowed down. I read more (I read before but in the OHMYGODIAMSOEXCITEDTODOTHIS mindset). I moved one component over at a time and dealt with the styling. I’m not done, but I have a plan. I feel guilty tweeting that I found this frustrating. I was not clear. I was the one who was frustrating as well as frustrated. Create React App is a good thing. It’s easy. It’s there for me. It still expects me to calm t.f. down before I start though. They never mention that in the README file.

Going back that second time

Going back to camp after your first spectacular time will disappoint. I never went to the same overnight camp. Not a camp person. I enjoy camping, but surrounding myself with people who cheerfully sing bad songs, make popsicle-stick art, and swim/pee in a junky lake was never my idea of heaven. For me, the woods should be quiet. I get it, though. We can look at camp as a metaphor. You can have this great time at camp, on your junior year abroad, at a destination reunion, and when you sign up for a repeat, you expect the same emotions and unfairly compare the two experiences.

We do it all of the time. No other hyperspace will feel like the one I saw in Star Wars: a new hope. I’m sure some of the jumps into hyperspace have been better, but they lack the holy-moly of my first time.

Going back to my “final” project is giving me the same anxiety. I am not completely done. Done enough for Demo Day, but not done enough for me. I loved my project. It introduced me to ReactJS and allowed me to fully explore and play with it. So what happened? Like the grimey middle schoolers at Camp Crawdaddy, I packed up my things to go home and pick up my summer reading list for the next grade. I put away my project to revisit vanilla JavaScript, jQuery, and AJAX. I made time to learn new things (Canvas, jQueryUI) and play with various APIs.

I need to return to my project, but I’m scared. What if I don’t have as much fun? The thrill of prepping for Demo Day at The Iron Yard is gone. There’s no stress of getting it all done in time. I have no schedule. I also have no cohort friends next to me to start each day with a stand-up. Slack isn’t the same as being in one space and hearing our f-bombs and huzzahs.

And what if I don’t like it anymore?

I stare at it the way my flat-chested, pimple-faced self stared at the cute boys at the bar and bat mitzvah dances. I’m too scared to approach my project. What if it wants to make out behind the bleachers? I’M NOT READY! And without my peers, there’s no pressure. Dang it!

Is it too much to ask that my final project wait for me outside of a church in a red sports car (ok, Aprillia with an extra helmet) and have a cake ready for me?

jakeryanreact

 

 

Prop the doors of this.mentalState.institution. Katy’s checking in.

I get it! Finally. I knew it would come once I could go old school with quill and parchment. In class I am typing as fast as I can, trying to break old habits with semicolons, colons, commas, and all the bracket types. I am one who uses the semicolon when writing; however, I have to change my silly ways now. 

Must. Adjust. Without. Fuss.

My point is, in class I am typing like a beast, making typos, losing track of the closing brackets, using a comma when a semicolon is needed, etc. To catch up, I miss out on some of what is being taught. “Just make the feckin’ code work, dammit!” If I can’t see the result on my computer, I can’t understand what I am doing. I do not give myself time to pause and think. 

Let’s get down and funky with metacognition: I’m a visual learner. I’m also part cat, so I can’t really enjoy something until I play with it, bat it around, spit it out on my instructor’s desk and wait to be scratched behind the ears. Again, two things: visual, playing (sometimes called doing, but playing is more fun). 

After the code in class works, and I know that it’s worthy of bronzing, I like to rewrite it by hand slowly. I’m a sloppy writer, so if I am going to refer back to this, I must write slowly. I keep these in a book I call “days after”, which are neater notes days after the information was presented. See? “Days after”? How am I not in advertising?! (Where is my interrobang?)

image

I have a few pages of code like you see above. It’s easier for me to flip pages than swipe through screens. I keep the screens for looking up things, but I do love me some reference books that I can touch and feel. I can touch where this.state is on one page and find the matching component on another and see them both when I bunch the pages together. 

But it’s not just the code in class and the class lecture. I like to read about what I’ve learned after I’ve had a few days to settle. Unfortunately, this is so time consuming that I never get to tackle the adventure or epic modes of my homework. Meh. I’m okay with that. If it means that I know something better, I’ll take it. I have the rest of my life to return to previous assignments and do them up drag-queen fabulous. 

When something really bothers me, I have to do it again. Props and State. They were always so close in my head. I almost got them. I understood them when I heard people talking about them, but I lost track of the all the this.state.props.setState.mentalState. Honestly. Just call them kiddieThings and parentalControlIssues. That I understand. And—egads—let me color, circle, and draw arrows. 

I cannot stop the class and as them to wait as I arrange things the way I can see them, so I stay up late and find examples online, look back over my class notes and get more examples. The phollowing photos are in my DIMyself reference book where I can refer back by topic. It’s much easier than trying to remember what day I learned what topic. 

I walked through this tutorial with crayons and a cat on my lap:

image
image

Could I lead a lesson on it? No, get serious. But I could play around with React on my own without wearing a path to my instructors’ desks, and—even better—I might even be able to be helpful to someone else.