Being new to development I spent a lot of my initial days trying to map out my plan for learning. This included the basics but I also kept seeing a lot of information about learning a JavaScript framework. How to choose one left me a bit perplexed as it seemed to be based mainly on what companies I might want to work for or what projects I was involved with at the time. I resolved therefore to approach my development learning solely by concentrating on learning vanilla JavaScript.
As you can probably tell by the title of this post I am now learning React. I got involved, although only briefly, with a project being built using React. I was working on developing code in React with next to no knowledge about how React works or even the main purpose of using this framework. That being said I began reading as much as I could and started building my own SPA using React.
The goal of this post is to be the beginning of my documentation of my journey in learning React. I am sure there will be posts documenting both successes and failures. Hopefully these will give me a good way to track my progress.
This first post I'll concentrate on perhaps one of the most difficult aspects I've come across to date, namely trying to learn React using functional components and hooks when so many of the tutorials out there are based on class based components. I realize the official documentation talks about class based components still being used throughout the dev world, particularly in legacy apps. However, as a new developer I've been trying to keep myself from burning out, getting stuck in tutorial hell, etc. With that in mind I felt that learning both class based components and hooks would tax me a bit and lead to frustration so I decided to concentrate on building my entire project using functional components and hooks.
The first one I really grasped properly was useState(), which seems at first glance to be really simple. However, I spent a lot of time trying to get my project to recognize my changes to the state of an item, and am still in fact trying to grasp changing the state of one sibling based on the value of another sibling. This is not documented well, at least in my searching, when using hooks rather than this.state. I have, however, successfully done this once, so I consider that a win. I was able to manipulate the value of sibling 'B' based on the value of sibling 'A' with a fairly simple if/else statement in a useEffect() hook. Now to repeat this in a more complex manner...
Top comments (6)
I am a long-time dev and I also try to help others get into dev so I am always interested in how others learn technology related to development.
What app did you create in order to learn those concepts? Was there a target deliverable that automates something? Just curious.
I want a desktop app for Linux (Ubuntu 20.04) that will allow me to click one or more emoji characters and copy them so I can easily paste emojis into discussions like this one.
I am looking to write it as an ElectronJS app. I created an initial prototype at jsfiddle.
How would what you learned help you to create this app? Just curious.
Hello! I'm not too familiar with ElectronJS so I do not know how it differs from React. I did run across an example video on youtube, youtube.com/watch?v=Qf68sssXPtM&t=..., that was passing state using onClick. Perhaps that would assist you some.
Oh, I probably didn't explain clearly enough. I'm not stuck.
I was just wondering if that you are able to create an Emoji-Pad type of app with the skills you've learned in React? I like to target a specific app to see if I'm learning a particular technology.
Do you think you could create a complete React app for Emoji-Pad? Just curious.
Ah sorry for misunderstanding. I'd imagine I could find my way through creating this. I like the idea of learning by creating an app so I'll have to keep that in mind as I move forward in my learning.
So I am running things one way with the
useEffectas I have two of them running in the parent component and am passing props down to the children. I was really struggling getting this to work withuseStateonly though I intend to try to re-factor as I get the app up and running.Hello! Thank you for the example. I'm curious if there is a performance benefit to doing this without the
useEffect. I worked through a more complex piece today and again utilizeduseEffectwith success.