React Components and State — React + AI

Build a React app from scratch with Vite. Learn components, props, useState, and the component lifecycle before adding AI.

~1 hour Hands-on Precision AI Academy

Today's Objective

Build a React app from scratch with Vite. Learn components, props, useState, and the component lifecycle before adding AI.

Create a React App With Vite

Vite is significantly faster than Create React App. Use it for all new projects.

bash

npm create vite@latest my-ai-app -- --template react
cd my-ai-app
npm install
npm run dev    # opens http://localhost:5173

text — project structure

my-ai-app/
├── src/
│   ├── App.jsx          ← root component
│   ├── main.jsx         ← entry point
│   └── components/      ← your components go here
├── public/
├── index.html
└── vite.config.js

Components — The Building Blocks

A React component is a function that returns JSX (HTML-like syntax). Components are reusable — write once, use anywhere.

jsx

// src/components/MessageCard.jsx
function MessageCard({ role, content, timestamp }) {
  return (
    
      
        {role}
        {timestamp}
      
      {content}
    
  );
}

export default MessageCard;

// Usage in App.jsx
import MessageCard from './components/MessageCard';

function App() {
  return (
    
      
    
  );
}

ℹ️

JSX looks like HTML but it's JavaScript. Key differences: use className instead of class, self-close all tags (<img />), and wrap expressions in {}.

useState — Adding Interactivity

jsx

import { useState } from 'react';

function ChatInput({ onSend }) {
  const [message, setMessage] = useState('');
  const [isLoading, setIsLoading] = useState(false);

  function handleSubmit(e) {
    e.preventDefault();
    if (!message.trim()) return;
    onSend(message);
    setMessage('');  // clear after sending
  }

  return (
    
       setMessage(e.target.value)}
        placeholder="Ask anything..."
        disabled={isLoading}
      />
      
    
  );
}

Lists and Keys

jsx

function MessageList({ messages }) {
  return (
    
      {messages.map((msg) => (
        
      ))}
    
  );
}

Building the Chat Shell

jsx — src/App.jsx

import { useState } from 'react';

function App() {
  const [messages, setMessages] = useState([
    { id: 1, role: 'assistant', content: 'Hi! Ask me anything.' }
  ]);

  function handleSend(text) {
    // Add user message
    const userMsg = { id: Date.now(), role: 'user', content: text };
    setMessages(prev => [...prev, userMsg]);

    // We'll add the AI response in Day 2
    const aiMsg = {
      id: Date.now() + 1,
      role: 'assistant',
      content: `You said: "${text}" — AI coming in Day 2!`
    };
    setMessages(prev => [...prev, aiMsg]);
  }

  return (
    
      AI Chat
      
        {messages.map(msg => (
          
            {msg.role}: {msg.content}
          
        ))}
      
      
    
  );
}

function ChatInput({ onSend }) {
  const [text, setText] = useState('');
  return (
     { e.preventDefault(); if (text.trim()) { onSend(text); setText(''); } }}>
       setText(e.target.value)} placeholder="Type a message..." />
      
    
  );
}

export default App;

Day 1 Checkpoint

Before moving on, confirm understanding of these key concepts:

What is the core concept introduced in this lesson?
How does the main technique or tool work in practice?
What common mistakes should be avoided?
How would this apply in a real-world project?
What is the next logical step to build on this knowledge?

React Components and State — React + AI

Today's Objective

Create a React App With Vite

Components — The Building Blocks

useState — Adding Interactivity

Lists and Keys

Building the Chat Shell

AI Chat

Supporting References & Reading

Go deeper with these external resources.

Day 1 Checkpoint