DEV Community

Ryan
Ryan

Posted on

 

My journey through React

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 (8)

Collapse
 
lukeshiru profile image
Luke Shiru

Hi Ryan!

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:

// This would be your "component A"
const Button = props => (
  <button {...props} />
);

// This would be your "component B"
const CountDisplay = props => (
  <span {...props} />
);

// This would be the parent component in which both A and B are siblings
const Counter = ({ count, onButtonClick, ...props }) => (
  <div {...props}>
    <CountDisplay>{count}</CountDisplay>
    <Button onClick={onButtonClick}>Click me!</Button>
  </div>
)

// Finally the state is at the top level, and everything works:
const App = () => {
  const [count, setCount] = useState(0);

  return (
    <Counter count={count} onButtonClick={() => setCount(count + 1)} />
  );
}
Enter fullscreen mode Exit fullscreen mode

No need for the useEffect hook 🎉

If you need further explanation or more details, let me know, I'm happy to help :D

Collapse
 
rfindley profile image
Ryan

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 useEffect with success.

Collapse
 
lukeshiru profile image
Luke Shiru

Several reasons:

  1. useEffect is 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 useEffect to call some kinds of analytics
  2. You generally want to avoid "side effects", because that's basically "unpredictable behaviors". If you have a component that triggers a state change trough useEffect, the user of your component is expected to know that your component has that side effect.
  3. As I mentioned in the previous comment, the idea with React is to have one-way data flow, it works this way:
+-----------------+  Properties   +----------------+
|                 +--------------->                |
| ParentComponent |               | ChildComponent |
|                 <---------------+                |
+-----------------+    Events     +----------------+

Enter fullscreen mode Exit fullscreen mode

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).

Thread Thread
 
rfindley profile image
Ryan

So I am running things one way with the useEffect as 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 useState only though I intend to try to re-factor as I get the app up and running.

Collapse
 
raddevus profile image
raddevus

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.

emoji-pad
How would what you learned help you to create this app? Just curious.

Collapse
 
rfindley profile image
Ryan

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.

Collapse
 
raddevus profile image
raddevus

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.

Thread Thread
 
rfindley profile image
Ryan

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.

Visualizing Promises and Async/Await 🤯

async await

☝️ Check out this all-time classic DEV post