Introduction to React: Understanding the Basics

I keep talking about the other parts of React, but failed to post about: What is even React?

Can I eat that?

No. You cannot. But it can make you sob uncontrollably. I’m kidding.

So what is React?

React is a JavaScript library designed for building web applications known as single-page applications. These applications load a single HTML page and dynamically update content in response to user interactions without reloading the entire page.

React enhances the development process of web applications by enabling the division of code into reusable components.

As I have said in my previous posts, you can visualize those components as reusable blocks of code that you can use to build your app/website.

E.g. index.jsx

function Welcome() {
 
return
 
"Welcome to React"
;
}

What is a Component?

Think of it as a function that returns that you want to be showing on the screen just like the image above!

In React, we often use the ES6 syntax to define components due to its modern features.

Although the styles differ, both approaches essentially create a function that returns content for React to render.

index.jsx

const WelcomeToTheNewWorld 
= () =>
 {
 return "Hello, new world";
};

function
 WelcomeToTheOldWorld() {
 return "Hello, old world";
}

If you’re a foodie, think of the component like a recipe. It instructs React what to “cook” (or display). You can reuse that recipe whenever it’s necessary.

Thus, whatever we return will be displayed once the component is rendered.

index.jsx

const Welcome = () => {
  
return
 
"I'll be displayed"
;

};

One of the best way to think about components as well: it is custom HTML tags but was bitten with super radioactive spider (yes, yes. I’ve been obsessing over Spiderman lately).

The function’s name defines the component which allows you to reuse it just like an HTML tag―just with the added functionality and flexibility.

index.jsx

const 
MyComponent
 = () => {
  return "I'm a component";
};

How to tell Components apart from HTML

Components typically start with an uppercase letter unlike a regular HTML tag. Also, unlike the normal JavaScript functions, React components are CAPITALIZED.

In JavaScript: myComponent.

In React: MyComponent.

index.jsx

const 
MyComponent
 = () => {
  return "I'm a component";
};

In React, components aren’t limited to outputting just plain text; they can also return HTML elements.

For example, you can design a component to output an HTML heading containing specific text.

index.jsx

const WelcomeComponent = () => {
  return 
<h1>
Hello, world
</h1>
;
};

What you’re looking at is JSX, which resembles HTML but is not the same. JSX is a unique syntax that React utilizes to allow the writing of HTML-like code within JavaScript.

index.jsx

const WelcomeComponent = () => {
  return 
<
h1
>
I'm an imposter</h1>;
};

Although JSX isn’t actual HTML, it resembles and behaves similarly to HTML. If you’re familiar with HTML, you’ll find JSX quite intuitive.

React transforms JSX into genuine HTML, allowing your browser to interpret and display it as it would traditional HTML.

index.jsx

const TextComponent = () => {
  return 
<p>
Welcome
</p>
;
};

In Summary

1. You create a React component by writing a JavaScript function that returns JSX
2. JSX: a syntax that looks like HTML but is actually JavaScript

Try out React for yourself! It will definitely save you lines and lines of code in the future (it’s also a great way to get you sobbing. LOL I’m joking).

---