Not understanding React Components very well, What should I do?

Having a difficulty understanding what is going on what are we doing etc:
Can someone explain what’s going on in the code?

Class is defined as a blueprint to create objects right just like constructor functions? What exactly are we trying to accomplish using this class?

I know the extend keyword it just now has access to properties of thing it extends. What exactly is React.component?

Constructor was used to create objects right? What are we doing here what’s props? What exactly does render do does it display something to the page?

My basic understanding of react component is that it’s just like a function that returns HTML. Am I wrong? Wow all of this is super confusing stuck in these 1-2 lessons for 45 minutes and worry that I won’t be able to go further. Last time same thing happened with ES6 and I only returned back and continued after a whole year

  **Your code so far**

class MyComponent extends React.Component {
constructor(props) {
  super(props);
}
render() {
  // Change code below this line
return(
  <div>
  <h1>Hello React!</h1> 
  </div>
);


  // Change code above this line
}
};
  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.212 Safari/537.36 OPR/76.0.4017.177

Challenge: Create a React Component

Link to the challenge:

hey, damn you’ve got a lot of questions lmao so let me start by answering the most important one.

What is React.Component? This is the base class from which all of the other components need to inherit. you need to inherit from this class because it has methods like render() which are absolutely crucial to let the components render on the page so to put it simply you cannot create or render components without inheriting from this class.

My basic understanding of react component is that it’s just like a function that returns HTML. Am I wrong?

and by this i think you are getting confused between class components and functional components.

the easiest way i think you can get started with react is if you watch this video before going through any exercises

after that, i think you should go through the react documentation. if you prefer to learn by doing then try this : Tutorial: Tic-Tac-Toe – React or if you learn by reading try this https://reactjs.org/docs/hello-world.html

go through it step by step and just breathe. you’ll get there and let me know if it helped or not

1 Like

Having a difficulty understanding what is going on what are we doing etc:

100% normal. Web dev is hard in general and then React - wow, that is just a completely different way of thinking. I think most people feel what you’re feeling at this point.

Class is defined as a blueprint to create objects right just like constructor functions? What exactly are we trying to accomplish using this class?

Sure, that kind of works as an explanation. The whole idea of “class” is something that comes from Object Oriented Programming (OOP). There are languages that are very OOP (Java comes to mind). JS is not really OOP but is OOP-ish. The JS implementation of a class is their attempt to get some OOP functionality. You are welcome to read about OOP if you want, but keep in mind that JS is an imperfect implementation so some of the things you read about OOP in general may not apply or may work a little differently.

I know the extend keyword it just now has access to properties of thing it extends. What exactly is React.component?

React.Component is just a class defined in the inner workings of React with methods and properties that React needs to function correctly.

Constructor was used to create objects right? What are we doing here what’s props? What exactly does render do does it display something to the page?

The concept of a constructor is common with OOP. You have the class which is the blueprint but you need to create instances of that class. When you create each instance, you may want to pass in data to set it up. For example, if I have a class called Person, maybe I want to pass in name and age when I create and instance:

const bobRecord = new Person('Bob Appleton', 47);
const bettyRecord = new Person('Betty Bananason', 38);

The constructor is where you would take those passed in values and assign them to their appropriate values. That is the purpose of the constructor - setting up the initial state of that instance correctly.

Or course in a React class you don’t really need to do that, you just need to call the super class (referring to the parent class). There are other setup things you can do but to be honest, in modern React patterns you almost never use a constructor, just allowing the default one by React. And in reality, you usually don’t use classes in modern React patterns - but it’s still important to learn them.

What are we doing here what’s props?

I’m not sure I understand. You need the props to pass into the super. You also might need it if you want to set up the instance of that component with something coming from props (but there are other ways to do that). As I said, I almost never write class components, and when I do, 99% of the time I don’t need a constructor. You need it to call super (which can be done by the default constructor if you don’t give it one), to initialize state (which can be done directly as a class property), and to bind this to our methods (but that isn’t necessary if you use arrow functions for your methods). For me, 99% of the time, I don’t need an explicit constructor.

I think this pattern is a little old fashioned. But again, it is important to learn because you will have to work on code written this way.

My basic understanding of react component is that it’s just like a function that returns HTML. Am I wrong?

