Intro to React, Components and Props

Intro

React is a popular JavaScript library for building user interfaces. It allows you to build reusable components that encapsulate the logic and rendering of a particular part of your application. In this blog post, we’ll dive into the concepts of components and props in React, and explore how they work together to create powerful UIs.

Components

In React, components are the building blocks of your UI. A component is a reusable piece of code that defines how a part of your UI should be rendered, and how it should behave when certain events occur. Components can be simple, such as a button, or complex, such as a search bar that allows users to filter through a large data set.

There are two types of components in React: functional components and class components. Functional components are defined as functions that take in some data (also known as props) and return some JSX (JavaScript XML) code that represents the UI element. Class components are defined as classes that inherit from the React.Component class, and provide additional functionality such as state management.

Here’s an example of a simple functional component that renders a button:

import React from 'react';

function Button({_props_}) {
  return (
    
   _ some label_
    
  );
}

export default Button;

export default Button;
In this example, the Button component takes in a props object as an argument, which contains two properties: onClick and label. The onClick property is a function that should be called when the button is clicked, and the label property is the text that should be displayed on the button.

The return statement in the Button function contains JSX code that defines how the button should be rendered. The onClick property is set to the onClick function provided in the props object, and the label property is used to render the text on the button.

Props

Props are short for “properties”, and are a way of passing data from a parent component to a child component. In the example above, the Button component takes in two props: onClick and label. When the Button component is used in another component, the parent component can pass in the values for these props, like so:

import React from 'react';
import Button from './Button';

function App() {
  function handleClick() {
    console.log('Button clicked!');
  }

  return (
    

      
    
  );
}

export default App;

In this example, the App component is the parent component, and it’s rendering the Button component as a child component. The onClick prop is set to the handleClick function defined in the App component.

When the Button component is rendered by the App component, the prop is passed in as an object,changing the Component button.js to this:

import React from 'react';

function Button({onClick}) {
  return (
    
     Click me!
    
  );
}

export default Button;

The Button component can then use these props to render the button with the correct text and behavior.

Conclusion

In this blog post, we’ve explored the concepts of components and props in React. Components are the building blocks of your UI, and can be either functional or class components. Props are a way of passing data from a parent component to a child component, and are used to customize the behavior and rendering of the child component.

Understanding components and props is essential to building powerful UIs in React, and I hope this makes understanding React a little easier. Till next time…..