React.
Code.
Snippets.
Most common quick and reusable React code pieces
React.
Code.
Snippets.
Most common quick and reusable React code pieces
Fragments
function ComponentWithFragments() {
return (
// Won't work without fragments
// because it would have two root elements
<>
<div>Item 1</div>
<div>Item 2</div>
</>
);
}Conditional Rendering
function ComponentWithCR(props) {
if (props.label === "Cold") {
return <p>It is cold</p>;
} else {
return <p>It is normal</p>;
}
}function ComponentWithCR2(props) {
return <p>
{props.label === "Cold" ? "It is cold" : "It is normal"}
</p>;
}function ComponentWithCR3(props) {
function getLabel() {
return props.label === "Cold" ? "It is cold" : "It is normal";
}
return <p>{getLabel()}</p>;
}Inline Style
function ComponentWithInlineStyle(props) {
return <div style={{ color: "purple" }}>{props.label}</div>;
}CSS classes
import "./styles.css";
function ComponentWithClassName(props) {
return <div className="label">{props.label}</div>;
}CSS modules
import styles from "./styles.module.css";
function ComponentWithModuleClassName(props) {
return <div className={styles["label"]}>{props.label}</div>;
}Composition
function ComponentWithChildren({ children }) {
return <div>{children}</div>;
}function ComponentWithMultipleChildren({ left, right }) {
return (
<div className="container">
<div className="left">{left}</div>
<div className="right">{right}</div>
</div>
);
}import Button from "./Button";
function ComponentWithComponent({ label }) {
return (
<div className="container">
<Button label={label} />
</div>
);
}Events
function ComponentWithEvent() {
function handleClick() {
alert("Clicked!");
}
return (
<div className="button" onClick={handleClick}>
Click me
</div>
);
}Props
function ComponentWithProps(props) {
return <div>{props.label}</div>;
}function ComponentWithPropsDestruct({ label }) {
return <div>{label}</div>;
}function ComponentPassingProps({ label, variant }) {
return (
<div className="container">
<Button
label={label}
variant={variant}
size="small"
/>
</div>
);
}Components with List
function ComponentWithList() {
const items = ["Item 1", "Item 2", "Item 3"];
return (
<ul>
{items.map((item) => (
<li key={item}>{item}</li>
))}
</ul>
);
}Hooks
import { useState } from "react";
function ComponentWithUseState() {
const [countStars, setCountStars] = useState(0);
function updateCountStars() {
setCountStars(countStars + 1);
}
return <button onClick={updateCountStars}>Stars are: {countStars}</button>;
}import { useEffect, useState } from "react";
function ComponentWithUseEffect() {
const [countStars, setCountStars] = useState(0);
function updateCountStars() {
setCountStars(countStars + 1);
}
useEffect(() => {
// Reset stars after 1 second
setTimeout(() => {
setCountStars(0);
}, 1000);
}, []);
return <button onClick={updateCountStars}>Stars are: {countStars}</button>;
}import { useRef } from "react";
function ComponentWithUseRef() {
const ref = useRef();
useEffect(() => {
if (ref.current) {
ref.current.setAttribute("value", 10);
}
}, [ref.current]);
return <input ref={ref} placeholder="Enter stars count" />;
}// Use context
import { useContext } from "react";
import Context from "./Context";
function ComponentWithContext() {
const value = useContext(Context);
return <div>{value}</div>;
}
// Create the context
import { createContext } from "react";
const Context = createContext({
name: "John",
age: 30,
});import { useMemo } from "react";
function List({ items, tab }) {
const visibleItems = useMemo(() => filterItems(items, tab), [items, tab]);
return (
<ul>
{visibleItems.map((item) => (
<li key={item}>{item}</li>
))}
</ul>
);
}Fragments
function ComponentWithFragments() {
return (
// Won't work without fragments
// because it would have two root elements
<>
<div>Item 1</div>
<div>Item 2</div>
</>
);
}Conditional Rendering
function ComponentWithCR(props) {
if (props.label === "Cold") {
return <p>It is cold</p>;
} else {
return <p>It is normal</p>;
}
}function ComponentWithCR2(props) {
return <p>
{props.label === "Cold" ? "It is cold" : "It is normal"}
</p>;
}function ComponentWithCR3(props) {
function getLabel() {
return props.label === "Cold" ? "It is cold" : "It is normal";
}
return <p>{getLabel()}</p>;
}Inline Style
function ComponentWithInlineStyle(props) {
return <div style={{ color: "purple" }}>{props.label}</div>;
}CSS classes
import "./styles.css";
function ComponentWithClassName(props) {
return <div className="label">{props.label}</div>;
}CSS modules
import styles from "./styles.module.css";
function ComponentWithModuleClassName(props) {
return <div className={styles["label"]}>{props.label}</div>;
}Composition
function ComponentWithChildren({ children }) {
return <div>{children}</div>;
}function ComponentWithMultipleChildren({ left, right }) {
return (
<div className="container">
<div className="left">{left}</div>
<div className="right">{right}</div>
</div>
);
}import Button from "./Button";
function ComponentWithComponent({ label }) {
return (
<div className="container">
<Button label={label} />
</div>
);
}Events
function ComponentWithEvent() {
function handleClick() {
alert("Clicked!");
}
return (
<div className="button" onClick={handleClick}>
Click me
</div>
);
}Props
function ComponentWithProps(props) {
return <div>{props.label}</div>;
}function ComponentWithPropsDestruct({ label }) {
return <div>{label}</div>;
}function ComponentPassingProps({ label, variant }) {
return (
<div className="container">
<Button
label={label}
variant={variant}
size="small"
/>
</div>
);
}Components with List
function ComponentWithList() {
const items = ["Item 1", "Item 2", "Item 3"];
return (
<ul>
{items.map((item) => (
<li key={item}>{item}</li>
))}
</ul>
);
}Hooks
import { useState } from "react";
function ComponentWithUseState() {
const [countStars, setCountStars] = useState(0);
function updateCountStars() {
setCountStars(countStars + 1);
}
return <button onClick={updateCountStars}>Stars are: {countStars}</button>;
}import { useEffect, useState } from "react";
function ComponentWithUseEffect() {
const [countStars, setCountStars] = useState(0);
function updateCountStars() {
setCountStars(countStars + 1);
}
useEffect(() => {
// Reset stars after 1 second
setTimeout(() => {
setCountStars(0);
}, 1000);
}, []);
return <button onClick={updateCountStars}>Stars are: {countStars}</button>;
}import { useRef } from "react";
function ComponentWithUseRef() {
const ref = useRef();
useEffect(() => {
if (ref.current) {
ref.current.setAttribute("value", 10);
}
}, [ref.current]);
return <input ref={ref} placeholder="Enter stars count" />;
}// Use context
import { useContext } from "react";
import Context from "./Context";
function ComponentWithContext() {
const value = useContext(Context);
return <div>{value}</div>;
}
// Create the context
import { createContext } from "react";
const Context = createContext({
name: "John",
age: 30,
});import { useMemo } from "react";
function List({ items, tab }) {
const visibleItems = useMemo(() => filterItems(items, tab), [items, tab]);
return (
<ul>
{visibleItems.map((item) => (
<li key={item}>{item}</li>
))}
</ul>
);
}Hop on the train 🚂🚂🚂
Subscribe to my newsletter and receive updates on the best resources on the internet
Follow me on
Hop on the train 🚂🚂🚂
Subscribe to my newsletter and receive updates on the best resources on the internet
Follow me on
Hop on the train 🚂🚂🚂
Subscribe to my newsletter and receive updates on the best resources on the internet
Follow me on