Recipes#
| Recipe | Links |
|---|---|
| Including an image in your React app | https://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 component | https://codesandbox.io/s/using-css-in-create-react-app-2cu6y?file=/src/App.js |
| Including a custom font in your React app | https://codesandbox.io/s/using-custom-fonts-into-create-react-app-tjw28?file=/src/App.js |
| Mapping over an array with JSX | https://codesandbox.io/s/mapping-over-an-array-with-jsx-qsqzh?file=/src/App.js |
| Conditional rendering with JSX | https://codesandbox.io/s/conditional-rendering-with-jsx-b2ryk?file=/src/App.js |
| Quick React setup | https://codesandbox.io/s/affectionate-dream-fmg69?file=/src/App.js |
Lodash Cheat Sheet 2019
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
- Demo:https://codesandbox.io/s/installing-and-using-an-npm-module-5ukh8
Lodash Cheatsheet
Links#
SQL to JavaScript cheat sheet The following table presents various SQL queries and the corresponding JavaScript queries. As with SQL queries, properties (for example, item.id) are case-sensitive. This is not a complete list. One-page guide to Lodash. The lodash keys method in lodash can be used to get an array of public key names of an object. There is also the native Object.keys method as well that has been introduced in recent years. In addition a for in loop is another option for getting object keys that has great backward compatibility with older environments, so this makes the lodash. It is the default package manager for the JavaScript runtime environment Node.js. Npm Cheat Sheet tries to provide a basic reference for beginner and advanced developers, lower the entry barrier for newcomers, and help veterans refresh the old tricks. Lodash in Service Portal There are a number of client-side libraries included in Service Portal. We will be going over some of them in this next series, starting with the Lodash library. The version of Lodash that is included in the Service Portal is 4.17.11.
| Subject | Link |
|---|---|
| React code snippets for hooks | https://devhints.io/react#hooks-new |
| JSX syntax | https://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 docs | https://create-react-app.dev/docs/getting-started |
| List special event-handler props (onClick, etc) | https://reactjs.org/docs/events.html#reference |
| Glossary of React Terms | https://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 settings | Value |
|---|---|
| '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)
Lodash Cheat Sheet 2020
| Term | Definition |
|---|---|
| React | A library that is used to build UI components |
| React DOM | A library used to bridge React into the DOM |
| JSX | A helper to write HTML-like syntax in Javascript |
| create-react-app | A tool to create a simple React app without having to setting up the scaffoldings manually |
| Netlify | A platform to deploy our web apps to the internet |
Lodash Cheat Sheet
The highly anticipated Quebec release of ServiceNow is finally available for personal developer instances! I've been playing with it for a couple of weeks and there are a ton of new features and enhancements in this release. Watch the video to find out what my Top 5 are. Let me know in the comments below if you agree or if you feel there is a big feature that should have made the list! The official release notes can be found here:https://docs.servicenow.com/bundle/quebec-release-notes/page/release-notes/family-release-notes.html