React Router and Styling

Podcast Beta

Play an AI-generated podcast conversation about this lesson

Questions and Answers

How do you record page views in Google Analytics with React Router?

Use the google-analytics-react package

Use the react-router-ga package

Add a listener on the state object

Add a listener on the history object (correct)

Does React apply vendor prefixes to inline styles automatically?

Only for certain browsers

Yes, React applies vendor prefixes automatically

No, you need to add vendor prefixes manually (correct)

Only for certain CSS properties

How do you export a component using React and ES6?

Use the `export` keyword without `default`

Use the `export default` syntax (correct)

Use the `require` syntax

Use the `import-export` syntax

What is an exception to the React component naming convention?

Component names with a dot (property accessors) Signup and view all the answers

Can you use async/await in plain React?

No, you need Babel and the transform-async-to-generator plugin Signup and view all the answers

What is a common way to structure a React project?

Grouping by features or routes Signup and view all the answers

What is another way to structure projects besides grouping by feature?

Grouping by file type Signup and view all the answers

What is required to use Google Analytics with React Router?

A listener on the history object Signup and view all the answers

What is the benefit of using styles modules?

It allows for easier reuse of style values across components Signup and view all the answers

What is the purpose of the `default` keyword when exporting a component?

To specify the default export Signup and view all the answers

What is a popular animation package in React ecosystem?

React Transition Group Signup and view all the answers

What is the purpose of eslint-plugin-jsx-a11y?

To help fix common issues with accessibility Signup and view all the answers

What is a popular JavaScript linter?

ESLint Signup and view all the answers

What is the purpose of eslint-plugin-react?

To check a number of best practices specific to React Signup and view all the answers

What is a benefit of extracting style values into their own modules?

It allows for easier reuse of style values across components Signup and view all the answers

What is an example of a style value that can be extracted into its own module?

A set of color values Signup and view all the answers

Study Notes

Adding Google Analytics to React Router

Add a listener to the history object to record each page view
Use window.ga("set", "page", location.pathname + location.search) and window.ga("send", "pageview", location.pathname + location.search) to track page views

Applying Vendor Prefixes to Inline Styles in React

React does not apply vendor prefixes automatically
Add vendor prefixes manually to inline styles

Importing and Exporting Components using React and ES6

Use default for exporting components
Example: import User from "user"; and export default function MyProfile { ... }

Exceptions on React Component Naming

Component names should start with an uppercase letter
Exceptions: lowercase tag names with a dot (property accessors) are still considered valid component names

Using Async/Await in Plain React

Use Babel and transform-async-to-generator plugin to enable async/await in React
React Native ships with Babel and a set of transforms

Common Folder Structures for React

Two common practices: grouping by features or routes, and grouping by file type
Examples:
- Grouping by features or routes: common/, feed/, profile/
- Grouping by file type: api/, components/

Popular Animation Packages in React

React Transition Group and React Motion are popular animation packages

Benefits of Styles Modules

Extract style values into their own modules to avoid hard coding
Benefits: reusable styles and easier maintenance

Popular React-Specific Linters

ESLint is a popular JavaScript linter
Plugins: eslint-plugin-react and eslint-plugin-jsx-a11y for React-specific code analysis and accessibility checks

Studying That Suits You

Use AI to generate personalized quizzes and flashcards to suit your learning preferences.

Description

Quiz on adding Google Analytics to React Router and applying vendor prefixes to inline styles.