Feeling lost with react and redux

Hi everyone,
I’m Juan and I started to do the FFC curriculum in January 15 from this year and I hope to complete the Front End libraries soon.
I’m excited with all the things I has been able to learn so far in this 3 months, and all the projects I did (Landing pages from scratch using jquery and bootstrap and things like that which 6 months ago I didn’t though was possible for me to do).
So far I have done every challenge without help (or at least I try to not using help unless I feel really confused). I Have to say, I really liked the responsive web design and the js algorithms curriculum (even tho I still feel like I still need to study more, and practice more js ), but I really haven’t enjoy this Front End libraries part .
The Bootstrap , jquery and sass modulus are great and I learned a lot with those, but I feel like the other modulus (react, redux, react and redux), are quite hard to follow, I feel quite confuse with using react and now that I’m on the last part (Front end libraries Projects) I feel like I didn’t learn enough react to build the projects, I still struggle to understand the store and other concepts, then I doesn’t think is plausible for me doing for example the random quote Machine or any other of the projects with plain React (I saw a tutorial that use just jquery for the random machine and I’m planing to complete the project that way).

I don’t really know what sould I do , Should I try to complete the projects with simple html, css, bootstrap and jquery , and move forward to the Data visualization Certification or re-read the react/redux part to drill a bit more the concepts before even try to do the projects?

FCC does a big mistake teaching React simultaneously with Redux. None of the projects requires any additional state management library (like Redux). Those projects are so simple that you must be able to do them in plain React using local state (or context, which as far as I remember fcc doesn’t even teach; actually their React curriculum is a bit outdated).

My suggestion - got to https://reactjs.org/ and read through the official docs. Forget about Redux for now. Learn to use state and pass data via props.

Also I’ve read in this forum that people complained about Redux tutorial being written in a very complex language.

And Data Visualization part is quite useless - d3 is a specific and complex library and unless you’ll be using it daily you’ll forget it in couple weeks.

2 Likes

It’s not simultaneous, they have different sections for React and for Redux and then a different section that combines them later, you can learn them independently, any way, The react curriculum now is miles better than what we used to have back when the legacy certificates were in swing, which was erm… nothing , and there was no redux then either, so certainly an improvement

2 Likes

By simultaneously I meant that it’s done one after another. Redux should have been somewhere around “Coding Interview Prep”.

And as someone who did legacy certificates while React et al were “coming soon…” (to newcomers, it took them two years to come :smirk:) , I’d say the sooner you start to learn from official docs the better. Fcc just isn’t capable to update their curriculum to keep up with the fast changing world of frontend libraries and frameworks.

3 Likes

@jenovs They are about to update the curriculum to Version 7.0, I just do not know exactly when but I hope they will do sooner rather than later! Maybe some of the fCC contributors/staff can comment on that…

1 Like

Well…if its any consolation, I started the React challenges and was completely lost. Checked out the React documentation and was still lost, Did some tutorial, followed along, finished it…was still lost.

Painfully worked my way through a really basic pdf design to convert it to React, and stuff started making sense. Looked at Redux and my brain melted. Made another, bit more complicated project in React, revisted redux and my brain shut down. Made yet another really complicated project in React and managing state was driving me nuts…suddenly redux made all the sense in the world. Integrated redux into my react site and felt awesome.

Then I found out hooks is replacing redux :joy:

Anyway, my point is…while everything about all of it was a struggle at first, I just started building projects, and the more complicated they got, the more the tool for the job (in this case redux) made sense, and its only then that I began to understand it.

6 Likes

