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