Please enable JavaScript.
Coggle requires JavaScript to display documents.
React Core (JSX (Syntax extension to JavaScript used with React to…
React Core
JSX
Syntax extension to JavaScript used with React to describe what the UI should look like. JSX produces "React elements" and it comes with the full power of JavaScript
Embedding Expressions in JSX - you can embed any JavaScript expression in JSX by wrapping it in curly braces. When splitting JSX over multiple lines it's recommended to wrap the code in parentheses to avoid the pitfalls of automatic semicolon insertion
JSX is an Expression - after compilation, JSX expressions become regular JavaScript function calls and evaluate to JavaScript objects
Specifying Attributes with JSX - you may use curly braces to embed a JavaScript expression in an attribute as well as quotes to specify string literals as attributes
JSX Prevents Injection Attacks - It is safe to embed user input in JSX as by default, React DOM escapes any values embedded in JSX before rendering them. Everything is converted to a string before being rendered which helps prevent XSS attacks.
JSX Represents Objects - Babel compiles JSX down to React.createElement() calls. It creates objects which are called "React elements".
Key Concepts
Rendering logic is inherently coupled with other UI logic: how events are handled, how the state changes over time, and how the data is prepared for display
React separates concerns with loosely coupled units called “components” that contain both markup and logic
Pure Functions
Function which do not attempt to change their inputs, and always return the same result for the same inputs. The oposite are called impure functions
-
State
State is similar to props, but it is private and fully controlled by the component
Props
When React sees an element representing a user-defined component, it passes JSX attributes to this component as a single object, called "props"
-
Rendering Elements
An element describes what you want to see on the screen. It is the smallest building block of React applications. Elements are what components are "made of". React elements are immutable
Unlike browser DOM elements, React elements are plain objects, and are cheap to create
Rendering and Element into the DOM - Applications built with just React usually have a single root DOM node. To render a React element into a root DOM node, pass the element and the root DOM element to ReactDOM.render()
Updating the Rendered Element - Once you create an element, you cannot change its children or attributes as elements in React are immutable. An element represents the UI at a certain point in time. Most React apps only call ReactDOM.render() once.
React Only Updates What's Necessary - React DOM compares the element and its children to the previous one, and only applies the DOM updates necessary to bring the DOM TO the desired state.
Components and Props
Components let you split the UI into independent, reusable pieces, and think about each piece in isolation.
-
Rendering a Component - Elements can also represent user-defined components. Components can refer to other components in their output. This lets us use the same component abstraction for any level of detail. Don’t be afraid to split components into smaller components.
Props are Read-Only - Whether you declare a component as a function or a class, it must never modify its own props. All React components must act like pure functions with respect to their props.
State and Lifecycle
State is similar to props, but it is private and fully controlled by the component. Local state is a feature available only to classes.
-
In applications with many components, it’s very important to free up resources taken by the components when they are destroyed
mounting - when the component is rendered to the DOM for the first time. Could be used with componentDidMount()
-
-
If you don’t use something in render(), it shouldn’t be in the state.
Using State Correctly
Do Not Modify State Directly. Use this.setState({comment: 'Hello'}) instead. The only place where you can assign this.state is the constructor
State Updates May Be Asynchronous. React may batch multiple setState() calls into a single update for performance.
State Updates are Merged When you call setState(), React merges the object you provide into the current state. The merging is shallow
tod-down (unidirectional) data flow - Any state is always owned by some specific component, and any data or UI derived from that state can only affect components “below” them in the tree
Handling Events
-
You cannot return false to prevent default behaviour in React. You must call preventDefault explicitly
In JavaScript, class methods are not bound by default
Alternative to binding the methods in the constructor is the use of the experimental public class fields syntax
Conditional Rendering
In React, you can create distinct components that encapsulate behavior you need. Then, you can render only some of them, depending on the state of your application.
-
-
Preventing Component from Rendering - return null instead of its render output. Returning null from a component’s render method does not affect the firing of the component’s lifecycle methods.
Lists and Keys
Rendering Multiple Components
- You can build collections of elements and include them in JSX using curly braces {}
Keys
-
Keys help React identify which items have changed, are added, or are removed.
-
The best way to pick a key is to use a string that uniquely identifies a list item among its siblings. Most often you would use IDs from your data as keys. When you don’t have stable IDs for rendered items, you may use the item index as a key as a last resort
-
Keys serve as a hint to React but they don’t get passed to your components and need to be passed explicitly as a prop with a different name
Forms
Controlled Components
In HTML, form elements such as <input>, <textarea>, and <select> typically maintain their own state and update it based on user input
In React, mutable state is typically kept in the state property of components, and only updated with setState()
We can combine the two by making the React state be the “single source of truth”. Then the React component that renders a form also controls what happens in that form on subsequent user input. An input form element whose value is controlled by React in this way is called a “controlled component”.
With a controlled component, every state mutation will have an associated handler function.
Lifting State Up
If several components need to reflect the same changing data the state should be lifted up to their closes common ancestor.
In React, sharing state is accomplished by moving it up to the closest common ancestor of the components that need it. This is called “lifting state up”.
There should be a single “source of truth” for any data that changes in a React application. Usually, the state is first added to the component that needs it for rendering. Then, if other components also need it, you can lift it up to their closest common ancestor. Instead of trying to sync the state between different components, you should rely on the top-down data flow.
top-down data flow involves writing more boilerplate compared to the two-way binding approach. However, as a benefit, it takes less work to find and isolate bugs.
-
-
