Course Preview

React Fundamentals

React is a JavaScript library for building web and native user interfaces from reusable components. Components describe what should appear for the current data, and React updates the host interface when that data changes.

itWeb development | OpenSkills.info

Course pathWalk it in order

Look it upDip in anytime

Go furtherLeaves this page

Don't Panic - React Fundamentals

React is a JavaScript library for building user interfaces from components. A component is a function that returns a description of part of the screen. You compose those pieces into a tree. React focuses on the interface layer. Routing, data fetching, styling, and deployment come from the browser, libraries, or a framework. The documentation recommends a framework for many new applications because a framework can coordinate routing, data loading, rendering, and production optimization. React can also be added to part of an existing HTML page when a full framework is unnecessary.

Props are the inputs a parent passes down. State is the data a component owns and may change over time. When state changes, React renders again and updates the DOM to match the new tree. That one-way data flow is the whole trick: parents pass new props; children do not reach upward and mutate what they were given. Lift state to the owner that needs to change it.

JSX places markup near the JavaScript that controls it. A capital JSX name is a component. A lowercase name is a DOM tag. JSX is common and optional; the element tree is what matters. Lists need stable keys so React can match items across updates. Index keys reuse the wrong local state when order changes, which looks like "the wrong row edited" rather than a crash.

Hooks such as useState and useEffect let function components hold state and synchronize with systems outside React. Effects are for those outside systems. They are not a second rendering engine for values you can already compute from props and state during render. Context shares values down the tree without hand-threading props, at the cost of notifying every consumer when the value changes. Keep high-churn state close to the consumers that need it.

Read the Intro for the component model and data flow end to end. Use the Cheatsheet when you need the Hooks and list checklist. The Timeline and Landscape place React among related UI libraries; Updates tracks the release line that changes the APIs this course teaches.

Where this skill leads

Relevant careers

See how this topic contributes to broader role-level skill maps.

Sources