Mastering React: A Complete Tutorial Series for Beginners and Beyond

Chapter 4: Rendering and User Interfaces

This chapter dives into how to build rich, interactive UIs using React — from rendering lists, creating forms, and routing between pages, to styling components with CSS, Sass, and optimizing performance with React.memo.

🧠 Why This Chapter Matters

Once you've mastered components and props, the next step is building user-friendly interfaces that handle:

• Dynamic lists (e.g., product catalogs, messages)
• Forms (e.g., login, feedback)
• Routing between multiple views
• Styling with CSS and Sass
• UI performance optimization

This chapter ties together real-world frontend skills that every React developer must know.

✅ 1. React Lists — Rendering Collections

React lets you loop through arrays and render components dynamically.

🔹 Rendering a List of Items

const fruits = ['Apple', 'Banana', 'Orange'];

function FruitList() {

  return (

    <ul>

      {fruits.map((fruit, index) => (

        <li key={index}>{fruit}</li>

      ))}

    </ul>

  );

}

✅ Always use a unique key prop when rendering lists to help React track changes.

🔹 Rendering Components from Data

const users = [

  { id: 1, name: 'Alice' },

  { id: 2, name: 'Bob' }

];

function UserList() {

  return (

    <ul>

      {users.map(user => (

        <li key={user.id}>

          <UserCard name={user.name} />

        </li>

      ))}

    </ul>

  );

}

function UserCard({ name }) {

  return <p>User: {name}</p>;

}

✅ 2. React Forms — Handling Inputs

React uses a controlled component model, where form data is tied to component state.

🔹 Basic Form with Controlled Input

function FormExample() {

  const [name, setName] = useState("");

  const handleSubmit = (e) => {

    e.preventDefault();

    alert(`Submitted: ${name}`);

  };

  return (

    <form onSubmit={handleSubmit}>

      <input

        value={name}

        onChange={(e) => setName(e.target.value)}

        placeholder="Enter name"

      />

      <button type="submit">Submit</button>

    </form>

  );

}

✅ Controlled inputs make it easy to validate and manipulate data in real-time.

🔹 Checkbox, Radio, Select

✅ 3. React Router — Page Navigation

React Router enables client-side routing for SPAs (Single Page Applications).

🔹 Setup

npm install react-router-dom

🔹 Basic Routing Example

import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';

function App() {

  return (

    <BrowserRouter>

      <nav>

        <Link to="/">Home</Link> |

        <Link to="/about">About</Link>

      </nav>

      <Routes>

        <Route path="/" element={<Home />} />

        <Route path="/about" element={<About />} />

      </Routes>

    </BrowserRouter>

  );

}

function Home() {

  return <h2>Welcome to Home</h2>;

}

function About() {

  return <h2>About Us</h2>;

}

✅ Link replaces <a> to avoid page refresh
✅ Routes (v6+) replaces older Switch

✅ 4. React Memo — Optimizing Performance

React.memo() is a higher-order component that memoizes a functional component to avoid unnecessary re-renders.

🔹 Without Memo

function Child({ name }) {

  console.log("Child rendered");

  return <p>{name}</p>;

}

Every time the parent re-renders, this component does too — even if name doesn’t change.

🔹 With Memo

const Child = React.memo(function Child({ name }) {

  console.log("Memoized Child rendered");

  return <p>{name}</p>;

});

✅ Only re-renders when props actually change.

✅ 5. React CSS Styling

🔹 Inline Styling

const style = {

  color: 'blue',

  fontSize: '20px'

};

function StyledText() {

  return <h1 style={style}>Styled with inline CSS</h1>;

}

🔹 External CSS

// App.css

.title {

  color: green;

  font-size: 24px;

}

// App.js

import './App.css';

function Header() {

  return <h1 className="title">Styled with CSS</h1>;

}

✅ Best for larger projects where styles are reused and modular.

✅ 6. React Sass Styling

Sass allows you to write cleaner, nested, and dynamic styles.

🔹 Setup Sass

npm install sass

Rename CSS files to .scss:

// styles.scss

$primary-color: #4CAF50;

.title {

  color: $primary-color;

  font-weight: bold;

}

jsx

CopyEdit

// App.js

import './styles.scss';

function Header() {

  return <h1 className="title">Sass Styled Header</h1>;

}

✅ Sass allows variables, mixins, and nesting — ideal for large-scale apps.

✅ Summary Table: Rendering and UI