---
title: React
date: 2023-11-17 10:12:25
background: bg-[#1289D8]
tags:
- react
- web
categories:
- Programming
intro: |
A React cheat sheet with the most important concepts, functions, methods, and more. A complete quick reference for beginners.
plugins:
- copyCode
- runCode
---
## Getting Started
### JSX
JSX is a syntax extension for JavaScript that lets you write HTML-like markup inside a JavaScript file.
```javascript
let element =
Hello, world!
;
let emptyHeading = ;
```
### JSX Expressions
```javascript
let name = "Josh Perez";
let element =
Hello, {name}
;
function fullName(firstName, lastName) {
return firstName + " " + lastName;
}
let element =
)
```
### JSX Conditional Rendering {.col-span-2}
```javascript
import React from "react";
function Weather(props) {
if (props.temperature >= 20) {
return (
It is {props.temperature}°C (Warm) in {props.city}
);
} else {
return (
It is {props.temperature}°C in {props.city}
);
}
}
export default () => ;
```
Note: A component must always return something.
## Components
### Functional Component
```javascript
import React from "react";
export default function UserProfile() {
return (
Hello
World
);
}
```
Note: Every component needs one root element
### Embed an internal Component
```javascript
import React from "react";
import UserAvatar from "./UserAvatar";
export default function UserProfile() {
return (
);
}
```
Note: Assuming UserAvatar is declared in UserAvatar.js
### Embed an external Component
```javascript
import React from "react";
import ComponentName from "component-name";
export default function UserProfile() {
return (
);
}
```
Note: External components are found on npmjs.com and need to be imported first.
### Advanced Functional Components
```javascript
import React from "react";
function Hello(props) {
function fullName() {
return `${props.firstName} ${props.lastName}`;
}
return
{fullName()}
;
}
export default () => ;
```
## Properties {.cols-2}
### Passing Properties to a Component
```javascript
```
### Assigning the Properties from a Component
```javascript
import React from "react";
export default function Student(props) {
return (
{props.firstName} {props.lastName} is {props.age}.
);
}
```
## States {.cols-1}
### React State
```javascript
import React, { useState } from "react";
export default function Hello(props) {
let [name, setName] = useState("Julie");
function updateName() {
let newName = prompt("What is your name?");
setName(newName);
}
return (
{name}
);
}
```
## Events {.cols-1}
### Event Listener
```javascript
import React from "react";
export default function Hello() {
function handleClick(event) {
event.preventDefault();
alert("Hello World");
}
return (
Say Hi
);
}
```
Note: The most common event listeners are onClick for links/buttons and onSubmit for forms.
## Loops {.cols-2}
### Looping through an Array
```javascript
let elements = ["one", "two", "three"];
return (
{elements.map(function (value, index) {
return
{value}
;
})}
);
```
Note: Each list item inside a map loop needs a key attribute with a unique value which is generally the index.
### Looping through an Array of Objects
```javascript
let elements = [
{
name: "one",
value: 1,
},
{
name: "two",
value: 2,
},
{
name: "three",
value: 3,
},
];
return (
);
```
Note: Each list item inside a map loop needs a key attribute with a unique value which is generally the index.
## Forms {.cols-1}
### React Forms
```javascript
import React, { useState } from "react";
export default function LoginForm() {
let [username, setUsername] = useState("");
let [password, setPassword] = useState("");
function handleSubmit(event) {
event.preventDefault();
alert(`Loging in with ${username} and ${password}`);
}
function updateUsername(event) {
setUsername(event.target.value);
}
function updatePassword(event) {
setPassword(event.target.value);
}
return (
);
}
```
## CSS {.cols-1}
### CSS in a React Component
```javascript
import React from "react";
import "./Student.css";
export default function Student() {
return
Julie Johnson
;
}
```
Note: You'll then have to crate a css file called Student.css
## AJAX {.cols-1}
### AJAX Request with Axios
```javascript
import React from "react";
import axios from "axios";
export default function Weather(props) {
function handleResponse(response) {
console.log(response);
}
if (notifications) {
return
notifications
;
} else {
let url = `https://notifications.com`;
axios.get(url).then(handleResponse);
return
Loading notifications..
;
}
}
```
Note: Make sure to import Axios first to your project.
## Hooks {.cols-2}
### useState Hook
```javascript
import React, { useState } from "react";
function Counter() {
const [count, setCount] = useState(0);
return (
Count: {count}
);
}
export default Counter;
```
Note: The useState Hook is a built-in React Hook that allows functional components to manage local state. It provides a
way to declare state variables and update them within a functional component. Example code illustrating how to use it
### Multiple State Variable Declaration
```javascript
import React, { useState } from "react";
function Counter() {
const [count, setCount] = useState(0);
const [name, setName] = useState("");
const [isCompleted, setIsCompleted] = useState(false);
const handleIncrement = () => {
setCount(count + 1);
};
const handleNameChange = (event) => {
setName(event.target.value);
};
const toggleCompletion = () => {
setIsCompleted(!isCompleted);
};
return (
Count: {count}
);
}
export default Counter;
```
Note: You can declare multiple state variables using the useState Hook by calling it multiple times in a functional
component. Each call to useState manages a separate piece of state.
### Input State Management
```javascript
import { useState } from "react";
function FormExample() {
const [formData, setFormData] = useState({
name: "",
email: "",
message: "",
});
const handleChange = (event) => {
const { name, value } = event.target;
setFormData((prevFormData) => ({ ...prevFormData, [name]: value }));
};
const handleSubmit = (event) => {
event.preventDefault();
alert(`Name: ${formData.name}, Email: ${formData.email}, Message: ${formData.message}`);
};
return (
);
}
export default FormExample;
```
### useEffect Hook
```javascript
import React, { useState, useEffect } from "react";
function Timer() {
const [seconds, setSeconds] = useState(0);
useEffect(() => {
const interval = setInterval(() => {
setSeconds((prevSeconds) => prevSeconds + 1);
}, 1000);
return () => clearInterval(interval);
}, []);
return
Seconds: {seconds}
;
}
export default Timer;
```
Note: The useEffect Hook in React is used for performing side effects in functional components. It allows you to execute
code based on component lifecycle events like mounting, updating, and unmounting.
### Fetch API using useEffect
```javascript
import React, { useState, useEffect } from "react";
import axios from "axios";
function UserList() {
const [users, setUsers] = useState([]);
useEffect(() => {
axios
.get("https://jsonplaceholder.typicode.com/users")
.then((response) => {
setUsers(response.data);
})
.catch((error) => {
console.error("Error fetching users:", error);
});
}, []);
return (
User List
{users.map((user) => (
{user.name}
))}
);
}
export default UserList;
```
Note: Make sure to import Axios first to your project.
### Custom Hook creation useLocalStorage
```javascript
import { useState, useEffect } from "react";
function useLocalStorage(key, initialValue) {
const [value, setValue] = useState(() => {
const storedValue = localStorage.getItem(key);
return storedValue !== null ? JSON.parse(storedValue) : initialValue;
});
useEffect(() => {
localStorage.setItem(key, JSON.stringify(value));
}, [key, value]);
return [value, setValue];
}
export default useLocalStorage;
```
Note: Custom Hooks are reusable functions in React that contain logic shared across multiple components. They allow you
to extract stateful logic from components into standalone functions.
### Creating Refs in Class Components
```javascript
import React, { Component } from "react";
class MyComponent extends Component {
constructor(props) {
super(props);
this.myRef = React.createRef();
}
componentDidMount() {
console.log(this.myRef.current); // Access the DOM element
}
render() {
return
Hello, world!
;
}
}
export default MyComponent;
```
### Using Refs in Functional Components
```javascript
import React, { useRef, useEffect } from "react";
function MyComponent() {
const myRef = useRef(null);
useEffect(() => {
console.log(myRef.current); // Access the DOM element
}, []);
return
Hello, world!
;
}
export default MyComponent;
```
### Callback Refs
```javascript
import React, { Component } from "react";
class MyComponent extends Component {
constructor(props) {
super(props);
this.myRef = null;
this.setRef = (element) => {
this.myRef = element;
};
}
componentDidMount() {
console.log(this.myRef); // Access the DOM element
}
render() {
return
Hello, world!
;
}
}
export default MyComponent;
```
### Forwarding Refs
```javascript
Copy code
import React from "react";
const FancyButton = React.forwardRef((props, ref) => (
));
// Usage
const ref = React.createRef();
Click me!;
```
### Accessing DOM Elements with Refs
```javascript
import React, { useRef, useEffect } from "react";
function FocusInput() {
const inputRef = useRef(null);
useEffect(() => {
// Focus the input element when the component mounts
inputRef.current.focus();
}, []);
return ;
}
export default FocusInput;
```
Note: Refs are often used to access and interact with DOM elements directly. Here's an example where we focus an input
element using a ref.
### Managing Focus with Refs
```javascript
import React, { useRef } from "react";
function Form() {
const firstInputRef = useRef(null);
const secondInputRef = useRef(null);
const handleKeyDown = (e) => {
if (e.key === "Enter") {
secondInputRef.current.focus();
}
};
return (
);
}
export default Form;
```
Note: You can also manage focus between multiple elements using refs.