React Common Techniques

Overview

This guide will give you an introduction to key React concepts and common techniques that you will use on a daily basis while developing React Apps. The sub-pages below cover three patterns you’ll reach for in almost every component you build: applying styles, showing UI conditionally, and rendering a list of items from an array.

Contents

• Styling Components via CSS — Approaches for styling React components, from importing plain .css files to CSS Modules and inline style props.
• Conditional Rendering — Show different markup based on props or state using if/else, the ternary operator (condition ? a : b), or the logical AND (condition && jsx). See Conditional Rendering on react.dev for the canonical reference.
• Rendering Lists — Use Array.prototype.map() to transform an array into a list of React elements, and give each item a stable key prop so React can track it across re-renders. See Rendering Lists on react.dev for the canonical reference.