Personal Budget Planner React, JavaScript

```javascript
import React, { useState } from 'react';

function BudgetPlanner() {
  const [income, setIncome] = useState('');
  const [expenses, setExpenses] = useState([]);
  const [expenseName, setExpenseName] = useState('');
  const [expenseAmount, setExpenseAmount] = useState('');

  const handleIncomeChange = (event) => {
    setIncome(event.target.value);
  };

  const handleExpenseNameChange = (event) => {
    setExpenseName(event.target.value);
  };

  const handleExpenseAmountChange = (event) => {
    setExpenseAmount(event.target.value);
  };

  const addExpense = () => {
    if (expenseName && expenseAmount) {
      setExpenses([...expenses, { name: expenseName, amount: parseFloat(expenseAmount) }]);
      setExpenseName('');
      setExpenseAmount('');
    }
  };

  const deleteExpense = (index) => {
    const newExpenses = [...expenses];
    newExpenses.splice(index, 1);
    setExpenses(newExpenses);
  };

  const calculateTotalExpenses = () => {
    return expenses.reduce((total, expense) => total + expense.amount, 0);
  };

  const calculateBalance = () => {
    return parseFloat(income || 0) - calculateTotalExpenses();
  };

  return (
    <div style={{ fontFamily: 'Arial, sans-serif', padding: '20px' }}>
      <h1>Personal Budget Planner</h1>

      {/* Income Input */}
      <div style={{ marginBottom: '20px' }}>
        <label htmlFor="income" style={{ display: 'block', marginBottom: '5px' }}>
          Income:
        </label>
        <input
          type="number"
          id="income"
          value={income}
          onChange={handleIncomeChange}
          placeholder="Enter your income"
          style={{ padding: '8px', fontSize: '16px', width: '200px' }}
        />
      </div>

      {/* Expense Input Form */}
      <div style={{ marginBottom: '20px' }}>
        <h2>Add Expense</h2>
        <label htmlFor="expenseName" style={{ display: 'block', marginBottom: '5px' }}>
          Expense Name:
        </label>
        <input
          type="text"
          id="expenseName"
          value={expenseName}
          onChange={handleExpenseNameChange}
          placeholder="Expense Name"
          style={{ padding: '8px', fontSize: '16px', width: '200px', marginBottom: '10px' }}
        />

        <label htmlFor="expenseAmount" style={{ display: 'block', marginBottom: '5px' }}>
          Expense Amount:
        </label>
        <input
          type="number"
          id="expenseAmount"
          value={expenseAmount}
          onChange={handleExpenseAmountChange}
          placeholder="Expense Amount"
          style={{ padding: '8px', fontSize: '16px', width: '200px', marginBottom: '10px' }}
        />

        <button onClick={addExpense} style={{ padding: '10px 20px', fontSize: '16px', backgroundColor: '#4CAF50', color: 'white', border: 'none', cursor: 'pointer' }}>
          Add Expense
        </button>
      </div>

      {/* Expense List */}
      <div>
        <h2>Expenses</h2>
        {expenses.length === 0 ? (
          <p>No expenses added yet.</p>
        ) : (
          <ul style={{ listStyleType: 'none', padding: 0 }}>
            {expenses.map((expense, index) => (
              <li key={index} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '10px', borderBottom: '1px solid #ccc' }}>
                <span>{expense.name}: ${expense.amount.toFixed(2)}</span>
                <button onClick={() => deleteExpense(index)} style={{ padding: '5px 10px', fontSize: '14px', backgroundColor: '#f44336', color: 'white', border: 'none', cursor: 'pointer' }}>
                  Delete
                </button>
              </li>
            ))}
          </ul>
        )}
      </div>

      {/* Summary */}
      <div style={{ marginTop: '20px', borderTop: '2px solid #ccc', paddingTop: '10px' }}>
        <h2>Summary</h2>
        <p>Total Expenses: ${calculateTotalExpenses().toFixed(2)}</p>
        <p>Balance: ${calculateBalance().toFixed(2)}</p>
      </div>
    </div>
  );
}

export default BudgetPlanner;
```