Show List
Tutorials > React > Components and JSX in React

Components and JSX in React

Components and JSX are two of the key concepts in React, a JavaScript library for building user interfaces.

Components in React are the building blocks of a React application. They are small, reusable pieces of code that represent a specific part of the UI. Components can be defined as either a class component or a functional component.

Class components, as the name suggests, are defined using a class in JavaScript, while functional components are defined using a plain JavaScript function. Both class and functional components can be used to define components in React.

Here's an example of a class component in React:

class HelloWorld extends React.Component {
  render() {
    return <h1>Hello, World!</h1>;
  }
}
And here's an example of a functional component in React:
const HelloWorld = () => {
  return <h1>Hello, World!</h1>;
};

JSX, on the other hand, is a syntax extension for JavaScript that allows you to write HTML-like code in your JavaScript files. When you use JSX in your React components, it gets transpiled into JavaScript code that can be executed in the browser.

Here's an example of using JSX in a React component:

const HelloWorld = () => {
  return <h1>Hello, World!</h1>;
};
In this example, the JSX code <h1>Hello, World!</h1> is transpiled into the following JavaScript code:
 const HelloWorld = () => {
return React.createElement("h1", null, "Hello, World!"); };
So, to summarize, components are the building blocks of a React application, and JSX allows you to write HTML-like code in your React components.


Next: Props and State in React

    Leave a Comment

  • captcha text