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!




Comments

  1. yachiraceyMarch 4, 2022 at 9:02 AM

    Casinos Near Me - DRMCD
    Find a 용인 출장샵 casino near you now and get up 울산광역 출장샵 to 25 Free Spins No 청주 출장샵 Deposit. With this 안양 출장샵 site you can find everything you need for great entertainment, 논산 출장안마 dining and

    ReplyDelete

Post a Comment

Popular posts from this blog

Github and Godaddy domain

-
Image
Today is the day I finally decided to learn the inevitable - Github! A brand new world to be honest. It was intimidating to dive into Godaddy domain settings and Github terminology: "commit", "repository", "pull request" etc. For a newbie, it goes to the dark lands of backend. But combining some resources I actually managed my Godaddy domain anzudev.com  to be hosted by Github on the background, via this repository:  https://github.com/anzuj/anzuj.github.io . So, for the first time in my life, my own HTML+CSS is live with a custom domain. For this day at least, I am the queen. (I'm rejoicing in small things, okay?) Here are the 2 resources that helped me get there: This Youtube video explaining how to set up Github pages This article explaining how to tweak Godaddy settings (in the above video there are namecheap.com settings) I did not use the Git terminal for this, but Windows Powershell. For anyone following (I also commented this
Read more

Technical task continues!

-
Image
I've been elbow deep in a recently assigned technical task and I may see the light in the end of the tunnel here! I reached out to a friend (Per, if you're reading this:  ♡ ), and he was a really great teacher, guiding me how to achieve what I wanted without explicitly copy pasting me the solution. Here's what we achieved by the end of the day. See the Pen Tabulator project by Anzelika ( @anzuj ) on CodePen . UPSIDE: All the dictionaries now dynamically load upon page load, fetching the data from a nested array of all dictionaries! DOWNSIDE: Had to revamp the "add new pair" function I made for a single dictionary before, so that a form of 2 fields and a submit button would be generated for each and single dictionary within the loop. The above codepen solution works, but it is a bit lengthy, so I went back to the drawing board and tried out Tabulator's native "add row" method to reduce the amount of code. The results are pretty specta
Read more

My portfolio creation

-
Image
The time has come! To craft my very own site, my gem, my business card to the Front End world, my creative baby! *jumps around excitedly* I knew that I wanted my own site to incorporate all of this: animated backdrop of particles I fell in love with a few weeks ago (Github here ) mobile responsiveness dark backdrop and light text smooth animations for changing sections no CSS framework (Bootstrap/Semantics) to practice positioning the whole site from scratch one pager with a toggle menu to follow the contemporary trends fresh feel, big clear elements When browsing for inspiration I found  this  tutorial that pretty much covered all the above. It also involves practicing all of this: vanilla CSS, positioning all elements by yourself via flexbox. Good chance to practice the basic understanding of how positioning and display attributes work jQuery. Toggle menu and animations are supported by jQuery, allowing me to familiarise  myself with that syntax and techniques m
Read more