Getting to Know JSX and Babel

In this tutorial, we will explore the basics of JSX and Babel, two fundamental tools that make working with React smoother and more intuitive. This tutorial will help you understand how JSX simplifies creating user interfaces and how Babel transpiles this code into JavaScript that browsers can understand. This content was created in 2016, and some critical updates are noted as comments to reflect modern best practices.

What is JSX?

JSX is a syntax extension for JavaScript, which allows you to write HTML-like code in your JavaScript files. It makes your code more readable and intuitive by blending HTML tags with JavaScript logic. Instead of creating elements with React.createElement(), JSX enables you to use syntax similar to HTML.

Here is an example of JSX:

import React from 'react';

const element = <h1>Hello, world!</h1>;

In this example, we create an h1 element using JSX, making the code cleaner and easier to understand.

Critical Update (2024): Modern React encourages the use of functional components with React Hooks for managing state and side effects, as opposed to older class components.

How JSX is Transformed

Browsers do not understand JSX directly, as it is not valid JavaScript. Therefore, JSX must be transpiled into JavaScript code that the browser can execute. This is where Babel comes in.

Using Babel to Transpile JSX

Babel is a JavaScript compiler that converts modern JavaScript and JSX syntax into a form that browsers can understand. This makes it possible to use the latest features of JavaScript and React while maintaining compatibility with older browsers.

Here’s how Babel transpiles JSX into JavaScript:

JSX:

const element = <h1>Hello, world!</h1>;

Transpiled JavaScript:

const element = React.createElement('h1', null, 'Hello, world!');

This transpiled code is what the browser will eventually execute.

Setting Up Babel

To work with JSX, you need to set up Babel in your development environment. Below are the steps:

1. Install Babel Dependencies

   • You need to install Babel and its presets to transpile JSX. Use the following command to add Babel to your project:

     npm install @babel/core @babel/preset-react babel-loader --save-dev
     

2. Add Babel Configuration

   • Create a .babelrc file in the root directory of your project to configure Babel:

     {
       "presets": ["@babel/preset-react"]
     }
     

Critical Update (2024): Many modern React setups, such as Create React App or Vite, come pre-configured with Babel and Webpack, eliminating the need for manual setup.

Practical Example: Using JSX with ReactDOM

To render a JSX element, you need to use ReactDOM. ReactDOM is responsible for rendering your React components to the actual DOM in the browser.

Here is an example of how to use JSX with ReactDOM to render an element:

import React from 'react';
import ReactDOM from 'react-dom';

const element = <h1>Hello, world!</h1>;

ReactDOM.render(
  element,
  document.getElementById('root')
);

• ReactDOM.render() takes a React element and renders it to the DOM, in this case to the element with the ID root.

Critical Update (2024): The ReactDOM.render() method has been replaced with React 18’s createRoot() API for improved performance and features like concurrent rendering.

Conclusion

This tutorial covered the basics of JSX and Babel, providing you with the foundational knowledge to start building React applications. JSX makes your code cleaner and more intuitive, while Babel helps convert that code into something the browser can understand.

As React has evolved since 2016, consider using modern tools like Create React App, Vite, and React Hooks to streamline development and make your codebase easier to manage.

For more tutorials and to continue your learning journey, visit the full course at 02geek.