💡 Learn from AI

React Fundamentals

React Components

React Components are the building blocks of your application's UI. They are reusable units that can work independently or together to form a more complex UI. In React, components are typically written in JavaScript and are responsible for rendering HTML onto the page.

There are two types of components in React: class components and functional components. Class components are created using a class that extends the React.Component class, while functional components are created using a function that returns JSX. Class components are recommended for complex components with state and lifecycle methods, while functional components are recommended for simple components that don't require state or lifecycle methods.

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

function Button(props) {
  return (
    <button onClick={props.onClick}>{props.label}</button>
  );
}

To use this button component, you would import it into another component and pass in the necessary props. For example:

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

function App() {
  return (
    <div>
      <Button label='Click me!' onClick={() => alert('Button clicked!')} />
    </div>
  );
}

This would render a button that says 'Click me!' and alerts 'Button clicked!' when clicked.

To learn more about React components, check out the official React documentation at

https://reactjs.org/docs/components-and-props.html

.

Take quiz (4 questions)

Previous unit

JSX Basics

Next unit

Props and State

All courses were automatically generated using OpenAI's GPT-3. Your feedback helps us improve as we cannot manually review every course. Thank you!