RadarTrek
Work with us
Home/Courses/React/What Is React?
Lesson 01 / 12·7 minFree

What Is React?

The problem React was built to solve — and why it won

⚛ App root component ⚛ Header logo · nav links ⚛ Main page content ⚛ Footer links · copyright ⚛ ProductCard props: name, price ⚛ ProductCard props: name, price ⚛ Button props: label, onClick Component — each is a function that returns JSX renders children

Before React, building interactive UIs meant manually updating the DOM every time data changed. You'd write code like: "find the element with ID #counter, then change its text to the new value." For small apps this is fine. For apps with hundreds of interrelated UI pieces, it becomes a nightmare. React was built to solve this.

The core idea: components

  • A component is just a function — It's a JavaScript function that returns JSX (a description of what the UI should look like). function Button() { return <button>Click me</button> }.
  • Components can contain other components — Your App component renders a Header, Main, and Footer. Your Main renders ProductCards. ProductCards render Buttons. It's components all the way down.
  • Components can receive data via props — <ProductCard name="Notebook" price={9.99} /> — passing data into a component is like calling a function with arguments.
  • Components can have their own state — A counter component remembers the count. An accordion remembers which panel is open. State is data that belongs to the component.
💡

React is LEGO for UIs

A React app is made of components — reusable building blocks that each manage their own piece of the UI. A Button component. A ProductCard component. A Header component. You snap them together to build a page. When you need a button somewhere new, you don't write more code — you drop in the Button component. Change the Button component once, and it updates everywhere it's used.

UI = f(state)

State count = 0 setCount(1) user clicks button triggers React calls your function again with new state function Counter() { // count is now 1 produces New UI Virtual DOM diff 1 UI = f(state) Your function runs every time state changes. React figures out the minimum DOM update needed.

This is React's central idea: your UI is a function of your application's state. Give React the current state, and it figures out what the DOM should look like. When state changes, React re-runs your function and updates only the parts of the DOM that changed.

Why React became the standard

  • Predictable — Same state always produces the same UI. No hidden side effects from manually touching the DOM.
  • Composable — Components can be shared, reused, and assembled. Most teams build a component library once and reuse it across products.
  • Ecosystem — React has the largest ecosystem of any UI library — Next.js (full-stack), React Native (mobile), thousands of component packages.
  • Hireability — React is the most in-demand frontend skill. Knowing React means knowing the foundation of almost every modern frontend job.
!

React is a library, not a framework

React only handles the view layer (what the user sees). For routing, data fetching, and server rendering, you add other tools — typically Next.js, which wraps React with everything you need to build a complete app. This course focuses on React fundamentals; the next course (Build Your First Web App) adds Next.js.

→

Try this

Go to react.dev and open the live sandbox on the homepage. Change some text in the code and watch the preview update instantly. This is React: change the data (the JSX), the UI updates.

JSX — HTML Inside JavaScript

RadarTrek Intel — monthly score updates

We track 40+ tools so you don't have to. Score changes, new tools, and new guides — once a month, no spam.