- React-based open-source framework for creating websites and apps.
- Static site generator (SSG)
- Uses a combination of React & GraphQL
- 🎥 Styled Components Crash Course & Project
- styled-components allows us to write CSS in JS in an elegant and reusable way
- React’s replacement for using innerHTML in the browser DOM.
- Resources: React Doc
Typechecking with PropTypes - 📖 React doc
- 🎥 Learn React PropTypes In 13 Minutes
- When writing React, a common bug - accidentally pass incorrect props to component, and it is difficult to track down these bugs
- As an example:
age="15"
should be a number, but we pass in as a string,${age + 5}
would return155
instead of20
- As an example:
- With PropTypes: easily define exactly what the props should be for a component, you will see errors in inspect when props are incorrect
- Component returns multiple elements, to avoid adding extra nodes to the DOM,
<React.Fragment>
let you group a list of children.
- JavaScript Engine: As the translator between your computer and JS file.
How to Choose the Right NPM Package for Your Project? 📖 Read
How Does a Trailing Slash Impact SEO? 📖 Read
- If there are two separate pages with the same content – one with a slash at the end of the URL and one without – the two separate pages will be identical, resulting in duplicate content. Google has a hard time figuring out which of the two is the original source, and the search engine crawlers are left confused.
Everything You Need to Know About rel=”noopener noreferrer” 📖 Read
- The noopener is needed to enhance the security of your website and prevent other websites from gaining access to your page (through the browser session).
- The noreferrer is used to protect referral information from being passed to the target website and this also hides referral traffic in Google analytics.
Be Sure to Provide Titles for Iframes (for accessibility) 📖 Read
- When an iframe is given a meaningful title, screen reader users can pull up a list of frames and identify the content or purpose of the iframe based on its title.
Increasing Headline Clicks with Eyebrow Text 📖 Read
- Eyebrow text is a descriptive keyword or phrase placed above the main headline and blurb.
OpenAPI 3.0 📖 Docs 🎥 How to Design and Document APIs
-
The latest version of the OpenAPI Specification - an open source format for describing and documenting APIs
A simple OpenAPI 3.0 specification
openapi: 3.0.0 info: version: 1.0.0 title: Sample API description: A sample API to illustrate OpenAPI concepts paths: /list: get: description: Returns a list of stuff responses: '200': description: Successful response
- The process of developing Application Programming Interfaces (APIs) that expose data and application functionality for use by developers and users
- All related, but different entities, each serves a crucial purpose
- API Documentation: Instructions for developers and API consumers how to use the API
- API Specification: Provides a broad understanding of the functionality of the API and the expected results
- API Definition: Machine consumption of an API, providing machine-readable format for use
- REST and SOAP are 2 different approaches to online data transmission, both define how to build APIs
- API (Application Programming Interface) is the code that enables communication between two software programs
- API Testing ensures APIs meet functionality, security, performance and reliability expectations
- Making requests to one or more API endpoints, comparing the response with expected results
- uuid
- Generate unique identifier for your React app.
- react-share
- Social media share buttons and share counts for React.
1. What is Linting? 📖 Read
- Linting is the process of checking the source code for programmatic and stylistic errors
- Done by using a lint tool (a.k.a Linter)
- ESLint for JavaScript