I finally decided to learn React, I’m following Stephen Grider’s Modern React with Redux on udemy. I finished the first project, which is a fairly small app that makes an ajax request from youtube. After that I noticed the content is going to be about Redux, I have no idea what Redux, it seems like another tool, who knows.
The thing is that I don’t feel very comfortable with some React concepts yet, I feel I have to build a few more small apps for things to finally start clicking, I learn by doing. I’m thinking of following the tutorial from React official docs before moving on with Redux, the React official docs looks very well documented.
My question is, how good is the React official docs for a beginner? And is it correct to get more comfortable with React before getting started Redux?
1 Like
I think redux is actually easier to understand than react. I built one of the projects on FCC with plain javascript and redux and it was quite easy to use. Have you looked at the FCC topics on that?
React docs are excellent, I would say. As for Redux, once you spend a little more time with React you will understand why Redux is necessary. React has an unidirectional flux of information, with data going from Parent to Child. However, you can transmit data from Child to Parent by calling function props in the Child. Now imagine that you have a complex structure where between the master component App and a button component you have multiple intermediary components, like this:
< App /> -> < Intermediary /> -> < Intermediary /> ->< Intermediary /> ->< Intermediary/ > -> ... -> < Button />
Let’s say that you want to let App component know that Button component was clicked. You will have to call prop function for each Intermediary component, which can get really annoying when you have a complex architecture. This is where Redux comes in handy. It links < Button /> to a store, from where you can transmit data to < App />, skipping all intermediaries. Redux is great in complex apps, overkill in simpler ones.
Umm I see, that’s very good to know. I was already worried about using callback functions to pass data from a parent to a very deep nested child.
Well I think I should spend more time with React before even getting started with Redux then, I’d like to know when to use it and what it’s doing for me. I just wanted to know if the React docs were good for a beginner, though I’m already familiar with some React concepts.
No need for callback functions to pass data from Parent to Child. Just add a prop, like this
<Parent propToPassToChild={stuff} />
In the child you will access the propToPassToChild prop as this.props.propToPassToChild, which has the value of stuff, whatever that might be
I meant passing an event handler from a parent to a child, the instructor used a callback function to pass that information.
Why would that be necessary? Is it a form of composition? I use the event handler in the parent to change a variable that is then is passed to the child as a prop. Passing the whole even handler seems like overkill.
he means when you pass a callback function from the parent to a child so that it can change the state of something that the parent knows about.
eg.
Parent holds state of input field
-> child 1 is the input field
-> child 2 is a list of everything you input in child1
For child1 to talk to child2, parent has to hold the event handler for the state that is common to both children. Then it passes it down to child1. Child1 invokes the handler when someone types something. The state in parent gets updated and that results in the list in child2 getting updated.
Oh, I get it. Funny enough, that’s the technique I used as an example of why Redux is a good idea.
Once yoy start building apps with react and states become difficult to manage since its all over the place i think it will become easier to understand the need for redux. Me myself is still trying to grasp the concept of redux but startimg to realize why its going to be really useful
You don’t need Redux (and technically redux does not need React, but anyway…) .The way it forces you to build things is imo a very good pattern, but its normally better that you learn React, then you learn Redux when you need it (ie you have a complex app where it would help). It’s a fantastic thing, and after an initial wtf, pretty easy to understand, as @hbar1st says. However it adds a metric f ton of boilerplate code that you need to write, and adds another layer of abstraction, and another layer of complexity. Redux should just be a small library that only takes a few days to grok if you already know React.
There is a secondary reason for learning React first, and that is that many of the usecases for Redux can now leverage React’s Context API. The Context API has been in React for a long time - eg react-redux, the library that binds Redux to React, is built on it, as is React Router. It’s just that in the newer versions of React, they’ve made it work better, cleaned the API up, and removed the big red warnings in the React docs saying “this exists but please don’t use it unless you really know what you’re doing”. It doesn’t completely replace Redux, but you can do a lot of the same stuff now in React without installing Redux
Thank you for clearing that out for me. Now that I know I need to focus on React before getting started with Redux I guess my next question would be; what are good projects for a beginner that I can try to build using React, a todo app?
I’m following React docs tutorial but I feel the only way for me to truly understand React concepts and being able to think in React way will be when I build something from 0 myself, I think I will have to go through that struggle for things to finally click.
I know a todo app is something that can be done with just vanilla JavaScript, but I think I’ll need something easy to start. What other projects would be a good idea?