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 \<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

Links#

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

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