Welcome to React: Building UIs with Components

React was released by Facebook (now Meta) in 2013 and has since become the most widely used library for building web user interfaces. Rather than a full framework, React is deliberately focused on one job: turning your application’s data into what the user sees on screen, and keeping that view in sync as the data changes.

React’s core idea is the component — a self-contained, reusable piece of UI that manages its own data and knows how to render itself. A course card, a navigation bar, an entire page — all of them are just components, often built out of smaller components nested inside them, exactly the way this site’s own course cards are one reusable piece repeated across the homepage and the courses archive.

Setting up a project

npm create vite@latest my-app -- --template reactncd my-appnnpm installnnpm run dev

Vite is the modern standard tool for starting a new React project — fast, simple, and the current community recommendation over the older Create React App tool.

Your first component

function Welcome() {n    return <h1>Hello, Tutoline!</h1>;n}nnexport default Welcome;

A React component is, at its simplest, just a JavaScript function that returns markup. That markup-inside-JavaScript syntax is called JSX, covered in depth in the next lesson — this is not a template language, it compiles down to regular JavaScript function calls.

What you will build across this course

By the end of this course you will understand JSX, props, state and hooks, handling events, fetching data, and the basics of routing between pages — enough to build a real, interactive single-page application, building directly on the JavaScript and HTML/CSS courses on this site.