React and Redux: why?

React and Redux: why?
0

#1

Hello there!
I two questions for the world.
What is the point of React, and more specifically, JSX?
 Why would you want to write HTML in your JavaScript?
 Why not use jQuery?
And:
What is the point of Redux?
 Why not just have this.input and this.messages, and then say this.messages.append(this.input) rather than going to all the trouble of having a store, and dispatching actions to it.


I’m asking the questions because I’m currently banging my head over the React and Redux section in FCC.


#2

What is the point of React, and more specifically, JSX?

React helps organize large sites into components and allows you manage how data is passed back and forth JSX is not required for React, but it’s hard to imagine React without it. It allows you to compartmentalize sections of HTMLish code in you React components and inject JavaScript into them. One-way data binding is cool.

Why would you want to write HTML in your JavaScript?

Because it allows you to work on small component building blocks and easily reuse code.

Why not use jQuery?

JQ is cool and has it’s uses, but it doesn’t do as much as React. If you build bigger and bigger web sites, something like React (or Angular or Vue) become more and more useful. Still for small sites I still use JQ sometimes, or vanilla JS. When JQ was invented it standardized working with different browsers (less of an issue now), made AJAX easier (less of an issue now with fetch in vanilla JS), and made it easier to access the DOM (still useful). React makes it incredibly easy to access the DOM, and makes it much, much easier to compartmentalize your code (which JQ does a little) and manages your state (which JQ doesn’t do).

What is the point of Redux?

React allows you to pass data around through components. But as your React component tree grows, it gets increasingly difficult to manage. Redux allows a simple® way to manage that data and control where it goes and how it is changed. Again, it’s about complexity. If I’m building a small React app with simple data passing, then I may not need Redux. But for large apps, Redux comes in handy.

Why not just have this.input and this.messages, and then say this.messages.append(this.input) rather than going to all the trouble of having a store, and dispatching actions to it.

Because things get complicated fast.

I’m asking the questions because I’m currently banging my head over the React and Redux section in FCC.

React is strange when you first try it. It takes a while to get the hang of it. And then Redux is strange in a completely different way. The do cool things but they take a while to get a hang of. Once you do, it all makes sense, but they can be frustrating until then.

Yes, you can build things without them. But sites keep getting bigger and bigger with more people working on them. You may not think you need something like React/Redux now, but you will.

And the frustration you are feeling is normal. Just take a deep breath. Everyone goes through this. I thought I’d never get Redux and then one day it just made sense.


#4

hey Kevin! I really like how you explain them in layman terms, it really made things easier for people who just entered this section and banging their head in confusion haha :smiley: (me too, OP, me too)
So I have some more question… how big is considered “big enough” for a website to be easier to manage when written in React/Redux? Are they building it directly using React/Redux or just plain HTML CSS JS and then rewriting them when they got big? Isn’t using React from scratch made it harder to style the look of the page?


#5

I really like how you explain them in layman terms, it really made things easier for people who just entered this section and banging their head in confusion

Well, the nascent understanding I have came from months of banging my head against the keyboard.

how big is considered “big enough” for a website to be easier to manage when written in React/Redux?

There’s no set rule. And it’s not just size. You could have a monstrous site, but they’re all static pages. It’s about complexity of the pages and complexity of how data is shared.

Don’t worry too much about that. The more you do these things, the more fine tuned you spidey sense will become. Build the React projects, use the Redux. You’ll develop your understanding.

As to converting vanilla JS to React, to me that would be a little rough. They way you think of a React site is different than how you think of a “vanilla” site. It is organized differently. Again, you’ll develop a sense for how the different section interact and how the data moves back and forth. Just put in the time and it will come.