Hey everyone, in this article, I am going to explain some fundamental building blocks of react, which is essential to work with react.

Here are the following topics I am going to explain in this blog: Components, JSX, and Props.

What is JSX?:

JSX is a syntax extension for JavaScript that was introduced by React. It enables developers to write HTML-like code, called JSX within their JavaScript code. These JSX elements look similar to HTML tags but are JavaScript expressions. JSX combines the power of JavaScript with the expressiveness of HTML, providing a concise and intuitive way to define the structure and content of React components (we will talk more about components later in this article).

Now the question is why use JSX when you can create apps using vanilla JS DOM, here is why JSX makes it easier to build apps using React :

1. Declarative UI: JSX allows developers to declare the desired structure and appearance of the user interface in a declarative manner. Instead of imperatively manipulating the DOM, as done with traditional JavaScript, JSX lets you describe what you want the UI to look like, and React takes care of updating the actual DOM efficiently.

2. JavaScript integration: With JSX, you can seamlessly integrate JavaScript expressions within the HTML-like syntax. This enables dynamic rendering of content, conditional rendering and iteration over data, making it easier to build complex UI components that respond to data changes or user interactions.

3. Component-based Architecture: JSX fits perfectly into React's component-based architecture. Each JSX element represents a React component, allowing for modular and reusable code. Components can be composed and nested within each other, promoting code reusability and maintainability.

Example of JSX usage: Let's take a look at a simple example to understand how JSX works within a React component:

import React from 'react';

const MyComponent = () => {
  const name = 'John Doe';
  return (
    <div>
      <h1>Hello, {name}!</h1>
      <p>Welcome to my blog.</p>
    </div>
  );
};

export default MyComponent;

In the example above, the JSX element <div> represents a container element. The contents within the opening and closing tags are JSX expressions. The curly braces {name} allow us to embed the value of the name variable within the JSX element.

Benefits of JSX:

1. Readability: JSX resembles HTML, making it easier for developers familiar with web development to understand and work with React code.

2. Performance: JSX is compiled to optimize JavaScript code by tools like Babel. The compiled code is efficient and performs well, thanks to React's virtual DOM diffing algorithm.

3. Tooling Support: JSX is widely supported by various development tools, including code editors, Linters, and build systems. These tools provide syntax highlighting, linting, and error checking, enhancing the development experience.

Components in React:

Components in React are reusable, self-contained building blocks that encapsulate specific functionality and enable the creation of User Interfaces. They are fundamental units used to structure and organize React applications.

There are two main types of components in React:

1. Functional Components: Functional Components, also known as stateless components, are defined as JavaScript functions. They receive props(properties) as input and return JSX elements that define the structure and content of the component. Functional components are simple, light-weighted, and recommended for most use cases.

Example of Functional Components:

import React from 'react';

const FunctionalComponent = (props) => {
  return (
    <div>
      <h1>Hello, {props.name}!</h1>
      <p>{props.message}</p>
    </div>
  );
};

export default FunctionalComponent;

1. Class Components: Class components, also known as stateful components, are defined as JavaScript classes that extend the React.Component class. They have additional features, such as lifecycle methods and the ability to manage state. Class components are useful when you need to manage complex states or perform more advanced operations.

   Example of class component:

    import React, { Component } from 'react';
   
    class ClassComponent extends Component {
      render() {
        return (
          <div>
            <h1>Hello, {this.props.name}!</h1>
            <p>{this.props.message}</p>
          </div>
        );
      }
    }
   
    export default ClassComponent;
   

   Both functional and class components can be used interchangeably within a React application. Components can be composed together to form complex user interfaces by nesting and reusing them as necessary.

   As of 2023, you should always use Functional components when building new applications using. After the release of Hooks in React, Class components are no longer used in developing new apps.

Components in React promote modularity, reusability, and separation of concerns. They make it easier to manage and update different parts of the application independently, resulting in more maintainable and scalable code.

Props:

In React, props (short for properties) are the way to pass data from a parent component to it's child components. They are a mechanism for communication between components and allow for dynamic rendering of content based on the provided data.

When a component is used in JSX, it can receive props as attributes. These props are accessible within the component and can be used to customize it's behavior and appearance. Props are read-only and should not be modified within the component itself.

Here's an example of passing props to a components

import React from 'react';

const Greeting = (props) => {
  return <h1>Hello, {props.name}!</h1>;
};

const App = () => {
  return <Greeting name="John" />;
};

export default App;

In the above example, the Greeting component receives a name prop with the value of "John". Within the component, props.name is used to display the customized greeting.

Props can also be passed dynamically based on variables or values from the parent component's state. Here's an example of passing props dynamically:

import React, { useState } from 'react';

const Greeting = (props) => {
  return <h1>Hello, {props.name}!</h1>;
};

const App = () => {
  const [name, setName] = useState('John');

  return (
    <div>
      <input
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
      <Greeting name={name} />
    </div>
  );
};

export default App;

In this example, the App component maintains a name state using the useState hook. the value of the input field is bound to this state, and any changes in the input field will update the name state and trigger a re-render of the Greeting component with an updated name prop.

Props provide a flexible way to customize and pass data to components in React. They enable component reusability and facilitate the composition of complex user interfaces. By leveraging props, you can create dynamic and interactive components that respond to different data inputs.