Yes and no. First of all, they don’t return, HTML, they return JSX - an important distinction.

And there are two kinds of components - class and functional. The class based one is what you are learning here. There is also a functional component (probably a lot more common nowadays). That is just a function that returns JSX. It works slightly differently, but it does basically the same thing - it’s just a little smaller and faster.

const class ClassHowdy extends Component {
  render() {
    return (
      <p>Howdy, {this.props.name}!</p>
    );
  }
}

or

function FunctionalHowdy(props) {
    return (
      <p>Howdy, {props.name}!</p>
    );
}

or, using some ES6 sexiness:

const FunctionalHowdy = props => (
  <p>Howdy, {props.name}!</p>
);

or even:

const FunctionalHowdy = ({ name }) => <p>Howdy, {name}!</p>;

Wow all of this is super confusing stuck in these 1-2 lessons for 45 minutes and worry that I won’t be able to go further.

Yeah, this is tough stuff. And FCC does kind of breeze through things. I would recommend taking little side trips as necessary to check out certain ideas and concepts that are holding you back. And don’t be afraid to ask.

But yeah, React is weird at first. It takes a while to learn to “think in React”. But I think it is worth it - it is a very elegant and powerful system.

2 Likes

Thank you. I just completed the video and many things became more clear. The article seems kind of long so will go through it later on.

1 Like

Thank you for such a detailed answer and motivation. Might have to use other resources too like the video above and the article.

Yeah, I learned React before FCC had the React tutorial section. I did it largely by watching youtube videos, mostly people building simple React apps. After that, I got into the habit of reading through the excellent documentation, a few pages a night.

I think it’s something you need to do and struggle with a bit before you start to understand it - which is itself a gradual process.

1 Like

Hi @ankurchaulagain !

When I first went through the react section, I struggled with the lessons too.
Supplement these lessons with other resources.

As mentioned, the documentation is really good.
Also, there are a lot of great video resources to look at.

The key here is to just take your time.

It took me some time to start getting comfortable with react.
In the beginning I didn’t like it at all but now I love it.

Just take it slow.

What helped me was to build my own projects after the front end certification.

Hope that helps!

1 Like

Don’t get hang up on React and Redux stuff. You don’t need them to pass the five projects. It really takes time to understand and appreciate React / Redux. I suggest you take a look at the first two projects Random Quote Machine and Markdown Previewer. Study /review enough HTML, CSS, and Javascript until you feel comfortable enough to try implementing them. Or you could just start implementing them and see how far you can go.

Just learning how to integrate three pieces HTML, CSS, and Javascript into a working whole is difficult enough, so learn this first. Then, you can come back and try React. Having some level of experience in developing web apps using just HTML, CSS, and JavaScript will make you more receptive to appreciating and understanding why and how of React.

1 Like

Thank you so much guys. Yesterday I was jumping from bits of one video to another and after a couple of videos, two made it seem so simple. I guess I was just complicating it.

I watched one from Travesy Media(the video is two hours long and I have’t watched it all but just the first half an hour made everything much clearer and seem simple/not as complicated as I thought.) React JS Crash Course 2021 - YouTube

And just now I was watching this video crash course from the channel Programming with Mosh. It’s a 2.5 hour course I guess because of watching the Traversy Media course yesterday for half an hour, I felt like the first five minutes explained React very well. I think watching one of these for the full length will make it easier for me to go through FCC after all its just 2 hours. React JS Crash Course 2021 - YouTube

@staranbeer @kevinSmith @jwilkins.oboe @twotani

1 Like

Thanks for the link thinking about going through this in it’s entirety like say in 5 days 2 hours every day. I think I’ll have a solid grip on things if I do that then the 47 lessons on FCC will be a breeze but wondering whether do I really need to go through such a long video, it will lengthen the certification time by a lot, it could take 10 days as well. Then coming back and finishing the rest stuff. On an average I have been completing the certifications in 35 days or so, so now questioning whether I should go through this 10 hour video which might take 5-10 days(no doubt it’ll be worth it on the long run). I think I’ll go through this.

from the comments: Freecodecamp be like “Here is how to build Boeing 737 in 100 hours”. :grinning:

