Defeating the fear of the terminal with React!

Today is the day I did it! I opened the ever-feared terminal in my VS code. The final push was looking at React/Angular videos and seeing that following the project all required terminal commands. Since package management is elementary knowledge in this field, I decided I could no longer avoid getting comfortable with it.

Aaand of course nothing went smoothly from the beginning. As soon as I tried to create a new file with touch index.html, this happened:

Luckily my awesome Facebook coding community quickly came to rescue and pointed out that Window's native terminal "does not speak that lingo". So I had to switch to Git Bash terminal instead, which knows how to touch things. He. He. He.

I dove into a React video next, but as if doomed, another problem showed within the first minutes. I was able to install react by: npx create-react-app, but when doing npm start, another error popped up *sigh*

A bit discouraging to say the least, just wanting to learn a new concept and falling into one error after another which the tutorial tutor does not have. So back to the drawing board I went, and googled some more. Most information was outdated (2017-2018), telling me to change package.json scripts to manually launch the js file by adding:  "start": "node index.js". In my case however, that section already existed and looked different:  "start": "react-scripts start"  so I the react-set up is probably cross referencing some other scripts. Felt weird to hardcode it. Freshest article I could find recommended just un-installing global package (npm uninstall -g create-react-app)  and reinstalling it. I don't know why (since I installed it for the first time today!), but it helped! Hoping it will be the last of the weird errors and I can actually jump into the code and syntax :)

WE ARE READY!

Here is a stream of thoughts from learning React:

• Oh neat, live preview!
• So... I can have divs in my functions? Wow
• "The actual HTML file itself is empty. React takes care of creating elements for us, and renders them on the screen, in the "root" div"
• I can finally start using the verb "compiling"! It's always been one of them "super high-end terms" for me :D
• Putting onClick in "html" (okay, or in jsx) takes some getting used to. In other courses inline attributes have always been frowned upon, but apparently in React this is the way!

During this video we mimicked an API call and displayed a selection of tweets from different users. It's definitely a new way of doing things and useState is a bit of a mystery, but I am definitely starting to see the benefit of doing things this way

Here is the result of my tiny tweet display via React!