Tl;Dr React

Quick and easy React snippets that you're always looking for but never find

All Snippets

A Simple React Component

React components implement a render() method that takes input data and returns what to display. This example uses an XML-like syntax called JSX. Input data that is passed into the component can be accessed by render() via this.props.

Go to code snippet

fetch

Doing a (GET) fetch request

Doing a (GET) fetch request on component mount

Go to code snippet

component

A simple React function component

This is a simple react function component

Go to code snippet

event-handling

EVENT HANDLER IN REACT

a button example in React for a specific onClick event handler

Go to code snippet

component

Conditional Rendering in React

Use JavaScript operators like if or the conditional operator to create elements representing the current state

Go to code snippet

component

React Fragments

Render multiple react components without the need of a DOM elevent wrapper

Go to code snippet

hooks

useEffect hook in React

Returns a stateful value, and a function to update it

Go to code snippet

hooks

useReducer hook in React

useEffect hooks lets perform an action whenever a value changes

Go to code snippet

hooks

useState hook in React

Returns a stateful value, and a function to update it

Go to code snippet

component

Simple Form in React

A simple form in React using useState hooks

Go to code snippet

component

Set innerHTML in a React Component

dangerouslySetInnerHTML is React’s replacement for using innerHTML in the browser DOM.

Go to code snippet