Build with react (Paul Shen) View: Learning React.js: Getting Started and Concepts (Scotch) View: React.js Cheatsheet (Devhints) View: React Cheat Sheet (ReactCheatSheet.com) View: React Cheat Sheet (PDF) (ihatetomatoes) View: 10 Super-Useful React Components, Libraries & Tools (Speckyboy) View: React. The React Cheatsheet for 2020 The React Cheatsheet for 2020 Snag this super in-depth, massive PDF to give you the complete developer's guide to mastering React in 2020, including tons of practical examples, copyable code and more. React.js Cheat sheet Quick Learning. As of React v16.2.0, fragments can be used to return multiple children. 9/15/2020 9:22:26 PM.

2020-06-12 Updates

1. Replaced autoprefixer with postcss-preset-env, which supports autopprefixer and more. Set up instruction can be found in the official documentation too.
2. Tailwind CSS version 1.4.4 supports purge css natively. Installation for purgecss & @fullhuman/postcss-purgecss are removed.

2020-02-29 Updates

1. Replaced concurrently with npm-run-all
2. Fixed initial empty page load - Added sleep 5 in package.json.

Based on https://github.com/billimarie/simple-react-tailwind-tutorial

Assumption

I will assume that you know how to create a new React site using Create-React-App and created a site.

Table of Contents

1. Install DEV dependencies
2. Create Tailwind configuration file
3. Configure PostCSS for Tailwind
4. Create a Tailwind file
5. Create NPM scripts
6. Import Tailwind CSS Output

1. Install DEV dependencies

2. Create Tailwind configuration file

3. Configure PostCSS for Tailwind

React Cheat Sheet 2020 Free

1. Create a file postcss.config.js in the project root.

2. Configure Post CSS to work with Tailwind
   1. postcss-preset-env - Supports newer CSS syntax and much more! (e.g. replaces autoprefixer)
   2. cssnano - Minify CSS to reduce bundle size

4. Create a Tailwind file

Create a file ./src/styles/tailwind.css.

Add following Tailwind utilities

5. Create NPM Scripts

package.json scripts.

1. build:css - converts Tailwind to CSS
2. watch:css - Watch Tailwind changes and writes CSS
3. env:dev/prod - Sets an environment variable for development or production mode
4. react-scripts:start: Starts 5 seconds later to prevent an initial empty page
5. react-scripts:build: Creates a production-ready bundle
6. start - Watches Tailwind changes and starts CRA
7. build - Build Tailwind and production version of CRA site

React Js Cheatsheet

6. Import Tailwind CSS Output

1. Go to ./src/index.js
2. Replace import './index.css'; with import './styles/index.css';

Resources

1. create-react-app template in TypeScript (created by me 🙂), cra-template-tailwindcss-typescript.
   • Scaffold a new CRA app like npx create-react-app my-app --template tailwindcss-typescript
   • Most of steps in this post is used in the project
2. Demo repository - https://github.com/dance2die/template.tailwind.cra
   • Created by following this post
3. CodeSandbox template - https://codesandbox.io/s/create-react-app-tailwind-oqvyu
   • You can fork and play around with Tailwind + React with this one :)

Image Credit: Patent Model of a Sheet-Feed Apparatus for Printing Machines

Webmentions

Loading counts...

I just finished watching this excellent video series on Egghead. I found that it really simplified a lot of the hard parts of useEffect and also explained a few of the other hooks that I haven't taken the time to learn yet. I was so impressed by it that I was inspired to write down an even shorter version for later reference to help reinforce the lessons, and also to share with you. If any of this feels like there's not enough detail for you, I would highly encourage you to check out the videos on egghead, where Ryan goes into more detail and gives examples for each.

useState

I'm not going to cover useState because that's out of scope for what I want to accomplish here, but it is a pre-requisite for understanding what's below. If that one doesn't make sense to you already, you won't understand the rest of these.

useEffect

useEffect has three different usage modes, and is used to synchronize React with anything that React doesn't control; from the page title to making AJAX requests or dealing with device api's (like getUserMedia).

1. No 2nd argument: Executes on every render.

2. Array of variables as 2nd argument: Executes any time any of those variables change.

React Js Cheat Sheet Pdf

3. Empty array as 2nd argument: Executes only on FIRST render, and never again until page refresh.

In this case, I'm attaching an event listener to the window's resize event, and if I re-run that every time the component re-renders, I'll be attaching a new listener every time, effectively calling my listener potentially hundreds or thousands of times every time the event occurs.

If your effect creates something that needs to be cleaned up when the component is removed (like removing created event listeners), the effect should return a function that does that cleanup work, and React will run it only when the cleanup is needed. Since that's exactly what I did in the last code block above, let's fix it to be correct here:

React Cheat Sheet 2020 Pdf

useRef

Not just for persisting a reference to an input element!

useRef can be treated similarly to useState, except that it doesn't trigger a re-render. If your render function displays the ref value, the rendered content won't be updated when the ref is updated, but if something triggers a re-render then the latest value from the ref is available to the render function. You can use this to track data changes in a more performant way, as long as you don't need those changes to be re-rendered.

useMemo

Memoization is caching the results of a pure function, which can be helpful if that function requires intensive or long-running calculations. While implementing memoization is a simple and well understood pattern, useMemo combines that with the API of useEffect so that it only ever runs if the input values change.

useCallback

Whereas useMemo returns a memoized value, useCallback returns a memoized function. When you want to be able to pass the memoized callback function around as a property, use useCallback instead. Via closure this helps you expose functionality without exposing internal state.

useLayoutEffect

useLayoutEffect is different from useEffect in that it runs before the DOM paints. This allows you to make changes that will affect what your app looks like (positioning elements, for example), without causing the screen to flash with a repaint because you moved something immediately after it was painted.

useContext

Contexts have been around for a while now as a useful way to work around prop drilling. useContext makes it simple to create and access contexts wherever you need them.

Creating and applying the provider:

Using properties of the context elsewhere:

useReducer

This one is like a mashup of useState and Redux. You dispatch actions that are all handled by a single (composable if you want) reducer, to update a state object containing multiple values. Generally considered a best practice not to group values that aren't related. For example, groupe the state for inputs in a form.

useDebugValue

Lastly, useDebugValue allows you to highlight something in the React Dev Toolsfrom inside a custom hook. Think of it like console.log but better. When your debug value is large or complex, you can improve app performance by passing a 2nd argument to useDebugValue. The 2nd argument is a function and is used to format the value. This can be a performance benefit because the format function is only called if the value is inspected in the dev tools.

This shows up in the devtools as a key-value pair, and the key name is the name of your custom hook.

Wrapping Up

As I mentioned at the top, this was a heavily summarized version of what I learned from Ryan Harris' egghead course, React Hooks: Revisited. Thanks to Ryan for a fantastic quick video course and his simple and clear explanations!