Introduction to React ComponentsFunctional and Class Components:Functional Components vs. Class Based components
Introduction to React Components
The fundamental difference between using html, css and vanilla js and React js is the idea of components. Components are reusable independent elements of a webpage. For instance, assume that you have a sidebar or navigation pane that is present on all your webpages; using our combo of html, css, we would have to recode that element, over and over again. But with react, it’s as simple as coding it once, and then reusing that component multiple times. Another huge advantage to take into account, is the fact that components in react can be dynamic (meaning you can pass different parameters to each instance of that component using javascript, as part of the component!).
So how would we go about making these components, well that’s where a key difference exists between html and react, JSX (or TSX for typescript).
JSX is a file format invented by Meta, and almost all React code/components are written in the .jsx file format. What makes this different from a regular javascript file is that it enables the user to write javascript code, with html code, all on the same line, without the need for a separate file.
For example:
const myElement = <h1>React is {5 + 5} times better with JSX</h1>;As you can see here, there is both html (with the h1 tag) and javascript (with the {5+5}). How does the browser even understand this?, well that's achieved through a tool called Babel. Babel is basically a javascript compiler that (among other things) can convert jsx to javascript that the browser can understand.
Given the same .jsx code as above, Babel creates a new element, called myElement, it takes in 1 parameter, which is the type of element to create (in this case, it’s an h1 element), and all the content inside our h1 tag are rendered as the children of the element. Though this explanation wasn’t super detailed, it isn’t too much of a priority to understand how exactly Babel creates these elements. Now then, let’s get started exploring the 2 different types of components in React, Functional and Class components.
Functional and Class Components:
In the current React world, Class components aren’t very popular, especially after the introduction of hooks into React, so we won’t be using those a lot over the course, but we will talk about them below.
Functional Components vs. Class Based components
Class Component:
Functional Component:
Comparing both components (giving out the same info), as you can see, the functional components are significantly easier to write and doesn’t require us to write too many different calls, which results in faster render times on web pages too!.
So then why did we ever use class components in the first place. Well, Class components have 1 big advantage in terms of functionality, it supports state (which helps in taking in data), and is therefore useful in lifecycle methods (we’ll discuss this more later on!). However, the recent introduction of hook in React changed this, which means even functional components will now be able to support the benefits of class components (using hooks).
Now that I’ve tossed a lot of theory at you, let’s take a look at how to actually write jsx code!.
Copyright © 2021 Code 4 Tomorrow. All rights reserved.
The code in this course is licensed under the MIT License.
If you would like to use content from any of our courses, you must obtain our explicit written permission and provide credit. Please contact classes@code4tomorrow.org for inquiries.