Components and JSX

React is a component-based library, meaning that user interfaces are built using components. A component is a reusable piece of code that can be used to create user interfaces.

JSX is a syntax extension for JavaScript that allows you to write HTML-like syntax directly in your JavaScript code. It makes it easier to write and understand the structure of your components.

Here is an example of a React component using JSX:

1import React from 'react';
2
3function Greeting() {
4  return (
5    <div>
6      <h1>Hello, World!</h1>
7      <p>Welcome to the world of React!</p>
8    </div>
9  );
10}
11
12export default Greeting;

In the example above, Greeting is a functional component that returns JSX code. The JSX code represents the structure of the component's UI. It contains HTML-like tags such as <div>, <h1>, and <p>.

By using the import statement and export default, the component can be imported and used in other parts of your application.

Components and JSX are fundamental concepts in React, and understanding them is crucial for building React applications.

xxxxxxxxxx

// Components and JSX

​

// React is based on the concept of components.

// A component is a reusable piece of code that can be used to create user interfaces.

​

// JSX is a syntax extension for JavaScript and stands for JavaScript XML.

// It allows you to write HTML-like syntax directly in your JavaScript code.

// JSX makes it easier to write and understand the structure of your components.

​

// Here is an example of a React component using JSX:

​

import React from 'react';

​

function Greeting() {

  return (

    <div>

      <h1>Hello, World!</h1>

      <p>Welcome to the world of React!</p>

    </div>

  );

}

​

export default Greeting;