Skip to main content

React Cheatsheet


Including an image in your React app
Including an image in your React app (alternative method)
Importing a CSS file into your React component
Including a custom font in your React app
Mapping over an array with JSX
Conditional rendering with JSX
Quick React setup

Using a 3rd-party library in your React app Example: "lodash"

  • In your terminal, run the following command: npm install \<package-name\>E.g. npm install lodash
  • Go to the file where you want to use the package and import it with require('package-name')E.g. const lodash = require('lodash')
  • You should now be able to use the package in that file.E.g. let num = lodash.random(0, 10);
  • If there is an error, try to restart your development server
React code snippets for hooks
JSX syntax
Array Destructuring explained (useful for useState)
create-react-app docs
List special event-handler props (onClick, etc)
Glossary of React Terms

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 deployment will be a bit slower than with simpler projects as it has to "build" your React project.

The full Netlify cheat sheet can be found here

Error scenarios

Error when launching app with npm start

  • Are you in the right directory? Or, this could be a problem with node modules
  • For example, you may see an error with a message saying "module not found"
  • Try to npm 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!)


(see also

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