create account

How I started learning React Js: The Journey by marvel1206

View this thread on: hive.blogpeakd.comecency.com
· @marvel1206 ·
$17.96
How I started learning React Js: The Journey
https://cdn.pixabay.com/photo/2019/07/16/18/18/frontend-4342425_1280.png
<center><sup>**[source](https://cdn.pixabay.com/photo/2019/07/16/18/18/frontend-4342425_1280.png)**</sup>
</center>
I knew nothing about programming - The year was 2018. I literally had no idea but I was curious as to how everything works. In that same year, I was admitted to study Computer Science (BSc) so I eventually started the learning process.

I did not start with HTML and CSS like everyone else, it was QBASIC, a structured programming language which exposed me to the basics like *IF, ELSE, THEN,FOR* E.t.c. It was quite exciting for me because I had started learning what hitherto felt like rocket science. I made a mini project that could determine result and CGPA and it was quite fun.



Moving to JavaScript, we started writing codes to solve basic and some complex Math problems. I felt a lot comfortable working with JavaScript because I just felt it was straightforward, well we were only just concerned with coding - not exactly programming. Writing codes to solve Math problems felt like an achievement and maybe it was because it entrenched us with the Syntax. 

Then HTML, CSS and PHP. I must confess, when I saw the first HTML structure, it felt like magic, the tags were overwhelming, putting everything together to define how a webpage looks felt all strange. I was expecting another series of Math problem solving series and I was curious as to how I could do  supply Inputs and produce Mathematical results with HTML and CSS. PHP was going to be the only way out and it has to be connected to the forms, it was a lot to take in already. I took a chill pill.

When I came back to it, my mind had settled and I had to learn how to connect the forms and produce my Mathematical results with PHP, at least that did it (Learning the PHP syntax well enough for coding).We took it a bit further, storing and retrieving results from Database and MYSQL was adopted.

After a while, I had effectively started to work with forms, creating and spitting back user data. I was neck deep in PHP and mySQL that I totally forgot to brush up my CSS skills. I created an Hostel Management system and  it actually did the job.

<sup> **An actual snippet of the 2019 code**
</sup>

```
while ($row = mysqli_fetch_array($result)) {
$firstname= $row['firstname'];
$lastname= $row['lastname'];
$gender= $row['gender'];
$lvl= $row['lvl'];
$dept= $row['dept'];
$phone= $row['phone'];
$email= $row['email'];

$course= $row['course'];
$hostel= $row['hostel'];
if ($hostel == "Exclusive") {

$definiteart = "an";
}
else {
$definiteart = "a";
}

if ($dept == "NASS") {
$college = " of Natural and Applied Sciences";
}
elseif ($dept == "CBSS") {
$college = " of Business and Social Sciences";

}
if ($gender == "Male") {
$pronoun = "He";
}
elseif($gender == "Female") {
$pronoun = "She";
}

```




The frontend, well, it looked good on my system and there was no need to test it anywhere else. It was recently that I tested it and and found out that ... . 


![IMG_20220926_153530.jpg](https://files.peakd.com/file/peakd-hive/marvel1206/23tmhWV37PhkyNcFqKfy1L9bAiQr46RysVPphqy8hMWiF9qiac6WjYnRvSfpwJZggJ6SD.jpg)

<center><sup>**Oh crap!! I didn't bother about responsiveness**</sup></center>

 I was busy with the backend of things. I also found an homepage I designed around 2020 I actually painstakingly designed it for all screens - or so I thought. I was busy making it responsive by  scaling down my browser window not through the in-browser emulator. It was a gig I got paid for but fortunately, there were some issues with the client 's company and it didn't see the light of day. Imagine if it had .. lol

I stopped my little HTML and CSS escapade and basically focused on the school curriculum which as centered around  C++(Procedural) and Java(Object Oriented Programming). (Side note: I still find OOP difficult)
I found Java challenging even though I worked really well with it but I was still not satisfied. At some point I was worked with 2d and 3d arrays (Good times)

```
import javax.swing.*;
public class weatherArray {
public static void main (String[] args) {

float wcds [][] = new float[5][4];
int count = 1;
for (int i = 0; i <5; i ++) {
wcds[i][0] = count;
count ++;

}
float sum = 0;
count=0;
for (int j = 0; j <5; j++) {
for (int m =1; m<4; m ++) {
wcds[j][m] =Float.parseFloat(JOptionPane.showInputDialog("Enter the values for Region" + wcds[j][0]));
sum += wcds[j][m];
count+=1;
}
float avg = sum/count;
System.out.println("The average values for Region " +wcds[j][0] + " is " + avg);
}

```




I thought of how to broaden my knowledge, at this point I was also deep in Crypto and I heard about solidity and how it is an OOP language. It piqued my interest. I imagined being a Blockchain Developer and thought about how it would align with my interests. At this time, I had stopped frontend development but I was willing to continue, this time not with the vanilla JavaScript but with React Js (Class based components) which felt similar to what I was doing. I got an Udemy tutorial and started practising.


It was time for my mandatory school Internship program and I got scheduled for an Interview for a company. It was a zoom interview and my Joker's display picture initially threw them off. I had applied to be a developer and I was asked to showcase my projects, I was lost because I had none. The particular interviewer who was also  a developer wasn't willing to bring me on the team even after my series of pleas for the benefit of doubt. I was, however asked if I had any other skills and I fortunately was able to show them my writings here on Hive and some Artworks. Well, that was how I was brought on to the Digital marketing team 


Okay, hold up, that was not my plan but it was better than nothing. In the verbal contract, I had the option to play the double agent half way through my internship.I intensified my React Js learning on the side while at  it and when it was time for the merge, I prepared for my first zoom meeting with my supervisor.

```
"Can I see what you have been working on?"

```


###### *With ecstasy and without hesitation, I opened my codes.*

```
"First things first, we don't do things like this anymore"

```


He ushered those words and I listened like a lost sheep. He told me it was time I switched to functional components. I had to start unlearning to relearn. I then built some little projects like calculator, Todo application and a Chat(With React Chat Engine).

```
 e.preventDefault();
    const authObject = { 'Project-ID': "*********************",  'User-Name': username, 'User-Secret': password }
    try {

       
    
       await axios.get('https://api.chatengine.io/chats', {headers: authObject});
       localStorage.setItem('username', username);
       localStorage.setItem('password', password);
       window.location.reload();

       
    }
    catch(error) {
        console.log(localStorage.getItem('username'))
       console.log( localStorage.getItem('password'))
        setError("Oops, incorrect credentials");

```


Few months later, I felt the only way to truly understand React's concepts was to build something of my own without a definite 'How-to' tutorial. My final year project was the ideal candidate and I gave it a go. It was to be packed with lots of features and I literally had no backend knowledge apart from PHP and MYSQL so I adopted Firebase instead.

The project was meant to allow the admin write extensive reviews about a company, enable students read, write and rate reviews, enable schools to read reviews, write reviews and recommend students for Internship and also Organizations to post vacancies.

This was my first feel with a non-relational database, it was different from what I had known with MYSQL tables, data here were just being stored as objects with different custom properties at will. I spent most of the time thinking about how to go about implementing the features rather than actually doing them.

I faced some challenges with this project and some were due to the fact that  I didn't use a standard state management like Redux or say Context API and it made my code messy - for such a project. And some minor ones that took a toll on my thinking. For instance, working with comments, I initially set it as an array of objects under the associated post but fetching that data back wasn't as straightforward as I thought and I had to make comments a sub-collection of posts. ( I'll go through this project extensively very soon and provide the link to it)


![IMG_20220926_154822.png](https://files.peakd.com/file/peakd-hive/marvel1206/23ynWXPmAM6hRBa48k6G7VKCckCAvBjoSpPwfTMLnE8ucwe8iJWUWfXWhJqgFbXGs6Wds.png)

<center><sup>Screenshot from the project</sup></center>

I borrowed some stuffs like Ratings components from Material UI and it helped with my development. Used React Quill for Rich text editing (Kind of the standard for blogs now). It was hell for me working with new concepts but it helped me understand quite better. Although I still can't wrap my head around the fact that I allowed my Profile.jsx run close to 1k in length when I could have easily broken it down into various sub components.

Well, I am currently trying to get better at React whilst learning Node JS at the side (I have a project already) and I'm working on another and I'm doing this whilst following standard and best practices. I'll talk about them later. I'll also drop updates about my Node JS journey. *Ciao!*
πŸ‘  , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , and 556 others
properties (23)
authormarvel1206
permlinkhow-i-started-learning-react
categoryhive-169321
json_metadata"{"links":["https://api.chatengine.io/chats"],"image":["https://cdn.pixabay.com/photo/2019/07/16/18/18/frontend-4342425_1280.png","https://files.peakd.com/file/peakd-hive/marvel1206/23tmhWV37PhkyNcFqKfy1L9bAiQr46RysVPphqy8hMWiF9qiac6WjYnRvSfpwJZggJ6SD.jpg","https://files.peakd.com/file/peakd-hive/marvel1206/23ynWXPmAM6hRBa48k6G7VKCckCAvBjoSpPwfTMLnE8ucwe8iJWUWfXWhJqgFbXGs6Wds.png"],"thumbnails":["https://cdn.pixabay.com/photo/2019/07/16/18/18/frontend-4342425_1280.png","https://cdn.pixabay.com/photo/2019/07/16/18/18/frontend-4342425_1280.png","https://files.peakd.com/file/peakd-hive/marvel1206/23tmhWV37PhkyNcFqKfy1L9bAiQr46RysVPphqy8hMWiF9qiac6WjYnRvSfpwJZggJ6SD.jpg","https://files.peakd.com/file/peakd-hive/marvel1206/23ynWXPmAM6hRBa48k6G7VKCckCAvBjoSpPwfTMLnE8ucwe8iJWUWfXWhJqgFbXGs6Wds.png"],"tags":["hive-169321","stem","hive-learners","vyb","pob","javascript"],"description":"source I knew nothing about programming - The year was 2018. I literally had no idea but I was curious as to how everything works. In that same year, I was admitted to study Computer Science (BSc) so I","app":"ecency/3.0.28-vision","format":"markdown+html"}"
created2022-09-26 15:37:51
last_update2022-09-26 15:37:51
depth0
children13
last_payout2022-10-03 15:37:51
cashout_time1969-12-31 23:59:59
total_payout_value9.054 HBD
curator_payout_value8.903 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length9,520
author_reputation31,337,183,854,857
root_title"How I started learning React Js: The Journey"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id116,951,263
net_rshares29,128,428,257,356
author_curate_reward""
vote details (620)
@helcim ·
Have you thought about learning Rust?
πŸ‘  
properties (23)
authorhelcim
permlinkre-marvel1206-2022926t175415641z
categoryhive-169321
json_metadata{"tags":["hive-169321","stem","hive-learners","vyb","pob","javascript"],"app":"ecency/3.0.34-mobile","format":"markdown+html"}
created2022-09-26 15:54:15
last_update2022-09-26 15:54:15
depth1
children1
last_payout2022-10-03 15:54:15
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length37
author_reputation179,326,958,206,615
root_title"How I started learning React Js: The Journey"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id116,951,625
net_rshares1,449,486,880
author_curate_reward""
vote details (1)
@marvel1206 ·
No. I have heard about it but I know nothing about it. Care to enlighten as to what it entails and why?
properties (22)
authormarvel1206
permlinkre-helcim-ritr2o
categoryhive-169321
json_metadata{"tags":["hive-169321"],"app":"peakd/2022.07.1"}
created2022-09-26 15:59:12
last_update2022-09-26 15:59:12
depth2
children0
last_payout2022-10-03 15:59:12
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length103
author_reputation31,337,183,854,857
root_title"How I started learning React Js: The Journey"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id116,951,741
net_rshares0
@hivebuzz ·
Congratulations @marvel1206! You have completed the following achievement on the Hive blockchain and have been rewarded with new badge(s):

<table><tr><td><img src="https://images.hive.blog/60x70/http://hivebuzz.me/@marvel1206/upvotes.png?202209271221"></td><td>You distributed more than 27000 upvotes.<br>Your next target is to reach 28000 upvotes.</td></tr>
</table>

<sub>_You can view your badges on [your board](https://hivebuzz.me/@marvel1206) and compare yourself to others in the [Ranking](https://hivebuzz.me/ranking)_</sub>
<sub>_If you no longer want to receive notifications, reply to this comment with the word_ `STOP`</sub>


To support your work, I also upvoted your post!


**Check out the last post from @hivebuzz:**
<table><tr><td><a href="/hive-106258/@hivebuzz/hivefest-2022-bos-result"><img src="https://images.hive.blog/64x128/https://i.imgur.com/sCBFjhf.png"></a></td><td><a href="/hive-106258/@hivebuzz/hivefest-2022-bos-result">Balls of Steel - HiveFest⁷ Petanque Tournament Results</a></td></tr></table>

###### Support the HiveBuzz project. [Vote](https://hivesigner.com/sign/update_proposal_votes?proposal_ids=%5B%22199%22%5D&approve=true) for [our proposal](https://peakd.com/me/proposals/199)!
πŸ‘  
properties (23)
authorhivebuzz
permlinknotify-marvel1206-20220927t122800
categoryhive-169321
json_metadata{"image":["http://hivebuzz.me/notify.t6.png"]}
created2022-09-27 12:28:00
last_update2022-09-27 12:28:00
depth1
children0
last_payout2022-10-04 12:28:00
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length1,223
author_reputation368,208,423,996,200
root_title"How I started learning React Js: The Journey"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id116,975,648
net_rshares1,482,716,073
author_curate_reward""
vote details (1)
@hivetrending ·
$0.05
Thanks for sharing your story. I recently tried out React again and hated it. I ended up building with Vue.js/Nuxt.js instead. I'll be talking more about those experiences in my dev log posts.
πŸ‘  , , , , , , , ,
properties (23)
authorhivetrending
permlinkre-marvel1206-riu4jg
categoryhive-169321
json_metadata{"tags":["hive-169321"],"app":"peakd/2022.07.1"}
created2022-09-26 20:50:03
last_update2022-09-26 20:50:03
depth1
children3
last_payout2022-10-03 20:50:03
cashout_time1969-12-31 23:59:59
total_payout_value0.026 HBD
curator_payout_value0.024 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length192
author_reputation56,528,234,347,119
root_title"How I started learning React Js: The Journey"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id116,959,228
net_rshares87,093,760,361
author_curate_reward""
vote details (9)
@jordand89 ·
$0.23
I just subscribed to you and I'm looking forward to reading that because I had a similar experience. I'm an on-and-off developer as a hobby whenever I want to build something and tried learning React a few years ago and it was a huge headache. Vue is also the option I'm leaning towards trying for my next project.
πŸ‘  ,
properties (23)
authorjordand89
permlinkre-hivetrending-riuu98
categoryhive-169321
json_metadata{"tags":["hive-169321"],"app":"peakd/2022.07.1"}
created2022-09-27 06:05:33
last_update2022-09-27 06:05:33
depth2
children1
last_payout2022-10-04 06:05:33
cashout_time1969-12-31 23:59:59
total_payout_value0.114 HBD
curator_payout_value0.114 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length314
author_reputation541,780,110,410
root_title"How I started learning React Js: The Journey"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id116,969,459
net_rshares378,337,693,711
author_curate_reward""
vote details (2)
@marvel1206 ·
A lot of people use Vue or Next js these days but I don't want to jump ship yet. I was an on and off Dev too but I want to keep myself fully focused on development rn
properties (22)
authormarvel1206
permlinkriuw5o
categoryhive-169321
json_metadata{"app":"hiveblog/0.1"}
created2022-09-27 06:46:48
last_update2022-09-27 06:46:48
depth3
children0
last_payout2022-10-04 06:46:48
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length166
author_reputation31,337,183,854,857
root_title"How I started learning React Js: The Journey"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id116,970,067
net_rshares0
@marvel1206 ·
$0.11
Haha you shouldn't hate itπŸ˜‚  I look forward to your posts
πŸ‘  , , , , , , , ,
properties (23)
authormarvel1206
permlinkriu4pq
categoryhive-169321
json_metadata{"app":"hiveblog/0.1"}
created2022-09-26 20:53:54
last_update2022-09-26 20:53:54
depth2
children0
last_payout2022-10-03 20:53:54
cashout_time1969-12-31 23:59:59
total_payout_value0.056 HBD
curator_payout_value0.055 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length57
author_reputation31,337,183,854,857
root_title"How I started learning React Js: The Journey"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id116,959,316
net_rshares184,308,098,909
author_curate_reward""
vote details (9)
@jordand89 ·
You learned QBasic in 2018?! It was my first programming language (besides HTML) too, but I learned it in 2001 and it was already considered old and outdated at that point.
πŸ‘  
properties (23)
authorjordand89
permlinkre-marvel1206-riutxr
categoryhive-169321
json_metadata{"tags":["hive-169321"],"app":"peakd/2022.07.1"}
created2022-09-27 05:58:39
last_update2022-09-27 05:58:39
depth1
children1
last_payout2022-10-04 05:58:39
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length172
author_reputation541,780,110,410
root_title"How I started learning React Js: The Journey"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id116,969,365
net_rshares1,471,325,062
author_curate_reward""
vote details (1)
@marvel1206 ·
Trust me I get that a lot. Yes it's so old a language. But I didn't  actually focus on it.
properties (22)
authormarvel1206
permlinkriuw0h
categoryhive-169321
json_metadata{"app":"hiveblog/0.1"}
created2022-09-27 06:43:33
last_update2022-09-27 06:43:33
depth2
children0
last_payout2022-10-04 06:43:33
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length90
author_reputation31,337,183,854,857
root_title"How I started learning React Js: The Journey"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id116,970,009
net_rshares0
@kneelyrac ·
I'm not a programmer but I'm familiar with what you've mentioned here. Though the word react made me open your blog because my previous team lead, a ComSci grad, resigned and told me that he was supposed to do a project using React. I'm an ECE and have a basic knowledge of programming so I'm trying to catch up and embrace the software engineering world. At the moment, I'm enrolled in a Python class, even though we're using C++ for the electronic boards, then JavaScript and Vue for the documentation. I still have a loooong way to go, and your journey is such a good read.

I can relate to the part where you showed your Hive blogs to the interviewer. It was unrelated (for me) but I still did show them my blogs. πŸ˜…

Best of luck with your plans! πŸ’ͺ 
properties (22)
authorkneelyrac
permlinkre-marvel1206-rivxup
categoryhive-169321
json_metadata{"tags":["hive-169321"],"app":"peakd/2022.07.1"}
created2022-09-27 20:20:51
last_update2022-09-27 20:20:51
depth1
children1
last_payout2022-10-04 20:20:51
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length753
author_reputation36,530,235,473,997
root_title"How I started learning React Js: The Journey"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id116,987,018
net_rshares0
@marvel1206 ·
I wish you well in your phython journey. We are all learning and we will continue to learn. Thank youu
properties (22)
authormarvel1206
permlinkriwpjf
categoryhive-169321
json_metadata{"app":"hiveblog/0.1"}
created2022-09-28 06:18:57
last_update2022-09-28 06:18:57
depth2
children0
last_payout2022-10-05 06:18:57
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length102
author_reputation31,337,183,854,857
root_title"How I started learning React Js: The Journey"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id116,997,766
net_rshares0
@poshtoken · (edited)
$0.03
https://twitter.com/marvelstalwart/status/1574423889060548610
https://twitter.com/kneelyracimp/status/1574859262018592768
<sub> The rewards earned on this comment will go directly to the people( @kneelyrac ) sharing the post on Twitter as long as they are registered with @poshtoken. Sign up at https://hiveposh.com.</sub>
πŸ‘  
properties (23)
authorposhtoken
permlinkre-marvel1206-how-i-started-learning-react15629
categoryhive-169321
json_metadata"{"app":"Poshtoken 0.0.1","payoutToUser":["kneelyrac"]}"
created2022-09-26 15:41:54
last_update2022-09-27 20:32:21
depth1
children0
last_payout2022-10-03 15:41:54
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.033 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length323
author_reputation3,940,167,702,075,806
root_title"How I started learning React Js: The Journey"
beneficiaries
0.
accountreward.app
weight10,000
max_accepted_payout1,000,000.000 HBD
percent_hbd0
post_id116,951,369
net_rshares108,084,517,882
author_curate_reward""
vote details (1)
@stemsocial ·
re-marvel1206-how-i-started-learning-react-20220927t044714679z
<div class='text-justify'> <div class='pull-left'>
 <img src='https://stem.openhive.network/images/stemsocialsupport7.png'> </div>

Thanks for your contribution to the <a href='/trending/hive-196387'>STEMsocial community</a>. Feel free to join us on <a href='https://discord.gg/9c7pKVD'>discord</a> to get to know the rest of us!

Please consider delegating to the @stemsocial account (85% of the curation rewards are returned).

You may also include @stemsocial as a beneficiary of the rewards of this post to get a stronger support.&nbsp;<br />&nbsp;<br />
</div>
properties (22)
authorstemsocial
permlinkre-marvel1206-how-i-started-learning-react-20220927t044714679z
categoryhive-169321
json_metadata{"app":"STEMsocial"}
created2022-09-27 04:47:15
last_update2022-09-27 04:47:15
depth1
children0
last_payout2022-10-04 04:47:15
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length565
author_reputation22,459,131,289,824
root_title"How I started learning React Js: The Journey"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id116,968,336
net_rshares0