I learned React and Redux “simultaneously” as a post above put it. It just really depends on the person. There is nothing wrong with how FCC set it up. It’s actually three different module,… I don’t really agree that Redux “should be somewhere around Coding interview prep”.
Maybe FCC needs to revamp the Redux section(s) a bit to make it easier to grasp it all especially managing state (like cndragon… learning state management- props, states blah blah drove me crazy last year… I sort of get it now but still challenging. Other people in my cohort got it faster than I did lol.

While I agree reading the official documents is good… don’t make that the ONLY thing you do. There is nothing wrong with checking out different resources like FCC, Code Academy, Udemy (hell- the video series I was watching is actually more out of date than FCC’s lessons and he’s one of the better ones recommended!)

To OP- take your time- do projects, read, research (no shame in googling what you don’t know- I do it all the time).

I’ve read about hooks but it seems to be in a transitional phase right now, hard to tell. It’s the next ‘cool thing’ :rofl: and something I haven’t touched… yet.

I feel like everyone was just waiting for me to go “ooooh! I finally get it now!” to drop the news on hooks. No kidding, as soon as I integrated redux into my project, the first article I saw was something like “Is redux dead?” and all about the stuff you can do with hooks. And articles. And podcasts… all talking about how hooks renders redux useless. I kinda threw my hands up and decided to take a moment to bask in the glory of learning redux before I go back to knowing nothing :joy:

ps…dont let this deter you Juan…thats just tech for ya. It moves fast, theres always going to be something new around the corner. Still totally worth it to learn, because its not like companies are all racing to replace redux. It takes a long while for something new become mainstream, so stay on path :blush:

That’s classic new-shinyness syndrome. If it isn’t the very newest, shiniest version of the newest, shiniest language/‌framework/‌library, then it’s worthless to learn. Never mind that a ton of legacy code is written in that language/‌framework/‌library/‌version, or that companies are still using it to create brand new apps, or that in any case many of the concepts are transferable.

That said, I don’t think there’s any harm in being selective with the curriculum. If you don’t think learning Redux is a good use of your time, skip it and move on to something else. You can always come back to it later.

3 Likes

Reading comprehension?

Yeah, I see how campers transfer concepts from jQuery to React :man_facepalming:

The problem is that a beginner who doesn’t know any better won’t be able to make an informed decision regarding what parts of the curriculum could (or even must) be skipped.

Reading combination? Never heard of it.

Well, they both offer abstractions for DOM manipulation, so that’s a big conceptual similarity.

I’m not saying that everything from any given library X is transferable to any given library Y. It’s more like while you’re learning a new tool, you’ll inevitably pick up transferable knowledge at the same time.

jQuery is also not obsolete. Even though you probably won’t be writing lots of new code with it (unless you’re targeting really old browsers), you’ll still inevitably need to read legacy code written with jQuery.

That’s a fair point. It’s also important to read around and not treat the fCC curriculum as gospel. And heck, that’s one thing this forum’s useful for, too.

2 Likes

If you have problems with Redux, do the original egghead course of Dan Abramov: https://egghead.io/courses/getting-started-with-redux

Why? Because you will understand why Redux exists, what it does and especially how it works under the hood.

2 Likes

Yeah, it is quite complicated. React is all JS: even the bit that looks like HTML is not HTML, it is sugar over functions that create JS objects. It can ask a lot of you, and it is extremely helpful to know JS well to be able use React well. Contrast that with jQuery, which is all about manipulating the DOM – after learning HTML and CSS, jQuery seems familiar, a set of simple commands you can use to manipulate things you already know.

You don’t need to use React for the projects. The projects all ask you to do a single thing, and as a result, are not terribly complicated; in many [most!] ways it is much easier to not use React (or a similar frontend framework) – you’re adding a lot of complexity for not much gain.

But let’s assume one of those projects is a real-life app. It stops being so simple almost immediately. Here are a few normal things that you may need to think about in addition to just rendering some UI and printing some data on the page:

  • what happens when a request errors out?
  • what happens when a request times out?
  • what happens when there is an error?
  • what happens when there is nothing to display?
  • what happens to the local data when the data updates remotely?
  • what happens to the remote data when the data updates locally?
  • what happens to the browser history when you use the app?
  • what happens when you press the back button?
  • if the browser history reflects what data you are currently viewing, can you navigate directly to a specific thing in the app? How is that handled?
  • what happens when you request a collection of things?
  • if you do have a collection of things, what happens if you update one of those things? Does you need to rerender the whole app?
  • multiply that amount by 1000. What happens now? Does the app fall over or grind to a halt? If so, how do you fix that?
  • multiply that amount by 1000 again. What happens now? Does the app fall over, etc?
  • what happens when you are on a slow connection?
  • how would you handle translating the UI text into a different languge?
  • etc etc etc

So you start to see that maybe you’re going to have to write logic for all of those things. And that logic is going to get quite complex. And maybe the things you need are common things. And maybe someone has already done this before, and what they’ve created hides away some of that complexity.

And you so get libraries and frameworks. jQuery is one example, but it doesn’t really help much when you want your app to work like a desktop/native app (single page apps). React is one of the tools that have been built to allow that. Redux is something else, it’s a library designed to deal with state. Also, tbh, if you’re using Redux, it is likely that Redux can be the app; React is then “just” the library you use to render out the current state.

Building GUIs is quite hard, so many different patterns for building them have been tried. How React approaches the problem is that allows you to take some data and declare how you want it to display visually. When the data changes, the UI automatically updates: React updates the DOM. Contrast that with a GUI written using jQuery, where this is not the case: when the data changes, you need to write logic to manually change the DOM. And in React, you split the bits of the app out into small components that all do a small job. Each of those components may/may not have data passed into them (via props, like arguments to a function), and/or internal data (state, like an object, where you can change properties inside the object).

Hooks are basically the same thing as the lifecycle methods in classes, but with hooks you can extract that logic out – it isn’t as tightly bound to the code of the component it exists in. For example, fetching data in in a class component within componentDidMount could, instead, make use of a useFetch hook (that internally uses useState and useEffect) that gets used in any function components that need it.

It doesn’t make sense to say they’re replacing Redux because they’re completely different things - that’s like saying class lifecycle methods like componentDidMount make Redux obselete. I think there were a few tutorials and articles that suggested that when hooks first dropped, but that seems to completely misunderstand what hooks are. Plus Redux was being used for stuff it didn’t need to be used for (where local state would be a better choice), and hooks seem a nice alternative to lifecycle methods in that case.

1 Like

Oh those weren’t my thoughts, just all the discussions that cropped up after. I was really just sharing my experience, that tech moves fast, there’s always going to be something else to learn. But I haven’t seriously looked into hooks yet to know if they’re wrong or not. I will check it out soon though!

I don’t think though that adding complexity to a small project has no gain. Being able to concentrate on the technology itself and learn how to troubleshoot in a small simple project is way easier than jumping into a large codebase and trying to figure it all out that way.

Everyone learns in different ways of course, but personally, I’ve found that continually building on and adding complexity to my projects have taught me a lot, and to others, it shows a progression of my skill level as well.

1 Like

Juan, how solid is your JavaScript? Including ES6 knowledge?

I find react really squeezes all the juice out of JavaScript and many times when I’m struggling, it’s because I’m not seeing the JavaScript and thinking I’m looking at something that’s only react.

One thing that really helped me on the reactjs is site was Dan Abramovs tic-tac-toe tutorial.

You might be like me and find that it’s hard to learn parts of the MERN stack all at the same time and it’s easier to write a project with each one separately so you can focus on one thing.

Redux is a good way not to learn react to properly, and I think you should learn how to pass state until you get to a point where it gets so complex that you find yourself looking for something like redux to make it easier. But I find that learning redux with react is a lot like learning Mongoose with Mongo in that it adds a layer of confusion to the base thing you’re trying to learn

1 Like

I’ve been using Redux in (production) applications for a while, with a year in-between where I used the thing it’s based on (the Elm language), and I think people starting out kinda don’t really get what it is.

If you have a small application (in React or similar), the state of the app, what it currently displays based on previous events/user input, that can all be kept in the developer’s head. And I think this is one of the major issues with many of the tutorials, why it’s very difficult to grok. Say a learner understands how a whole app works, what it’s doing at any one time. Adding quite a lot of weird-looking code split over a load of files to do what appears to be the same thing (just in a less understandable way) is going to be a bit baffling.

What many of the tutorials don’t get across is that if you use Redux, what Redux provides effectively is your app. React just becomes the thing you use to render it out, and you join the React code to the Redux app using react-redux’s connect function. The way the app actually works, what it does, that’s Redux.

What it says is that I’m going to represent the state of the app as an object. I can’t touch that object directly, instead I put a single function in front of it (a reducer). That function is basically a list of what happens to that object when I tell it I want to change it. When something happens in my app, I’m going to call that function, passing it a message that tells it what I want to do and the current object. The function takes the message, and gives me a new, updated object back.

That’s it, and that’s what the app becomes.

const initialState = {
  counter: 0
};

function update (message, stateObject = initialState) {
  switch (message) {
    case: "INCREMENT":
      return { counter: stateObject.counter++ };
    case: "DECREMENT"
      return { counter: stateObject.counter-- };
    default:
      return state;
  }
}
> initialState
{ counter: 0 }
> let nextState = update("INCREMENT")
{ counter: 1 }
> nextState = update("INCREMENT", nextState)
{ counter: 2 }
> nextState = undate("DECREMENT", nextState)
{ counter: 1 }

If that seems pointless, consider that any GUI does the same thing: you press a button, it triggers an event, that event updates the state. But it generally isn’t so explicit. To be more specific, all GUIs are state machines. Redux is a much simpler model

Also, YMMV, but personally I’d say the best way to understand the point of redux is to follow an Elm tutorial, like this one: https://guide.elm-lang.org/

5 Likes

@DanCouper great write-up.

KentCDodds has a great course about React on egghead,
where he connects the dots between JavaScript and React:

@jenovs , @cndragn, @Ducky, @lionel-rowe, @miku86coding, @DanCouper, @webpropopuli .
Thanks everyone for your answers and advises, definitely it has been a rough time understanding react but thanks to Bob Ziroll tutorial I think I finally understood how to use react correctly (I’ll add the link at the end if there is someone else struggling with some aspect of react).

Personally I think, my problem is that I had no previous experience building websites from scratch using js , then I didn’t understood at first whats the deal with react and the DOM , or why using react in first place.
I think maybe for someone more experienced maybe the FFC tutorials may be helpful but as a complete beginner, I just though at first , the ideas where unconnected , is not obvious as a beginner to see how to using normal html and css with the hole thing of stateless functions and dealing with the state works, or even why doing it , I simply wasn’t able to understand how to use react with all the things I learn previously in FFC (html, css ,js, bootstrap,etc) for doing something. I eventually, was able to see how to connect the dots.

I realized the following the FFC curriculum strictly as I was doing, it was a bad approach (there are some things you dont really learn there, or if you learn it , you dont use it to often in the FFC projects). By doing some websites on my localhost (not by using codepen like is required in FFC) I saw my weaknesses and now even though I still determine to get all the FFC certificates, I realized there are also really great tutorials out there you can use at the same time that FFC.
I think the real problem so far in FFC is that been a full stack developer implies knowing so many things at the same time , then at some points FFC may fail connecting the dots and trying to show you how to use some tool with the previous ones or fail telling you why is important in first place (I hope this get fixed with the new FFC update of the curriculum).

With all that said, thanks again to everyone for your help.

https://scrimba.com/playlist/p7P5Hd

2 Likes

This is definitely a really difficult thing to get a mental handle on when you’re starting out, and I think it applies to most frameworks or libraries. As you say, when you’re experienced, the tutorials are likely more useful. But more than that, when you’re experienced, you’ve generally had to deal with problems that libraries or frameworks are trying to solve, so you can recognise very quickly when and why you might need to leverage framework x, or in what situation you’d want to use library y over library z over just writing the thing from scratch. And experience in a language means APIs for frameworks/libraries become very much easier to grok straightaway; look in the docs, find the class or function that fits your current need, install and off you go.

Definitely working in a text editor, with a local server, that’s something that can really help, because you’re suddenly forced into producing a thing that works in exactly the same way as it would if it were live. And you’re producing it using the actual language tooling (rather than that all being hidden behind a web interface). And that’s also hard, in different ways! But it helps, a lot

I would agree with this for the most part, given the size of the community and all of the great teaching resources, there are many other (much better) places to learn React and Redux. Redux isn’t something you’ll need for a lot of simple applications, and it can be a bit painful to learn, but persistence and repetition will help a lot. I would recommend Stephen Grider’s Modern React course on Udemy, it’s fairly long, and there’s a lot of practice in there.