React 18: A Fast-Track Guide to Core Concepts

This guide introduces core React ideas for building front-end web interfaces. React organizes user interfaces into reusable components. The article uses React 18 as its subject; check the version and current documentation before applying setup or API details to a new project.

What is React?

React is a JavaScript library for building user interfaces. Its component-based approach lets developers split an interface into smaller pieces and combine them into a complete application.

React and Vue

Both React and Vue are used to build user interfaces. The source article contrasts React’s use of JSX with Vue’s single-file component format, which can keep template, style and script together. It also characterizes React as having a larger ecosystem and Vue as easier to start learning. These comparisons depend on project needs and are not a universal ranking.

Core React concepts

• Components: reusable pieces of a user interface, written as functions or classes.
• JSX: a JavaScript syntax extension that lets developers describe UI in a markup-like form.
• Props: values passed from a parent component to a child component; a child should treat props as read-only.
• State: component data that can change over time.
• Event handling: responding to actions such as a button click.

Components and JSX

Function components return the UI to display and can accept props and use hooks. Class components extend React.Component. Reusable components can make code easier to organize. JSX looks like markup inside JavaScript and is transformed by the project’s build tool before the browser runs it.

Passing props and checking prop types

Props pass information from a parent to a child through component attributes. The source article also introduces PropTypes as a way to check the types a component receives and catch some incorrect values.

Styling a React interface

The article covers importing a CSS file and using CSS Modules. A CSS Module scopes class names to a component so that styles are less likely to collide with styles elsewhere in an application. The appropriate approach depends on the project setup.

Conditions and lists

Conditional UI can use JavaScript if/else logic or a short conditional expression inside JSX. The article presents .map() as the common way to turn an array into a list of interface elements.

Hooks, routing and component files

Hooks let function components use state and other React features. Examples named in the source include useState, useEffect and useContext. React Router is introduced for route handling, including redirects and route parameters. Components can be exported with export or export default and imported into another file. In React, the HTML class attribute is written as className.

Start a project with Vite

The source article recommends creating a React project with npm create vite@latest. It describes a typical project layout with src for application code, public for static files, package.json for project configuration and index.html as the HTML entry point. The main.jsx file mounts the main app component, while App.jsx organizes the primary interface and logic.

Build the interface with reusable pieces

The examples outlined in the source include making Header and Footer components, creating an Image component that receives an image URL as a prop, exporting and importing components, validating props, and choosing between regular CSS and CSS Modules. The article also revisits conditionals and mapping arrays to UI elements.

Where React is used

The source lists web applications, single-page applications, progressive web apps, interactive interfaces and UI libraries. React Native is mentioned for mobile application development. The best fit depends on the product, platform requirements and team experience.