Overview
React user interface & Components
UI is built from small units like buttons, text, and images. React lets you combine them into reusable, nestable components. A React component is a JavaScript function that you can sprinkle with markup.
Importing and exporting components
You can declare many components in one file, but large files can get difficult to navigate. To solve this, you can export a component into its own file, and then import that component from another file.
Writing markup with JSX
Each React component is a JavaScript function that may contain some markup that React renders into the browser. React components use a syntax extension called JSX to represent that markup. JSX looks a lot like HTML, but it is a bit stricter and can display dynamic information.
If you have existing HTML, you can fix it using a converter
https://transform.tools/html-to-jsx
JavaScript in JSX with curly braces
Sometimes you will want to add a little JavaScript logic or reference a dynamic property inside that markup. In this situation, you can use curly braces in your JSX.
Passing props to a component
Props might remind you of HTML attributes, but you can pass any JavaScript value through them, including objects, arrays, functions, and even JSX!
Conditional rendering
In React, you can conditionally render JSX using JavaScript syntax like if statements, &&, and ? : operators.
Rendering lists
You can use JavaScript’s filter() and map() with React to filter and transform your array of data into an array of components. For each array item, you will need to specify a key. Usually, you will want to use an ID from the database as a key. Keys let React keep track of each item’s place in the list even if the list changes.
Keeping components pure
A pure function:
- Minds its own business. It does not change any objects or variables that existed before it was called.
- Same inputs, same output. Given the same inputs, a pure function should always return the same result.
By strictly only writing your components as pure functions, you can avoid an entire class of baffling bugs and unpredictable behavior as your codebase grows.
Your UI as a tree
React uses trees to model the relationships between components and modules. A React render tree is a representation of the parent and child relationship between components.