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 (8)
One thing you need to keep in mind when working with React is the "one-way data flow", so in order to achieve the communication you want to achieve between 2 sibling components, ideally you should communicate what happened in one component trough events to the parent, and that parent should then update the state of the other children trough props. Let's say you have a button component and then a component that shows the amount of clicks you did, that would look something like this:
No need for the
If you need further explanation or more details, let me know, I'm happy to help :D
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 utilized
useEffectis designed to be used to run "side effects", so ideally it shouldn't be used to call other hooks. One example is that you can use
useEffectto call some kinds of analytics
useEffect, the user of your component is expected to know that your component has that side effect.
Basically you always send data trough properties down, and you send events up. So the component at the top (parent) has the state and it lets the children know about that state trough props, and the children let the parent know about what happened inside of them trough events. Child components should never change the state by themselves.
Doing stuff this way makes the components extremely reusable and composable (because they don't care about state, they only care about what they received trough props), easier to maintain and easier to test (because they don't have side effects or internal state, making them consistent: Always the same output given the same input).
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 with
useStateonly though I intend to try to re-factor as I get the app up and running.
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.