JSX in React

Components are the most basic building blocks of a React app. They are bricks, smallest unit but each has its purpose to build a strong building. We will start with learning what are components, how can we create them and how are they different from raw HTML.

Understanding Markup rendering

Think of a web page with following content

1<div>
2  <h1>First React Component</h1>
3  <p>Things I will learn today.</p>
4  <ul>
5    <li>What is React?</li>
6    <li>JSX</li>
7    <li>Components</li>
8    <li>Props</li>
9    <li>State</li>
10    <li>Hooks</li>
11  </ul>
12</div>
13

In HTML, we put all this in a .html file and our browser just renders that without any issue. That’s what browsers are optimized for. They take html files and renders them.

HTML file —> Browser —> Content on web page

We don’t care about how browser will do that, all we care about how we structure the code, if it has any error or not and rest browser will handle. It removed all its tags, apply any default styling or anything.

The reason I am explaining all this is because this is what React complier will do. It will convert all JSX to HTML.

JSX —> React compiler —> HTML

JSX

Now, traditionally you will have your interactivity inside a html file via javascript. For example, in an HTML page, you can add javascript directly to the HTML file to make the page interactive. This is an example below:

1<button onclick="alert('Hello World')">Click me</button>
2

here, the button is clicked and the alert is shown.

But in React, you will not use javascript directly to make the page interactive.

Instead, you will use JSX. Here is the same example in JSX:

1<button onClick={() => alert('Hello World')}>Click me</button>
2

here, the button is clicked and the alert is shown.

You would be thinking, they looks kinda same. Well, that’s the point here. JSX is a wrapper around HTML. To give HTML more powers.

If you are curious about onClick, in React, onClick is an event handler property that allows you to specify a function to run when a specific element (like a button) is clicked. In vanilla JS, we just use onclick. More about those in the future chapters.

Now, let’s take that to next step. React componenets are designed to be reusable. Let’s understand by an example:

we have a navbar component and we want to use it in multiple pages. So, we can create a navbar component and use it in multiple pages. <Navbar /> here, the navbar is created and used in multiple pages.

1// about.tsx
2<div>
3<Navbar />
4<p> this is an about page. </p>
5</div>
6
7// contact.tsx
8<div>
9<Navbar />
10<p> this is a contact page. </p>
11</div>
12

Write now we don’t care about how <Navbar /> component looks like, all we care about is we can reuse it multiple places.

And if you notice, just like regular HTML tags like h1, p etc, you can use React’s components.

Your first React component

It is the time to create a list of favourite fruits, which you can show on a page.

1function FavouriteFruits() {
2     return (
3	     <div>
4	       <li>Apple</li>
5	       <li>Kiwi</li>
6	       <li>Oranges</li>
7	      </div>
8     );
9 }
10

You will see the list of fruits being rendered on the page. This is the simplest React component you can build.

But, it is pretty static. How can we make it dynamic? Maybe list of items coming from an API, how can you fetch that data? We will learn all that, but for now, its important to understand how a basic React component works.

Now start the second part:

Export Components

When you create your component, usually you put them inside a folder which looks something like this:

1your-project-name/src/app/components/MyComponent.tsx
2

and, obviously you will have to export this component so other pages can use it.

Before showing you how to do that, let’s just recap how we variables export and import in nodejs.

Let say we have some firstName and lastName variables:

1// Define the variables for first name and last name
2const firstName = "John";
3const lastName = "Smith";
4

to export them, we use module.exports method given by nodejs.

1// Export the variables
2module.exports = { firstName, lastName };
3

This code snippet shows how to declare variables and after that how can we export them. The module.exports statement makes these variables available for import in other parts of the program, which is crucial for modular development where different parts of an application are kept in separate files.

However, we will use modern es6 syntax to export our variables or functions. Which I think is an easier way.

1// Export the variables
2export const firstName = "John";
3export const lastName = "Smith";
4

and in case you have a function to export, you can do that as well:

1export default function Test() {
2  return "Hello, world!";
3}
4

and as we seen before, a React component is actually a JavaScript function.

So, in case you have a component:

1export default function Test() {
2	return(
3		<div>
4			<p>Hello, world!</p>
5		</div>
6
7		)
8}
9

we will use the export default to export our components.

You would be thinking, why we can’t we just use export keyword, rather using export default? Well, to understand that, let’s see how using default helps us in importing components.

Import Component

To import any component, we will using nodejs syntax of importing variables or functions.

1//test.js
2export default function Test() {
3  return "Hello, world!";
4}
5
6//index.js
7import Test from './test.js'
8

As you see, in test.js, we just have one function we are importing, if we remove the default keyword, we would have to import like this:

1//test.js
2export default function Test() {
3  return "Hello, world!";
4}
5
6//index.js
7import {Test} from './test.js'
8

With using default, we tell nodejs that there’s only one default export. If your file has multiple variables, objects or functions you are exporting, you would do something like this:

1//test.js
2export function Test() {
3  return "Hello, world!";
4}
5
6export const x = 5;
7
8//index.js
9import {Test, x } from './test.js'
10

It is a convention in React ( or you can say good practice), to not export multiple components from same file.

If you have multiple components, you can move them to their respective files.