React.js Fundamentals for Beginners: Components, JSX, and State

React powers millions of UIs. Here’s a structured intro to components, JSX, props, state, and thinking in React.

Core concepts

• Components — Reusable pieces of UI. Function components are the standard; they return JSX.
• JSX — Syntax that looks like HTML inside JavaScript. Babel/compilers turn it into React.createElement calls.
• Props — Inputs passed from parent to child. Read-only; they make components configurable.
• State — Data that changes over time. Use useState (and later useReducer) so re-renders reflect updates.
• One-way data flow — Data flows down via props; events flow up via callbacks. Keeps the tree predictable.

Framework popularity (npm trends / surveys, relative):

Your first component

Start with a function that returns JSX. Add props for configuration and useState when the UI needs to change. Compose small components into larger ones instead of one huge file.

Watch a quick, modern React setup:

Next steps

After this, learn hooks (useEffect, useContext), lists and keys, forms, and then routing and data fetching. React’s docs and the new React docs (react.dev) are the best follow-up.