Week 8: React II

INFO 253A: Front-end Web Architecture

Kay Ashaolu

React Chapter 4:

Forms, Validation, and Simple Animation

Introduction to Forms in React

• Forms are essential for user interaction in web applications.
• Handling forms in React involves managing state and event handlers.

Managing Form Input and State

• Use the useState hook to manage form input state.
• Example:

• Connect form inputs to state using value and onChange props.
• Reflects user input in the component's state.

Example: Creating the FeedbackForm Component

• Create a new component: FeedbackForm.jsx.
• Use the shared Card component to wrap the form for consistent styling.
• Structure:

Using Custom Components

• Reuse components like Card and Button to maintain consistency.
• Create a Button component with customizable props.
• Example Button Component Usage:

Creating a Custom Button Component

• Allows for reusable and customizable buttons across the app.
• Accepts props like type, version, isDisabled.
• Button Component Implementation:

Props and Default Props in Components

• Define default prop values using defaultProps.
• Ensures components have default behavior if no props are passed.
• Example:

Adding PropTypes for Type Checking

• Use prop-types library for runtime prop type checking.
• Helps catch bugs by ensuring components receive correct prop types.
• Example:

Implementing Real-Time Form Validation

• Disable submit button until input meets criteria (e.g., at least 10 characters).
• Use state to manage button disabled state and validation messages.
• Example:

Handling Form Submission

• Add onSubmit handler to the form element.
• Prevent default browser behavior with e.preventDefault().
• Collect form data and update state or communicate with parent components.

Conditional Rendering Based on Form State

• Show validation messages only when necessary.
• Use conditional rendering in JSX.
• Example:

• The message appears only if message is not empty.

Example: Creating the RatingSelect Component

• Component for selecting a rating (1-10).
• Uses styled radio buttons for user selection.
• Manages selected rating with its own state.

Lifting State Up in React

• Share state between components by lifting it up to a common ancestor.
• Pass functions as props to child components to update parent state.
• Example in FeedbackForm.jsx:

• In RatingSelect.jsx, call select(selected) to update parent state.

Adding New Feedback Items to State

• Collect input data and create a new feedback object.
• Use useState to manage the list of feedback items.
• Example:

Using UUIDs for Unique IDs

• Install uuid library to generate unique IDs for new items.
• Ensures each feedback item has a unique identifier.
• Example:

Updating Global State in React

• Use state setters to update state immutably.
• Avoid direct mutation of state for predictability and performance.
• Example:

• Prepends the new feedback to the existing list.

Recap and Key Takeaways

• Forms in React require careful state management.
• Custom components promote code reusability and maintainability.
• Real-time validation improves user experience.
• Managing global state allows for dynamic and interactive applications.

React Chapter 5: Creating Routes and Links

The Role of Routing in Web Applications

• Routing allows navigation between different views without full page reloads
• Essential for Single Page Applications (SPAs)
• Maintains browser history and enables deep linking
• Enhances user experience with faster navigation

React and Client-Side Routing

• React focuses on building UI components
• Does not include built-in routing
• react-router-dom is the de facto standard for routing in React apps
• Provides components and hooks for declarative routing

Installing react-router-dom

npm install react-router-dom

• Install via npm to add routing capabilities
• Includes components like BrowserRouter, Routes, Route, Link, etc.

Creating Links with the Link Component

• Use Link instead of <a> for internal navigation

import { Link } from 'react-router-dom';

function Navbar() {
  return (
    <nav>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
    </nav>
  );
}

• Prevents full page reloads
• Enables client-side routing and preserves application state

Using NavLink for Active Links

• NavLink applies styling to the active link

import { NavLink } from 'react-router-dom';

function Navbar() {
  return (
    <nav>
      <NavLink to="/" className={({ isActive }) => (isActive ? 'active' : '')}>
        Home
      </NavLink>
      <NavLink to="/about" className={({ isActive }) => (isActive ? 'active' : '')}>
        About
      </NavLink>
    </nav>
  );
}

• Customize active styles using className or style props
• Helps users identify the current page

Dynamic Routes with URL Parameters

• Define routes with dynamic parameters

<Route path="/post/:id" element={<Post />} />

• Access parameters using useParams hook

import { useParams } from 'react-router-dom';

function Post() {
  const { id } = useParams();
  return <h1>Post ID: {id}</h1>;
}

• Enables dynamic content based on the URL
• Commonly used for user profiles, articles, etc.

Programmatic Navigation with useNavigate

• Navigate in response to events or logic

import { useNavigate } from 'react-router-dom';

function ContactForm() {
  const navigate = useNavigate();

  const handleSubmit = () => {
    // Submit form logic
    navigate('/thank-you');
  };

  return <button onClick={handleSubmit}>Submit</button>;
}

• Facilitates redirects after actions like form submissions

Nested Routes and the Outlet Component

• Define nested routes for complex layouts

import { Outlet } from 'react-router-dom';

function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>
      <Outlet />
    </div>
  );
}

