React II Flashcards

Question

How to use React label element?

Answer 1

If you try to render a element bound to a text input using the standard for attribute, then it produces HTML missing that attribute and prints a warning to the console. {'User'} Since for is a reserved keyword in JavaScript, use htmlFor instead. {'User'}

Answer 2

You can use spread operator in regular React: If you're using React Native then you can use the array notation:

Answer 3

You can use the useState hook to manage the width and height state variables, and the useEffect hook to add and remove the resize event listener. The [] dependency array passed to useEffect ensures that the effect only runs once (on mount) and not on every re-render. import React, { useState, useEffect } from "react"; function WindowDimensions() { const [dimensions, setDimensions] = useState({ width: window.innerWidth, height: window.innerHeight, }); useEffect(() => { function handleResize() { setDimensions({ width: window.innerWidth, height: window.innerHeight, }); } window.addEventListener("resize", handleResize); return () => window.removeEventListener("resize", handleResize); }, []); return ( {dimensions.width} x {dimensions.height} ); }

Answer 4

We can use

 tag so that the formatting of the JSON.stringify() is retained:

const data = { name: "John", age: 42 };

function User {
    return {JSON.stringify(data, null, 2)};
}

const container = createRoot(document.getElementById("container"));

container.render();

Answer 5

The React philosophy is that props should be immutable(read only) and top-down. This means that a parent can send any prop values to a child, but the child can't modify received props.

Answer 6

You need to use useEffect hook to set focus on input field during page load time for functional component. import React, { useEffect, useRef } from "react"; const App = () => { const inputElRef = useRef(null); useEffect(() => { inputElRef.current.focus(); }, []); return (

); }; ReactDOM.render(, document.getElementById("app"));

Answer 7

The component names should start with an uppercase letter but there are few exceptions to this convention. The lowercase tag names with a dot (property accessors) are still considered as valid component names. For example, the below tag can be compiled to a valid component,

Answer 8

React Router is a powerful routing library built on top of React that helps you add new screens and flows to your application incredibly quickly, all while keeping the URL in sync with what's being displayed on the page.

Answer 9

React Router is a wrapper around the history library which handles interaction with the browser's window.history with its browser and hash histories. It also provides memory history which is useful for environments that don't have global history, such as mobile app development (React Native) and unit testing with Node.

Answer 10

React Router v6 provides below 4 components: :Uses the HTML5 history API for standard web apps. :Uses hash-based routing for static servers. :Uses in-memory routing for testing and non-browser environments. :Provides static routing for server-side rendering (SSR). The above components will create browser, hash, memory and static history instances. React Router v6 makes the properties and methods of the history instance associated with your router available through the context in the router object.

Answer 11

A history instance has two methods for navigation purpose. push() replace() If you think of the history as an array of visited locations, push() will add a new location to the array and replace() will replace the current location in the array with the new one.

Answer 12

There are three different ways to achieve programmatic routing/navigation within components. Using the withRouter() higher-order function: The withRouter() higher-order function will inject the history object as a prop of the component. This object provides push() and replace() methods to avoid the usage of context. import { withRouter } from "react-router-dom"; // this also works with 'react-router-native' const Button = withRouter(({ history }) => ( )); Using component and render props pattern: The component passes the same props as withRouter(), so you will be able to access the history methods through the history prop. import { Route } from "react-router-dom"; const Button = () => ( ( )} /> ); Using context: This option is not recommended and treated as unstable API. const Button = (props, context) => ( ); Button.contextTypes = { history: React.PropTypes.shape({ push: React.PropTypes.func.isRequired, }), };

Answer 13

The ability to parse query strings was taken out of React Router v4 because there have been user requests over the years to support different implementation. So the decision has been given to users to choose the implementation they like. The recommended approach is to use query strings library. const queryString = require("query-string"); const parsed = queryString.parse(props.location.search); You can also use URLSearchParams if you want something native: const params = new URLSearchParams(props.location.search); const foo = params.get("name");

Answer 14

You have to wrap your Route's in a block because is unique in that it renders a route exclusively. At first you need to add Switch to your imports: import { Switch, Router, Route } from "react-router"; Then define the routes within block:

Answer 15

While navigating you can pass props to the history object: this.props.history.push({ pathname: "/template", search: "?name=sudheer", state: { detail: response.data }, }); The search property is used to pass query params in push() method.

Answer 16

A renders the first child that matches. A with no path always matches. So you just need to simply drop path attribute as below

Answer 17

Below are the list of steps to get history object on React Router v4, Create a module that exports a history object and import this module across the project. For example, create history.js file: import { createBrowserHistory } from "history"; export default createBrowserHistory({ /* pass a configuration object here if needed */ }); You should use the component instead of built-in routers. Import the above history.js inside index.js file: import { Router } from "react-router-dom"; import history from "./history"; import App from "./App"; ReactDOM.render( , holder ); You can also use push method of history object similar to built-in history object: // some-other-file.js import history from "./history"; history.push("/go-here");

Answer 18

The react-router package provides component in React Router. Rendering a will navigate to a new location. Like server-side redirects, the new location will override the current location in the history stack. import { Redirect } from "react-router"; export default function Login { if (this.state.isLoggedIn === true) { return ; } else { return

{"Login Please"}

; } }