Sometimes we come across tutorials that seem great because we're building something, and that's ok.
The main issue with some of these tutorials is that they are focused on you building something, and not actually, teaching you what's going on inside of what you've built, so at the end of an udemy course you might find yourself having coded 3 full stack applications and have no idea how to manipulate an array.
I'll try to take a different approach with this article and instead of focusing on building, we're going to dissect something which was already built following examples from www.reactjs.com and www.w3schools.com
I'm going to explore the following questions.
What is a component? (and what is going on inside it)
What are the props? (and what is this)
What is the state?
A component is a piece of code that is (ideally) reusable code, that is (again, ideally) independent from the other pieces of code that you wrote.
This is a component:
Now, let's break down what's going on in here.
On line 1 we're using the ES6 Class syntax to define the "TodoList" class, that is extending the React.Component which basically means that TodoList class is a React.Component child, therefore inheriting React.Component's methods.
On line 2, we're looking at a render function, that (on line 3) *** returns*** HTML.
Line 4 is an UL opening tag, that closes on line 8, and line 5 and 6 are the display of JSX's power.
Coming back to line 5 and 6.
We're going to talk about
props soon, but for now you just need to know that we're mapping over the this.props.items array and returning a LI html element that has a key and a content of
On this example you can see how there are two components, Car and Garage. If we're thinking about the hierarchy of things, a Garage can store Cars so we can say that Garage is the parent of Car.
In the Garage component you can see how the
<Car /> component is invoked and there's the prop passed in as brand="Ford" which is essentially a HTML attribute.
The Car component can access it through
props and in our case, through
this refers to the object it belongs to so
this.props.brand could be pseudocoded like:
this object . I want these
props . named
The state of an object refers to what that object is like, and its attributes.
A state of a Car object can be an object that holds some attributes such as
wheels:4 and so on.
The magic of it is the fact that we can change this information and update it in the user view without much trouble.
We could theoretically build a function that detects changes in the wheels number and when it's less than 4, we could change
false. However we'd have to do it through a function named
setState so the code will look like this:
Here is an example of how the Car's color will be changed through setState, using an event listener bound to a button:
I hope that this bite-sized article made you curious about what's going on in some simple React code.
For more information please check the https://reactjs.org/ and really work your way through it. Study properly, don't just copy the code and you'll find yourself progressing way faster than coding along from udemy or youtube.
All the best!