Think in Components
See how React turns an interface into small, named pieces.
React helps you describe an interface as small components. Each component owns one understandable piece of the screen.
Start coding React
For a local learning project, install the current LTS release of Node.js, open a terminal, and create a React + TypeScript project with Vite.
terminal
npm create vite@latest my-react-app -- --template react-ts
cd my-react-app
npm install
npm run dev
Open the local URL printed in the terminal. Then replace src/App.tsx with:
src/App.tsx
export default function App() {
return <h1>Hello, React!</h1>;
}
Save the file and the browser should update automatically. Stop the development server with Ctrl C when you are finished.
A small component
A React component is a function that returns interface markup.
Greeting.tsx
export function Greeting() {
return <h1>Hello, Arcbyte!</h1>;
}
Composition
Components become useful when they are combined. A page can contain a header, lesson, and footer without hiding how the parts relate.
Keep this
- Components are functions.
- JSX describes what should appear.
- Composition keeps large interfaces understandable.
Your place is saved on this device.