Explore our extensive collection of courses designed to help you master various subjects and skills. Whether you're a beginner or an advanced learner, there's something here for everyone.
Join us for our free workshops, webinars, and other events to learn more about our programs and get started on your journey to becoming a developer.
For all the self-taught geeks out there, here is our content library with most of the learning materials we have produced throughout the years.
It makes sense to start learning by reading and watching videos about fundamentals and how things work.
Data Science and Machine Learning - 16 wks
Full-Stack Software Developer - 16w
Search from all Lessons
Curated list of small interactive and incremental exercises you can take to get better at any coding skill.
Curated section of projects to build while learning with simple instructions, videos, solutions, and more.
Guides on different topics related to the technologies that we teach in our courses
React.js separates your code into little pieces called Components which can be created/defined as a class or as a function. Each component is like a smaller React app that has its own logic and has a final purpose, which is to display or render something (e.g: a bootstrap navbar, a dropdown list, a modal, a dynamic form, an image gallery, subscribe form), almost everything can be designed and coded as a React Component. To do that every React component needs to have a
return statement that returns some JSX code (HTML + embedded JS).
☝️ This is a class component. We strongly recommend you to use functional components and hooks instead because class components are legacy.
Once you have composed a component, you can display it using tags like this:
Sometimes a component needs dynamic information to display. For example, we need our
<Navbar /> component to show the list of available links and the brand’s logo. We can include that information within the call of the
<Navbar /> component just the same way as we do in HTML tags.
In this example, we are passing an array of menu items and a logo URL to the NavBar component that we have just declared above.
Now, within the
<Navbar /> we can use those values (which are delivered through the props variable) to render the information given.
And, lastly, you should tell React where to render that component into the DOM.
We call class components in React stateful because they come with a global
state object (shared within the same component only) which has the sole purpose of storing the data needed to render the component. One obvious use of the state object would be if, for example, we have a form with input fields that need to be filled by the user. The data entered by the user will need to be saved somewhere in order to be used. The
state will be that place.
In another example, let's say that you are developing a
<Clock /> component that has to print the current time every second. That means that our component will need to re-render every second.
In order for the state to keep a web page up-to-date, it is programmed to re-render the DOM every time it is modified. So you can probably already see how you can take advantage of this feature by keeping your current time inside the state and reassigning it to the most current time every second. Like so:
👇 The following demo updates the current time every second:
The state is always inside of the
constructor() method of the class components and is expressed as a plain JS object literal.
When speaking about modifying the value of the state, you have to remember that the state should not be mutated directly. It should only be modified by calling the specially designated method
this.setState(). In it, you will have to pass a new/updated state object that will replace the previous state values. For example:
State updates happen in an asynchronous manner, and directly mutating the state creates an opportunity for values to be incorrectly updated and cause data inconsistencies in your web application.
As it was mentioned above, the place to initialize your component state is in the constructor method.
The constructor of each component gets called automatically very early in the application's runtime – even before your website has been mounted.
If you do not need to use the state, you do not need to explicitly implement a constructor method, and in some examples, you will see this method missing. However, if you will need to use the state, it is extremely important to initialize its values; otherwise on the first render your application is going to return your state variables as undefined.
You will also need to implement your constructor method if you will be using any props with the
super(props) method. That allows you to inherit from the superclass
React.Component of which every React class component is a subclass.
Here is a complete React class-component template for reference:
☝️ This is a class component. We strongly recommend you use functional components and hooks instead because class components are legacy.
Functional components are simplified React components originally intended for presentational purposes. For that reason they are traditionally stateless: they have no state of their own. That allows them to be lighter, faster, and easier to write.
Functions' statelessness was addressed with React 16.8.0 which introduced the ever-so-popular React Hooks. Since then the
useState hook allows us to reproduce state behavior in our functional components:
For example, we can pick any variable and modifier like this:
So React Hooks effectively changed the nature of the original React functional components, and now both types of components are very similar in the things they can do. Because of that, we strongly encourage you to use functions and hooks as much as possible.
You can switch from one type of declaration to the other without any pain! Here is a comparison of both types of components:
As a Function: Very simple declaration and usage. The only purpose of the function is to return an HTML with whatever the component is supposed to display when placed on the website.
As a Class: It is more complex, the class declaration needs to inherit from React.Component and contains a lot more functionalities that let the developer customize the component logic, like life-cycle methods and the state. Please consider that you can create as many additional class methods as you like.
As a Function:
Each variable should be declared using the
useState Hook inside the function.
As a Class:
The state should be declared on the constructor and then use the function
this.setState to update it.
As a Function :
Properties are received as the first function parameter like this:
As a Class :
The properties are inside the class variable
this.props, and you can reference it anywhere like this:
As a Function:
useEffect hook for the life cycle. More information here.
As a Class:
You have all the methods available, with these being the most important ones: Constructor, ComponentDidMount (or useEffect for Hooks), ComponentWillUnmount (or useEffect for Hooks), etc.
You can declare inside your component class those methods, and they will magically be called by React at the right time, just like this:
🔗 Here you can find more information about all the React JS lifecycle methods.