Component Driven Development in React

As a Python Keras developer with over four years of experience, I’ve realized that mastering frontend development can significantly enhance the way I deliver AI-powered applications. React’s component-driven development (CDD) approach has been a game-changer for me. It allows building reusable, scalable UI components that integrate seamlessly with Python backends.

Component-driven development means building your UI from the smallest building blocks, components, and composing them into complex interfaces. This approach helps maintain consistency and speeds up development, especially when working on large projects.

In this article, I’ll share my firsthand experience with CDD in React, including practical methods and full code examples that you can use right away.

Table of Contents

What is Component-Driven Development in React?

Component Driven Development (CDD) is a methodology where you build your application starting with small, isolated UI components. Each component is self-contained with its own logic, styles, and tests. This modular approach is perfect for React, which naturally encourages building UI as components.

For Python Keras developers, this means you can focus on creating reusable UI elements that interact with your AI models or APIs efficiently.

Method 1: Build Reusable Functional Components

Functional components are the simplest way to create reusable UI elements in React. They are JavaScript functions that return JSX (React’s syntax extension).

Here’s an example of a reusable button component with props:

import React from 'react';

function CustomButton({ label, onClick }) {
  return (
    <button
      style={{
        backgroundColor: '#4CAF50',
        color: 'white',
        padding: '10px 20px',
        border: 'none',
        borderRadius: '5px',
        cursor: 'pointer',
      }}
      onClick={onClick}
    >
      {label}
    </button>
  );
}

export default CustomButton;

I executed the above example code and added the screenshot below

This button component accepts a label and an onClick handler as props. You can reuse it anywhere in your app by passing different labels and functions.

Method 2: Use Props and State for Dynamic Components

To make components interactive, you often need to manage state. React’s useState hook lets you add state to functional components.

Here’s a simple toggle switch component:

import React, { useState } from 'react';

function ToggleSwitch() {
  const [isOn, setIsOn] = useState(false);

  const toggle = () => setIsOn(!isOn);

  return (
    <div onClick={toggle} style={{ cursor: 'pointer', userSelect: 'none' }}>
      <div
        style={{
          width: '60px',
          height: '30px',
          backgroundColor: isOn ? '#4CAF50' : '#ccc',
          borderRadius: '15px',
          position: 'relative',
          transition: 'background-color 0.3s',
        }}
      >
        <div
          style={{
            width: '28px',
            height: '28px',
            backgroundColor: 'white',
            borderRadius: '50%',
            position: 'absolute',
            top: '1px',
            left: isOn ? '30px' : '1px',
            transition: 'left 0.3s',
          }}
        />
      </div>
      <p>{isOn ? 'ON' : 'OFF'}</p>
    </div>
  );
}

export default ToggleSwitch;

I executed the above example code and added the screenshot below

This component toggles between ON and OFF states. It demonstrates how to manage state and render UI dynamically.

Method 3: Compose Components for Complex Interfaces

Component-driven Development encourages composing smaller components to build complex UIs. For example, let’s create a simple user profile card by combining smaller components.

import React from 'react';

function Avatar({ imageUrl, altText }) {
  return <img src={imageUrl} alt={altText} style={{ borderRadius: '50%', width: '80px', height: '80px' }} />;
}

function UserInfo({ name, role }) {
  return (
    <div>
      <h3>{name}</h3>
      <p>{role}</p>
    </div>
  );
}

function ProfileCard({ user }) {
  return (
    <div
      style={{
        border: '1px solid #ddd',
        borderRadius: '8px',
        padding: '20px',
        width: '250px',
        boxShadow: '0 2px 5px rgba(0,0,0,0.1)',
      }}
    >
      <Avatar imageUrl={user.avatar} altText={user.name} />
      <UserInfo name={user.name} role={user.role} />
    </div>
  );
}

export default ProfileCard;

Usage Example:

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

const user = {
  name: 'Jane Doe',
  role: 'Data Scientist',
  avatar: 'https://randomuser.me/api/portraits/women/44.jpg',
};

function App() {
  return (
    <div style={{ padding: '50px' }}>
      <ProfileCard user={user} />
    </div>
  );
}

export default App;

I executed the above example code and added the screenshot below

Here, ProfileCard combines Avatar and UserInfo components. This modularity makes your UI scalable and maintainable.

Method 4: Style Components with CSS-in-JS

For Python Keras developers who want to keep styles scoped to components, CSS-in-JS libraries like styled-components are very useful.

Here’s how you can create a styled button using styled-components:

import React from 'react';
import styled from 'styled-components';

const Button = styled.button`
  background-color: #007bff;
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;

  &:hover {
    background-color: #0056b3;
  }
`;

function StyledButton({ label, onClick }) {
  return <Button onClick={onClick}>{label}</Button>;
}

export default StyledButton;

This method keeps your styles tightly coupled with components, improving maintainability and avoiding global CSS conflicts.

Method 5: Integrating React with Python Keras Backend

In practical AI applications, React components often interact with Python Keras models served via APIs. Here’s a simple example of fetching predictions from a backend API.

import React, { useState } from 'react';

function PredictButton() {
  const [result, setResult] = useState(null);
  const [loading, setLoading] = useState(false);

  const getPrediction = async () => {
    setLoading(true);
    try {
      const response = await fetch('https://your-keras-api.com/predict', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ inputData: [1, 2, 3, 4] }),
      });
      const data = await response.json();
      setResult(data.prediction);
    } catch (error) {
      setResult('Error fetching prediction');
    }
    setLoading(false);
  };

  return (
    <div>
      <button onClick={getPrediction} disabled={loading}>
        {loading ? 'Predicting...' : 'Get Prediction'}
      </button>
      {result && <p>Prediction Result: {result}</p>}
    </div>
  );
}

export default PredictButton;

This component sends input data to a Python Keras model API and displays the prediction result, demonstrating how React CDD fits into AI workflows.

Component-driven development in React has transformed how I build scalable and maintainable user interfaces. By focusing on small, reusable components, I can deliver frontend solutions that integrate smoothly with my Python Keras backend.

Whether you’re building simple buttons or complex AI dashboards, adopting CDD will save you time and improve code quality. Try these methods in your next project and see the difference it makes.