Skip to main content

React Cheatsheet

Recipes

RecipeLinks
Including an image in your React apphttps://codesandbox.io/s/showing-images-in-create-react-app-tyyd9?file=/src/App.js
Including an image in your React app (alternative method)https://codesandbox.io/s/showing-images-in-create-react-app-0n77h?file=/src/App.js
Importing a CSS file into your React componenthttps://codesandbox.io/s/using-css-in-create-react-app-2cu6y?file=/src/App.js
Including a custom font in your React apphttps://codesandbox.io/s/using-custom-fonts-into-create-react-app-tjw28?file=/src/App.js
Mapping over an array with JSXhttps://codesandbox.io/s/mapping-over-an-array-with-jsx-qsqzh?file=/src/App.js
Conditional rendering with JSXhttps://codesandbox.io/s/conditional-rendering-with-jsx-b2ryk?file=/src/App.js
Quick React setuphttps://codesandbox.io/s/affectionate-dream-fmg69?file=/src/App.js

Using a 3rd-party library in your React app (example: "lodash")

  • In your terminal, run the following command:
npm install lodash
  • Go to the file where you want to use the package and import it with require('package-name'):
const lodash = require('lodash')
  • You should now be able to use the package in that file:
let num = lodash.random(0, 10);
SubjectLink
React code snippets for hookshttps://devhints.io/react#hooks-new
JSX syntaxhttps://reactjs.org/docs/introducing-jsx.html
Array Destructuring explained (useful for useState)https://github.com/wesbos/es6-articles/blob/master/19%20-%20Destructing%20Arrays.md
create-react-app docshttps://create-react-app.dev/docs/getting-started
List special event-handler props (onClick, etc)https://reactjs.org/docs/events.html#reference
Glossary of React Termshttps://reactjs.org/docs/glossary.html

Netlify deployment

As before! You can set up automatic Netlify deployment from GitHub in the same way as your earlier HTML + JS websites.

Netlify should automatically set the following important build settings:

Important Netlify build settingsValue
"publish directory"build/
"build command"npm run build

Note that your deployment doesn't happen instantly. Netlify needs some time to "build" your React project. The build process turns your beautiful human-readable React Components into optimised machine-readable code that can run in a web browser.

The full Netlify cheat sheet can be found here

Error scenarios

Error when launching app with npm start

  • Are you in the right directory? Run ls, you should see a "package.json" listed
  • If you see the error message "module not found", run npm install module_name to install the missing package.
  • If this fails, delete your node_modules folder and package-lock.json and re-run npm install

Stop Create React App development server

  • In your terminal, you can press Ctrl+C on your keyboard to stop create-react-app
    • (DON'T just close the terminal! It will not stop the server)

Definitions

(see also https://reactjs.org/docs/glossary.html)

TermDefinition
ReactA library that is used to build UI components
React DOMA library used to bridge React into the DOM
JSXA helper to write HTML-like syntax in Javascript
create-react-appA tool to create a simple React app without having to setting up the scaffoldings manually
NetlifyA platform to deploy our web apps to the internet