{"id":951,"date":"2024-09-26T14:44:18","date_gmt":"2024-09-26T14:44:18","guid":{"rendered":"https:\/\/algocademy.com\/blog\/unlocking-the-power-of-react-components-a-beginners-guide-to-building-dynamic-user-interfaces\/"},"modified":"2026-10-15T12:51:16","modified_gmt":"2026-10-15T12:51:16","slug":"unlocking-the-power-of-react-components-a-beginners-guide-to-building-dynamic-user-interfaces","status":"publish","type":"post","link":"https:\/\/algocademy.com\/blog\/unlocking-the-power-of-react-components-a-beginners-guide-to-building-dynamic-user-interfaces\/","title":{"rendered":"React Components for Beginners: JSX, Props, State and Hooks"},"content":{"rendered":"

A React component is a JavaScript function that returns a piece of user interface written in JSX. You build a page by combining small components, passing data into them with props, and giving them memory with state. This guide covers the official way to learn that today: react.dev\/learn<\/a>, function components and hooks. It does not use Create React App, which React has deprecated.<\/p>\n

Set up a project in five minutes<\/h2>\n

You need Node.js installed (check with node -v<\/code>). For a real product, react.dev recommends starting with a framework such as Next.js, React Router or Expo, because they solve routing and data fetching for you. For learning the basics, react.dev also documents building from a build tool, and names Vite as one option. Vite gives you a plain client-side app with nothing else to learn:<\/p>\n

npm create vite@latest my-app -- --template react\ncd my-app\nnpm install\nnpm run dev\n<\/code><\/pre>\n
The last command prints a local address (usually http:\/\/localhost:5173<\/code>). Open it and you see the starter page, which reloads whenever you save a file. The files you will edit are src\/App.jsx<\/code> and src\/main.jsx<\/code>. Delete the starter content in App.jsx<\/code> and you are ready for the examples below.<\/p>\n
Create React App is deprecated, as react.dev’s installation page says, so tutorials that begin with npx create-react-app<\/code> are out of date. Also skip ReactDOM.render<\/code>: current React uses createRoot<\/code>, which Vite’s main.jsx<\/code> already sets up for you.<\/p>\n
What a component is<\/h2>\n
A component is a function whose name starts with a capital letter and that returns JSX. Here is the smallest useful one:<\/p>\n
function Greeting({ name, excited = false }) {\n  return <h1>Hello, {name}{excited ? '!' : '.'}<\/h1>;\n}\n<\/code><\/pre>\n
You use it like an HTML tag: <Greeting name=\"React\" excited \/><\/code> renders <h1>Hello, React!<\/h1><\/code>. The capital letter matters. React treats <greeting \/><\/code> as an HTML element and <Greeting \/><\/code> as your component.<\/p>\n
Older tutorials also show class components (class Greeting extends React.Component<\/code>). They still work, but new code uses function components and hooks, and react.dev’s docs teach only those. You will meet classes mainly in older codebases.<\/p>\n
JSX in practice<\/h2>\n
JSX looks like HTML but is JavaScript. A build tool (Vite does this for you) turns it into function calls. The rules that trip up beginners:<\/p>\n