Components in React

There are two main ways into writing components. We could either use a class or function to define one. Components are basically functions that contain a mixture of JavaScript and HTML inside it. There are 3 important parts for a component. Import the desired files and node packages, define the component, and export that component to be able to use in others.

Let us start with the class component. Always import “React”, this is a must for every component that you create. The render() will render the HTML part of the component and display it on the browser. Return will be the HTML part that you specifically want to show. JavaScript is allowed to be typed inside of the render and return as well. However, you must type JS inside of “{#code}”.

Extends is a keyword that lets the new class “Dragon” inherit attributes and functions from ‘React.Component’.

Here we will explain a function component. A difference between between a class component and a function component is the way to access properties. Inside of the class component we used “this” keyword then “.props”. Inside of a function component, we pass “props” as an argument. We can then access it inside anywhere in the component. State is a way for us to be able to set values to objects or variables. This is feature of using a class component. On the other hand function components don’t have access to state. However, we can still access variables from parent components if we pass them down through properties. “Props” or properties allow us to pass down data from the parent component into the child component.

Now in the functional components there is a way to use state inside of it. We can create Hooks! This allows us to pass a state object through properties into a functional component. Which then allows us to create and update the variables and objects that are inside it.