The video I linked covers other concepts that are not in the FCC curriculum like custom hooks, context API, and React Router.

The video also shows you how to setup react in your local environment and structure your folders.

When you start building projects outside of a class, then that video will be really helpful.

Does he teach redux too?

Do you suggest going through it now? Or would you rather suggest going through any other shorter tutorial say of 2 hours from others like Traversy media or one of 5 hours that freecodecamp youtube channel itself has?

You don’t need to go through all of the video suggestions all at once.
They are just good resources to have and reference when you need to.

I would just keep moving through the lessons and reference the video material when you get stuck.

When you get to the projects, you don’t need to use redux for any of them.

I would suggest just building them with react and then you can add redux later on if you want to.

I think so. It might be on the freecodecamp youtube page.

1 Like

Just as an FYI: you don’t need Redux, it’s not tied to React in any way, it has specific uses. For a while, back around 2016-ish, it seemed like every single tutorial assumed you needed Redux. This wasn’t necessarily a good thing, and it was often just cargo cult programming. (also, thinking about this, it seems like I was advising something like this in your other thread, which isn’t what I meant, I just phrased my reply badly)

What you’ll find with newer tutorials is that they will tend not to use Redux. Redux is very useful, and is actually very simple once you grok it, but it adds a significant level of complexity to the codebase of your applications. In a situation where it’s useful, then that up-front complexity leads to much simpler code in other parts of the application. But don’t assume that it’s something you need to know. Lots of codebases use it, but many, many more codebases do not. Lots of places where older tutorials automatically reach for it: they could instead use local component state, or React’s Context API. Just learn to use React first. There is likely to be a point in the future where you are constructing an application and think “oh, I want all my state in one place so it’s easier for me to think about”: at that point maybe Redux is a library that would work really well. But up until then, it probably isn’t something that’s really important to know.

This article is from the guy who wrote the Redux library (note that it’s from 2016): You Might Not Need Redux. People often choose Redux before they… | by Dan Abramov | Medium

Edit: just as a final note on this. Older tutorials for Redux will describe very elaborate and verbose boilerplate to make it work (none of which, technically, is needed, but is done to provide consistency more than anything else). If you do want to learn to use the library, use up-to-date tutorials that leverage the toolkit redux now provides (unsurprisingly called redux-toolkit), which dispenses with most of that boilerplate. I seriously can’t stress this enough

1 Like

Thanks for the reply guys. I will just go along the FCC course and go to videos as necessary that you provided links to if I find anything difficult to understand or ask here.

I just asked that question because Redux was part of FCC course.

Yeah, there’s nothing “wrong” with learning redux.

I agree with Dan that React and Redux are not tied together in any way, but they do go together very well. Redux was invented by a React engineer for use with React - so they work very well together. But the actual Redux package has nothing to do specifically with React - you have to use the react-redux package to connect them. So, React works just fine without Redux and vice versa. And as pointed out, we shouldn’t automatically assume that we need Redux for every React project. And as pointed out, I think we are seeing it less and less as “redux frenzy” wears off and other options become available. It is still good to learn, but don’t assume that they two have to go together.

I don’t think Dan was trying to discourage you from learning or using Redux, just trying to provide some information, hence the “FYI”.

1 Like

As @kevinSmith says, I wasn’t trying to discourage you! I just worry when people start with React and assume they need Redux as well, that was just the impression I got (sorry!). The FCC curriculum is a few years old, and it actually made total sense to include Redux as a central part of the React course, as it was ubiquitous at the time – it would be almost guaranteed that if you encountered a React codebase it would include Redux. Not so much now, still common but nothing like as much as it was.

IME from watching people try to grapple with it as beginners, it tends to be fairly confusing/frustrating: there’s an awful lot of boilerplate code for what seems like no benefit. Whereas if you come to it later, when you are writing some application and realise you need some central place for state, it makes a lot more sense.

3 Likes

Just to chime in: One of the main reasons freeCodeCamp teaches Redux - in fact, one of the main reason freeCodeCamp teaches the MERN stack - is because the codebase is built with it.

So, if you ever plan on contributing to the client-side of the codebase, it is useful to learn Redux. anyway…

3 Likes

Ah, that’s an extremely good reason for it being in there, that’s very obvious in retrospect!

2 Likes