Day 1 with ReactJS (My 30 days of ReactJS, perhaps…)

The JavaScript ecosystem is pretty strong and am glad I am becoming a part of it (am elated), In fact, what more do you want from a language than being able to write a Frontend application and a Backend without massive change to your programming language, like one article once quoted “Lingo Franca on the whole stack!”, I couldn’t agree more.

A bit of background though, am the guy that learnt a framework first before diving into the language, I wouldn’t recommend it, I dived into Node.JS and enjoyed it, that’s when I realised that I did lack some important JS concepts.

“A man who knows when to stop and retrace his steps is not lost.” — Unknown.

Fast forward, I have relearnt JS, shouldn’t have considered what Mr Oppong taught us to be enough, that was actually just form validation with JS (since I didn’t enjoy programming much then I didn't bother to read further and assumed that was all JS was for)

Now let’s dive into a summary of my Day One.

I downloaded Brad Traversy’s Crash Course from 2019 (didn’t know there was a 2020 version) and quickly noticed how dated it was, things move really quickly in JS indeed, the File Structure in his app was way different from the one I got from running this cmd:

npx create-react-app todo-app //that's how you create a new React boilerplate from terminal

A few minutes into the course, I realised how familiar React was to me and here’s why:

Most tutors or docs aren’t playing when they list these core concepts as “must know” before diving into React:

Classes

Destructuring

High Order Array Methods

Arrow Functions

Fetch API and Promises

The above are all concepts that will be very handy in ReactJS.

Classes: The entire structure of the React Application looked like certain JS implementations I had seen before. It’s beneficial to learn OOP in JS before venturing into React, and build apps, some good ones.

Destructuring : Array and Object Destructuring as far as I can remember it is a way to decompose an object and access it’s individual values easily.

High Order Array Methods: These are indispensable array altering operations in JS, from forEach to, filter to map etc, you can’t do complex operations without these.

Arrow functions: ES6 arrow methods feel like syntactic sugar but are a very modern way of writing functions in JS, that’s all I can say for now as I haven’t fully experienced them in React yet.

Observations:

You shouldn’t jump into React no matter how dreamy blogs have made it look, without having gone through, HTML => CSS => JS.

React to me is the culmination of all these technologies to the development of complex UI interfaces from a component viewpoint.

It’s time for me to get into Day 2, wish me luck.

Thanks for reading.