I Got ADDICTED To REACT JS!!!!

Introduction:

First of all, I just want to shout out the Clever Programmer Team!! In particular: Qazi, Sonny and Naz. Since June, they've been putting lots of amazing, free, live builds on their YouTube channel which helps to build up a portfolio of projects. Be sure to check them out!


For those who don't know, REACT JS was created by Facebook and the main benefits include reusable components and the fact that it 'reacts' to changes, without the need to refresh.





Initial Reluctance:

So here I'm just going to leave reasons which put me off doing the REACT builds:


Initially, I thought these live builds would be a waste of time because essentially, they are just tutorials (similar to online courses, find my thoughts on them here!) and that meant that I wouldn't actually learn a lot from them.


The CP team operate in the USA meaning the time zone was adverse for me. This made it difficult to stay up late, watching live streams. Concentration was also an issue because of the late time.


These builds had limited functionality and the use of FireBase meant that there was no proper backend with complex queries. The lack of functionality put me off because I like to see interactive projects with lots of features.




Obsession (Projects Built):

Eventually, I started to do some of the builds. To date I have done 3 and these were the TODO APP; the Facebook Messenger Clone and the YouTube clone and I'll get into these below:


TODO APP:

Available at: https://compandcodetodocpf.web.app/

This build was very simple, the analogy I always use is that a 'TODO APP' project is equivalent to 'Hello World' projects!!! I changed the design a little bit, added the CompAndCode branding (admittedly the design isn't amazing). It has full CRUD functionality and uses the Firestore database and FireBase hosting.


Instagram Clone:

Allows users to signup with their email and login (full authentication). Uses FireStore database which allows CRUD functionality for posting. I used some of CompAndCode's Instagram posts on there. Admittedly this one wasn't as successful because it has one error relating to the function where posts are uploaded. Another nice feature is the Instagram Embed. Progressions of this are similar to the Facebook Messenger Clone.


Facebook Messenger Clone:

Available at https://compandcodemessengerclone.web.app/

Allows users to enter their name, post text messages. I took this further by making messages appear at the bottom rather than the top. I also added CompAndCode branding and again used the FireStore database. To take this further, I could add authentication and allow image uploads (different media for that matter).


YouTube Clone:

Available at https://compandcodeclone-d8826.web.app/ (also a screenshot below).

Out of all the React project's I've made so far, this one has the best aesthetics. Use of props, useState, React Hooks, Firebase and more, it's the best front-end project I've made, to date.




Realising the Power of React:


Once I got onto the more complex projects, using features like 'Component based Design' and 'UseState'/'UseEffect' really helped me to realise the power of React.


This meant that even though I was following 'tutorial builds' , that didn't matter because I was still getting a project for my portfolio, out of it. I was still learning practical skills!!!


The time-zone wasn't an issue because the videos were available later and some of the builds on offer were more than worth the long hours of work!!


The limited functionality didn't matter because I was still building good looking clones. The back end functionality could be things that I choose to extend the project!!


Overall the positives outweigh the negatives!!