What is React?
In this page:
What Problem React Solves
Updating a page by hand with document.getElementById and appendChild gets messy fast as an app grows -- you have to track exactly which DOM nodes exist and manually change each one. React lets you describe what the UI should look like for the current data, and React itself figures out which real DOM nodes to update.
Note: Think of a React component as a function that takes data in and returns UI out -- the same data always produces the same UI.
Warning: React is a UI library, not a full framework -- routing, state management, and API calls all need separate tools.
Example: What Problem React Solves
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function Greeting() {
return <h1>Hello, React!</h1>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<Greeting />);
</script>
</body>
</html>Declarative vs Imperative UI
Imperative code gives step-by-step DOM instructions (create this element, then append it, then set its text). Declarative React code just describes the end result as JSX, and React handles the actual DOM operations behind the scenes.
Note: Read JSX as 'what the UI should look like right now', not as a sequence of steps to run.
Warning: Reaching for document.getElementById inside a React component to change the DOM directly fights against React instead of using it -- React can lose track of that element.
Example: Declarative vs Imperative UI
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function Message() {
// Declarative: just describe the result.
return <p>This paragraph was described, not built step-by-step.</p>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<Message />);
</script>
</body>
</html>Component-Based Architecture
React apps are built as a tree of small, reusable components, each responsible for one piece of UI. A page is assembled by combining components rather than writing one giant block of markup.
Note: Give each component a single clear responsibility so it stays easy to reuse and test.
Warning: Stuffing unrelated pieces of UI into one component makes it hard to reuse or reason about later.
Example: Component-Based Architecture
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function Header() {
return <h2>My Site</h2>;
}
function Footer() {
return <p>© 2024</p>;
}
function Page() {
return (
<div>
<Header />
<Footer />
</div>
);
}
ReactDOM.createRoot(document.getElementById('root')).render(<Page />);
</script>
</body>
</html>Where React Code Runs
React was built for rendering into the browser DOM via the react-dom package, which is what this entire course uses. The same component concepts (components, props, state) also power React Native for mobile apps and Server Components, but the rendering target is different in each case.
Note: Everything in this course targets react-dom -- rendering directly into a webpage.
Warning: Code written for React Native isn't automatically compatible with a plain react-dom web app -- the underlying host elements differ.
Example: Where React Code Runs
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function Note() {
return <p>Rendered into the browser DOM by react-dom.</p>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<Note />);
</script>
</body>
</html>- Thinking React is a full programming language instead of a JavaScript library for building UI.
- Expecting React to handle routing, styling, or backend logic out of the box -- those need separate libraries.
- Confusing React (the library) with React Native (a different framework for mobile apps).
- React is a JavaScript library for building user interfaces out of components.
- It was created by Facebook and is now maintained by Meta and the open-source community.
- React focuses only on the view layer -- routing, state management, and styling are separate choices.
- Components let you split the UI into independent, reusable pieces.
React itself supports all modern evergreen browsers (Chrome, Firefox, Safari, Edge); no browser-specific restrictions apply to this topic.
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: