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:

• 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:

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

• 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

• 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:

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.

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:

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.

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:

Get all books

curl http://localhost:3001/books

Response:

• /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!