Introduction to React JSX

Welcome to your first step in building a modern React frontend! In this lesson, you will learn about React and JSX, which are the building blocks for creating interactive user interfaces. React is a popular JavaScript library developed by Facebook. It helps you build user interfaces by breaking them down into small, reusable pieces called components.

React is widely used because it makes it easier to manage complex UIs, update the page efficiently, and organize your code. By learning React, you are gaining a valuable skill that is in high demand in web development.

React is a JavaScript library for building user interfaces using components—small, reusable pieces of UI. Instead of manipulating HTML directly, React lets you describe what the UI should look like in a declarative way, making it easier to manage complex applications.

Tailwind CSS is a utility-first CSS framework. Instead of writing separate CSS files, you apply pre-defined classes directly in your JSX. For example:

<h1 className="text-2xl font-bold text-sky-500">Hello, ShelfPilot!</h1>

• text-2xl → makes the text larger
• font-bold → makes it bold
• text-sky-500 → sets the color

Advantages of Tailwind:

• Speeds up styling without switching between files.
• Provides a consistent design system out of the box.
• Encourages small, composable UI building blocks (just like React components).

In this course, you’ll combine React for structure and Tailwind for styling.

In the CodeSignal environment, React and Tailwind are already set up. You can start coding right away.

If you were setting this up on your own computer, you would run:

# 1. Create a new React + TypeScript app
npx create-react-app my-app --template typescript
cd my-app

# 2. Install Tailwind and dependencies
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

This generates two key files:

• tailwind.config.cjs → Tailwind’s configuration.
• postcss.config.js → enables Tailwind in the build process.

You would then enable Tailwind in your global CSS (src/index.css).

tailwind.config.cjs

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./public/index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

• content: tells Tailwind which files to scan for class names (so unused styles are removed).
• theme.extend: where you can add custom colors, spacing, or fonts later.
• plugins: optional extensions to Tailwind.

⚠️ This file is crucial—if your React files aren’t included in content, Tailwind classes won’t be applied.

src/index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
}

• The three @tailwind directives import Tailwind’s styles.
• You can still add your own global CSS here (like the body reset above).

src/reportWebVitals.ts

• This is an optional performance-monitoring helper.
• It’s not required for styling or basic React functionality, so we’ll leave it untouched.

Your app starts in src/index.tsx:

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import reportWebVitals from './reportWebVitals';

const container = document.getElementById('root');
if (!container) throw new Error('Root container missing');
const root = ReactDOM.createRoot(container);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

reportWebVitals();

Here’s what’s happening:

• const container = document.getElementById('root'): This grabs the root <div> in public/index.html where our entire React app will be rendered.
• Error handling (if (!container) throw ...): Ensures the app fails fast if the root element is missing, instead of silently breaking.
• ReactDOM.createRoot(container).render(...): Mounts the App component inside that root div, making it the visible UI of the page.
• reportWebVitals(): An optional function that can collect performance metrics (like load times) if you want to monitor how your app runs in the browser.
• .render(<React.StrictMode><App /></React.StrictMode>) tells React to render your App component inside that element.
• <React.StrictMode> is a tool that helps you catch potential problems in your code. It doesn’t affect what you see on the page.

This is how your React app starts and shows your UI in the browser.

React uses a special syntax called JSX, which stands for JavaScript XML. JSX lets you write code that looks a lot like HTML, but you can use it inside your JavaScript files. This makes it easy to describe what your user interface should look like.

Let’s open App.tsx and add some Tailwind styling:

function App() {
  return (
    <main className="min-h-screen flex flex-col items-center justify-center bg-slate-900 text-white">
      <h1 className="text-4xl font-bold text-sky-400">Hello, ShelfPilot!</h1>
      <p className="text-lg text-slate-400">Your personal reading tracker.</p>
    </main>
  )
}

export default App

In this example, the App function returns some JSX. The code inside the parentheses looks like HTML, but it’s actually JavaScript. This JSX will be turned into real HTML elements on the page.

• min-h-screen → full viewport height
• flex flex-col items-center justify-center → centers content
• bg-slate-900 text-white → dark background with white text
• text-sky-400 → accent color for the heading

This demonstrates React’s JSX structure combined with Tailwind’s utility classes.

JSX makes it easy to see what your UI will look like, and you can use JavaScript expressions inside curly braces {} if you want to show dynamic content.

App is a React Component. In React, a component is a function that returns JSX. Components let you split your UI into independent, reusable pieces.

• The App function is a React component.
• It returns a <main> element with a heading and a paragraph.
• The export default App line makes this component available to other files, such as index.tsx.

When React renders this component, it will show the heading and paragraph on the page.

Important Note on React Components: React components are required to start with an uppercase letter. This convention is not merely a stylistic choice but a fundamental rule that allows React and its underlying tools, like Babel, to differentiate between custom components and standard HTML elements. When JSX is processed, the capitalization of an element's name determines whether it's treated as a custom React component or a built-in HTML tag (e.g., <div>, <span>). If the name begins with a lowercase letter, it's interpreted as an HTML element. If it begins with an uppercase letter, it's recognized as a custom component that needs to be rendered by React.

Right now, we’re focusing on learning React and Tailwind. Later in the course, we’ll connect this frontend directly to a backend API that’s already running on port 3001. This means we won’t need any mock data—our backend already has a collection of books and other resources ready to be used.

If you’re curious, you can explore two public backend routes right now using curl in a separate terminal of the upcoming practice sessions:

Health check endpoint

curl http://localhost:3001/api/hello

Response:

{"data":{"success":true,"data":"Hello World!"},"meta":{"timestamp":"2025-11-02T13:54:14.461Z"}

Get all books

curl http://localhost:3001/books

Response:

{
  "data": {
    "success": true,
    "data": {
      "items": [
        {
          "id": "4a9e9588-3eda-46b4-9269-585468d81f70",
          "title": "The Hobbit",
          "author": "J.R.R. Tolkien",
          "totalPages": 310,
          "publishDate": "1937-09-21",
          "uploadedAt": "2025-11-01T06:23:22.512Z"
        },
        ...rest of the elements
      ],
      "page": 1,
      "pageSize": 20,
      "total": 8
    }
  },
  "meta": {
    "timestamp": "2025-11-01T06:30:43.130Z"
  }
}

• /api/hello is a simple health/demo endpoint.
• /books returns an array of "items" with all of the books present in our backend.

There are many more routes available, and we’ll work with them later. If you’re interested in how the backend is built, you can explore the “Building the Reading Tracker API with NestJS” course path. It’s not required for this React path, but it’s great if you want to develop full-stack skills by learning the backend fundamentals too.

In this lesson, you learned what React is and why it’s useful for building user interfaces. You saw how JSX lets you write HTML-like code inside JavaScript, and how components like App return JSX to describe what should appear on the page. Finally, you learned how React renders your main component in the browser.

• React structures your UI with components.
• Tailwind styles your UI with utility classes directly in JSX.
• In this unit, we explained the setup files (tailwind.config.cjs, index.css) and created a styled App component.

Next, you’ll get to practice creating and rendering your own React components. This hands-on practice will help you get comfortable with JSX and the basics of building a React app. Let’s get started!