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

React Fundamentals

React is a JavaScript library for building user interfaces from components. A component is a JavaScript function that returns a description of part of the interface. Components can be as small as a button or as large as a page. You combine them into a tree that represents the screen.

React focuses on the interface layer. It does not prescribe routing, data fetching, styling, or deployment. A full application therefore combines React with browser APIs, libraries, build tools, or a framework. The React documentation recommends a framework for 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.

The component tree

Each component receives inputs called props and returns React elements, usually written with JSX. JSX is a syntax extension that places markup near the JavaScript logic that controls it. A JSX element such as <Profile user={user} /> becomes a description of the component type and its props. JSX is common but optional.

Component names begin with a capital letter. Lowercase JSX names refer to built-in host elements such as div, button, and input. Components may render other components, creating a parent-child tree. Data normally moves from parents to children through props. This one-way flow makes the source of a displayed value explicit.

Props are read-only snapshots. A child must not mutate them. To change information, the component that owns that information updates state and passes new props down. Event-handler functions can travel down as props so a child can request that update.

Rendering and committing

Continue the course

This section is part of the paid course.

See pricing to subscribe, or log in if you already have access.

Where this skill leads

Relevant careers

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

Sources