Podcast
Questions and Answers
How do you record page views in Google Analytics with React Router?
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?
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?
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?
What is an exception to the React component naming convention?
Can you use async/await in plain React?
Can you use async/await in plain React?
What is a common way to structure a React project?
What is a common way to structure a React project?
What is another way to structure projects besides grouping by feature?
What is another way to structure projects besides grouping by feature?
What is required to use Google Analytics with React Router?
What is required to use Google Analytics with React Router?
What is the benefit of using styles modules?
What is the benefit of using styles modules?
What is the purpose of the default keyword when exporting a component?
What is the purpose of the default keyword when exporting a component?
What is a popular animation package in React ecosystem?
What is a popular animation package in React ecosystem?
What is the purpose of eslint-plugin-jsx-a11y?
What is the purpose of eslint-plugin-jsx-a11y?
What is a popular JavaScript linter?
What is a popular JavaScript linter?
What is the purpose of eslint-plugin-react?
What is the purpose of eslint-plugin-react?
What is a benefit of extracting style values into their own modules?
What is a benefit of extracting style values into their own modules?
What is an example of a style value that can be extracted into its own module?
What is an example of a style value that can be extracted into its own module?
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)andwindow.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
defaultfor exporting components - Example:
import User from "user";andexport 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/
- Grouping by features or routes:
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.