Nested Routes and the Outlet Component

• Use Outlet to render child routes within parent components

<Routes>
  <Route path="/dashboard" element={<Dashboard />}>
    <Route path="stats" element={<Stats />} />
    <Route path="settings" element={<Settings />} />
  </Route>
</Routes>

• Organizes routes hierarchically
• Enhances code readability and maintainability

Summary and Best Practices

• Routing is integral to SPA architecture
• React Router enhances navigation without page reloads
• Always use Link or NavLink for internal links
• Utilize hooks like useParams and useNavigate for dynamic routing
• Keep routes organized and consider nested routes for complex apps

React Chapter 6:

Context API, useContext Hook, and Deployment

Introduction to Context API

• Problem: Prop drilling makes state management cumbersome in large applications.
• Solution: Context API allows passing data through the component tree without manually passing props at every level.
• Benefit: Simplifies state management and makes code cleaner and more maintainable.

Prop Drilling Issue

• Passing props through multiple nested components becomes messy.
• Difficult to manage in large applications with deep component hierarchies.
• Example of prop drilling in App.js:

 <FeedbackList feedback={feedback} handleDelete={deleteFeedback} />

Creating Context and Provider

• Step 1: Import createContext and useState from React.

 import { createContext, useState } from 'react';

• Step 2: Create a new context.

 const FeedbackContext = createContext();

• Step 3: Create a provider component.

 export const FeedbackProvider = ({ children }) => {
   // State and functions here
   return (
     <FeedbackContext.Provider value={{ /* values */ }}>
       {children}
     </FeedbackContext.Provider>
   );
 };

Setting Up FeedbackContext.js

• Initialize state within the provider.

 const [feedback, setFeedback] = useState([
   { id: 1, text: 'This item is from context', rating: 10 },
 ]);

• Provide state and functions via the value prop.

 <FeedbackContext.Provider value={{ feedback }}>
   {children}
 </FeedbackContext.Provider>

Wrapping App with FeedbackProvider

• Import FeedbackProvider in App.js.

 import { FeedbackProvider } from './context/FeedbackContext';

• Wrap the entire application.

 return (
   <FeedbackProvider>
     {/* Your components */}
   </FeedbackProvider>
 );

Consuming Context with useContext

• Import useContext and the context.

 import { useContext } from 'react';
 import FeedbackContext from '../context/FeedbackContext';

• Use the context within a component.

 const { feedback } = useContext(FeedbackContext);

Updating Components to Use Context

• Remove props drilling by accessing context directly.
• Example in FeedbackList.js:

 const { feedback } = useContext(FeedbackContext);

• No longer need to pass feedback as a prop from App.js.

Moving Functions to Context

• Move state manipulation functions to context.

 const deleteFeedback = (id) => {
   setFeedback(feedback.filter((item) => item.id !== id));
 };

• Provide functions via the value prop.

 <FeedbackContext.Provider value={{ feedback, deleteFeedback }}>
   {children}
 </FeedbackContext.Provider>

Updating the Form and List Components

• Access functions from context using useContext.

 const { deleteFeedback } = useContext(FeedbackContext);

• Remove function props from components and use context functions instead.
• Simplifies component interfaces and reduces prop drilling.

Implementing Edit Feedback Feature

• Add an edit icon to FeedbackItem.

 <button onClick={() => editFeedback(item)}>
   <FaEdit color='purple' />
 </button>

• Create editFeedback function in context to handle the edit state.

 const [feedbackEdit, setFeedbackEdit] = useState({
   item: {},
   edit: false,
 });

 const editFeedback = (item) => {
   setFeedbackEdit({
     item,
     edit: true,
   });
 };

Managing Side Effects with useEffect

• Import and use useEffect to handle side effects.

 import { useEffect } from 'react';

 useEffect(() => {
   if (feedbackEdit.edit === true) {
     // Update form state
   }
 }, [feedbackEdit]);

• Update form fields when the edit state changes.

Updating Feedback Item

• Add updateFeedback function in context.

 const updateFeedback = (id, updItem) => {
   setFeedback(
     feedback.map((item) => (item.id === id ? { ...item, ...updItem } : item))
   );
 };

• Modify FeedbackForm to handle updates.

 if (feedbackEdit.edit === true) {
   updateFeedback(feedbackEdit.item.id, newFeedback);
 } else {
   addFeedback(newFeedback);
 }

Deploying to Netlify

• Create a GitHub repository and push your code.
• Sign up for Netlify and create a new site from Git.
• Select your repository and configure build settings:
  • Build Command: npm run build
  • Publish Directory: build
• Deploy the site and access it via the provided URL.

Alternative Deployment Options

• Vercel: Easy deployment with Git integration.
• AWS Amplify: Scalable hosting solution.
• GitHub Pages: Suitable for static sites.
• Heroku: Can be used with a server-side component.

Conclusion and Next Steps

• Context API simplifies state management in React apps.
• useContext hook allows consuming context easily.
• Deployment is straightforward with platforms like Netlify.