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 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);
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 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)


(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