React Frontend Flashcards
all the imp things for react
What are React fragments and the useParams() hook used for in a React application?
React Fragments: Allow you to group a list of children without adding extra nodes to the DOM. Useful for wrapping multiple elements returned by a component without introducing a DOM element.
useParams() Hook: A hook from react-router-dom used for accessing the URL parameters from the current route. For example, const articleId = useParams() directly extracts articleId from the URL, simplifying access without needing to use params.articleId.
What is the role of index in React’s map() function?
In React, index is provided by the map() function and represents the position of the current item in the array. It can be used as a key prop when rendering lists of components to help React track and manage DOM updates efficiently. However, it’s recommended to use unique IDs when available, as using index can lead to issues during reordering or when the list changes.
What is the purpose of the Link component in react-router-dom?
The Link component is part of react-router-dom and is used for creating navigable links in a React application that do not cause page refreshes. It helps in building seamless, navigable single-page applications, maintaining the application state and providing cleaner URLs.
What does the substring() method do in JavaScript?
The substring() method in JavaScript is used to extract a portion of a string between two specified indices or up to the end of the string. It is commonly used in UIs to shorten strings for previews or summaries, allowing for more controlled display of content, such as showing the first 150 characters of an article with “…” to indicate truncation.
What does destructuring props in a React component mean and how is it used?
Destructuring props in a React component means extracting specific properties directly from the props object passed to the component. This is done using curly braces {} in the function’s parameter list. For example, in a component const MyComponent = ({ title, content }) => {…}, title and content are directly accessible within the component without needing to reference props.title and props.content. This makes the code cleaner and more readable.
How are props passed to components in React?
Props are passed to React components similarly to attributes on HTML elements. For a component <MyComponent></MyComponent>, title is a prop passed to MyComponent. Inside the component, this prop can be accessed using props.title if props are not destructured, or directly as title if props have been destructured. Props allow components to receive data from their parent, making them dynamic and reusable.
What does <Route path=’*’ element={<NotFoundPage></NotFoundPage>}/> do in a React Router setup?
This syntax sets up a wildcard route that catches all navigation to undefined paths in the app, rendering the NotFoundPage component. It’s commonly used to display a “404 - Not Found” page when users visit a route that does not exist in the application.
How does implicit return work in React functional components?
In React, functional components can use implicit return when defined with an arrow function. By using parentheses () instead of curly braces {}, the function directly returns the JSX inside the parentheses without needing an explicit return statement. This is useful for components that only consist of a return.
