React Cheat Sheet 2020

Posted on by



  1. React Testing Library Cheat Sheet
  2. React Cheat Sheet 2020 Free
  3. React Js Cheatsheet
  4. React Cheat Sheet 2020 Printable
← Go Back
Broken Post? → Let me know

React.Js (V0.14) Cheat Sheet. Deprecated: this guide targets an old version of React (v0.14). See the updated React cheatsheet for new versions. Table of contents. Req uir edFunc: React.P ro pTy pes.fu nc.i sR equ ired, req uir edAny: React.P ro pTy pes.an y.i sRe quired, // primit ives, optional by default. Celebrities Cheat Sheet. Watch: Joe Biden Wins 2020 U.S. Election: Celebrities React. Hello sunshine, happy Monday. (drumroll) the 2020 election. While your eyes were glued on Nevada.

2020-06-12 Updates

The React Cheatsheet for 2020 📄‬ (+ real-world examples) Resource. Posted by 21 days ago. Vpn unlimited download for mac. The React Cheatsheet for 2020 📄‬ (+ real-world examples).

  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.

React Testing Library Cheat Sheet

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

  1. Create a file postcss.config.js in the project root.
  1. 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 Cac download for mac.

React Cheat Sheet 2020 Free

React

5. Create NPM Scripts

package.json scripts.

React Js Cheatsheet

  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

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

React Cheat Sheet 2020 Printable

Webmentions

Loading counts.. Quickbooks 2019 for mac download.

Fetching Replies..