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.
