import React.Component from 'react'import [ Component ] from 'react'import Component from 'react'import { Component } from 'react'React.memo higher-order
component.
useReducer Hook.useMemo Hook.shouldComponentUpdate lifecycle method.const person =(firstName, lastName) =>
{
first: firstName,
last: lastName
}
console.log(person("Jill", "Wilson"))
import React, {useState} from 'react';
const name = 'Rachel';
const age = 31;
const person = { name, age };
console.log(person);
{{name: "Rachel", age: 31}}{name: "Rachel", age: 31}{person: "Rachel", person: 31}}{person: {name: "Rachel", age: 31}}const topics = ['cooking', 'art', 'history'];
const first = ["cooking", "art", "history"]
const [] = ["cooking", "art", "history"]
const [, first]["cooking", "art", "history"]
const [first] = ["cooking", "art", "history"]
const [, , animal] = ['Horse', 'Mouse', 'Cat'];
console.log(animal);
<Message {...props} />
<Route path="/:id" />
function Dish() {
return <h1>Mac and Cheese</h1>;
}
ReactDOM.render(<Dish />, document.getElementById('root'));
divh1React.createElement('h1', null, "What's happening?");
<h1 props={null}>What's happening?</h1>
<h1>What's happening?</h1><h1 id="component">What's happening?</h1>
<h1 id="element">What's happening?</h1>
function MyComponent() {
return (
<Suspense>
<div>
<Message />
</div>
</Suspense>
);
}
const message = 'Hi there';
const element = <p>{message}</p>;
React.memoReact.splitReact.lazyReact.fallbackuseLayoutEffect?Answer confirmed by multiple members of the community in this internal discussion
Explanation:
useLayoutEffect gets executed before the useEffect hook without much concern
for
DOM mutation. Even though the React hook useLayoutEffect is set after the useEffect
Hook,
it gets triggered first!
A. <button onClick={this.handleClick}>Click Me</button>
B. <button onClick={event => this.handleClick(event)}>Click Me</button>
function Dish(props) {
return (
<h1>
{props.name} {props.cookingTime}
</h1>
);
}
function Dish([name, cookingTime]) { return <h1>{name} {cookingTime}</h1>; }
function Dish({name, cookingTime}) { return <h1>{name} {cookingTime}</h1>; }
function Dish(props) { return <h1>{name} {cookingTime}</h1>; }
function Dish(...props) { return <h1>{name} {cookingTime}</h1>; }
React.PureComponent?shouldComponentUpdate()
getDerivedStateFromProps() is an unsafe method to
use
const Heading = () => {
<h1>Hello!</h1>;
};
h1 tag.h1 to another component.h1 in a div.[e.target.id] called in this
code
snippet?const handleChange = (e) => {
setState((prevState) => ({ ...prevState, [e.target.id]: e.target.value }));
};
class Clock extends React.Component {
render() {
return <h1>Look at the time: {time}</h1>;
}
}
Array.map() function?setState instead of an object?setState is asynchronous and might result in out
of
sync values.Explanation: Because this.props and this.state may be updated
asynchronously, you should not rely on their values for calculating the next state.
ReactReactDOMRenderDOMvalue property.defaultValue property.default property.const clock = (props) => {
return <h1>Look at the time: {props.time}</h1>;
};
thisclockExplanation: In JSX, lower-case tag names are considered to be HTML tags.
useEffect(function updateTitle() { document.title = name + ' ' + lastname; });
useEffect(() => { title = name + ' ' + lastname; });
useEffect(function updateTitle() { name + ' ' + lastname; });
useEffect(function updateTitle() { title = name + ' ' + lastname; });
fallbacksplitlazymemofunction MyComponent(props) {
const [done, setDone] = useState(false);
return <h1>Done: {done}</h1>;
}
useEffect(() => { setDone(true); });useEffect(() => { setDone(true); }, []);useEffect(() => { setDone(true); }, [setDone]);useEffect(() => { setDone(true); }, [done, setDone]);
handleClick is being called instead of passed as a reference. How do you fix this?
<button onClick={this.handleClick()}>Click this</button>
<button onClick={this.handleClick.bind(handleClick)}>Click this</button>
<button onClick={handleClick()}>Click this</button>
<button onClick={this.handleClick}>Click this</button>
<button onclick={this.handleClick}>Click this</button>
fetch()
function
come from?fetch() is supported by most
browsers.
useEffect(() => {
setName('John');
}, [name]);
this.setState(...)this.forceUpdate()class Button extends React.Component{
constructor(props) {
super(props);
// Missing line
}
handleClick() {...}
}
this.handleClick.bind(this);props.bind(handleClick);this.handleClick.bind();this.handleClick = this.handleClick.bind(this);
<React.Fragment>
<h1>Our Staff</h1>
<p>Our staff is available 9-5 to answer your questions</p>
</React.Fragment>
<...>
<h1>Our Staff</h1>
<p>Our staff is available 9-5 to answer your questions</p>
</...>
<//>
<h1>Our Staff</h1>
<p>Our staff is available 9-5 to answer your questions</p>
<///>
<>
<h1>Our Staff</h1>
<p>Our staff is available 9-5 to answer your questions</p>
</>
<Frag>
<h1>Our Staff</h1>
<p>Our staff is available 9-5 to answer your questions</p>
</Frag>
h1?class Ticker extends React.component {
constructor(props) {
super(props);
this.state = { count: 0 };
}
render() {
return <h1>{}</h1>;
}
}
const greeting = isLoggedIn ? <Hello /> : null;
isLoggedIn is trueReactDOM.render(<Message orderNumber="16" />, document.getElementById('root'));
h1 but there is an unexpected token error when it runs.
How
do you fix this?const element = <h1 style={ backgroundColor: "blue" }>Hi</h1>;
const element = <h1 style="backgroundColor: "blue""}>Hi</h1>;
const element = <h1 style={{backgroundColor: "blue"}}>Hi</h1>;
const element = <h1 style={blue}>Hi</h1>;const element = <h1 style="blue">Hi</h1>;
replaceStaterefreshStateupdateStatesetStateconst Star = ({ selected = false }) => <Icon color={selected ? 'red' : 'grey'} />;
A. <button onClick=this.handleClick>Click Me</button>
B. <button onClick={event => this.handleClick(event)}>Click Me</button>
Button A will not have access to the event object on click of the button
Button A will not fire the handler this.handleClick successfully
There is no differenceButton B will not fire the handler this.handleClick successfully
<Route path="/:id">
{' '}
<About />
</Route>
<Route path="/tid" about={Component} />
<Route path="/:id" route={About} />
<Route>
<About path="/:id" />
</Route>
const Greeting = ({ name }) => <h1>Hello {name}!</h1>;
class Greeting extends React.Component {
constructor() {
return <h1>Hello {this.props.name}!</h1>;
}
}
class Greeting extends React.Component {
<h1>Hello {this.props.name}!</h1>;
}
class Greeting extends React.Component {
render() {
return <h1>Hello {this.props.name}!</h1>;
}
}
class Greeting extends React.Component {
render({ name }) {
return <h1>Hello {name}!</h1>;
}
}
ReactDOM.render(
<h1>Hi<h1>,
document.getElementById('root')
)
<a> tag in React?Back button.
Link component is just another
name
for the <a> tag.<a> tag will cause an error when used in React.
<a> tag triggers a full page reload,
while
the Link component does not.x, that is sent to the createElement function?
React.createElement(x, y, z);
useEffect(() => {
// do things
}, []);
class Comp extends React.Component {
render() {
return <h1>Look at the time: {time}</h1>;
}
}
ReactDOM.createPortal(x, y);
setCount?const [count, setCount] = useState(0);
const database = [{ data: 1 }, { data: 2 }, { data: 3 }];
database.map((user) => <h1>{user.data}</h1>);
const { name: firstName } = props;
const MyComponent = ({ names }) => (
<h1>Hello</h1>
<p>Hello again</p>
);
ReactDOM.createPortal(x, y);
<div> tag?
const MyComponent = ({ children }) => (
<div>{children.length}</div>
);
...
<MyComponent>
<p>
Hello <span>World!</span>
</p>
<p>Goodbye</p>
</MyComponent>
const [count, setCount] = useState(0);
import React from 'react';
import { createRoot } from 'reactjs-dom';
const element = <h1>Hi</h1>;
// Note: error on the line below
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(element);
createRoot(document.getElementById("root"));
ReactDOM(element, document.getElementById("root"));
renderDOM(element, document.getElementById("root"));
DOM(element, document.getElementById("root"));
render() {
const isLoggedIn = this.state.isLoggedIn;
return (
<div>
The user is:
</div>
);
}
The user is loggedIn ? logged in : not logged in.The user is {isLoggedIn = "no"}.The user is {isLoggedIn ? "logged in." : "not logged in"}.
class StarTrekkin extends React.Component {
firePhotonTorpedoes(e) {
console.log('pew pew');
}
render() {
return; // Missing code
}
}
<button onClick={firePhotonTorpedoes()}>Pew Pew</button>
<button onClick={firePhotonTorpedoes}>Pew Pew</button>
<button onClick={this.firePhotonTorpedoes()}>Pew Pew</button>
<button onClick={this.firePhotonTorpedoes}>Pew Pew</button>
prop-helper.prop-types.checker-types.let dish = <h1>Mac and Cheese</h1>;
let dish = <h1 id={heading}>Mac and Cheese</h1>;
let dish = <h1 id="heading">Mac and Cheese</h1>;
let dish = <h1 id:"heading">Mac and Cheese</h1>;
let dish = <h1 class="heading">Mac and Cheese</h1>;
class Huggable extends React.Component {
hug(id) {
console.log("hugging " + id);
}
render() {
let name = "kitten";
let button = // Missing code
return button;
}
}
<button onClick={(name) => this.hug(name)}>Hug Button</button>;
<button onClick={this.hug(e, name)}>Hug Button</button>;
<button onClick={(e) => hug(name, e)}>Hug Button</button>;
<button onClick={(e) => this.hug(name, e)}>Hug Button</button>;
Explanation:
This question test knowledge of react class components. You need to use this in order to call
methods
declared inside class components.
Explanation: React Components are like functions that return HTML elements. Components are independent and reusable bits of code. They serve the same purpose as JavaScript functions, but work in isolation and return HTML. Components come in two types, Class components and Function components.
function Dish() {
return (
<>
<Ingredient />
<Ingredient />
</>
);
}
class TransIsBeautiful extends React.Component {
constructor(props){
// Missing line
console.log(this) ;
}
...
}
constructor(props) {
super(props);
this.state = {
pokeDex: []
};
}
function add(x = 1, y = 2) {
return x + y;
}
add();
const { tree, lake } = nature;
ReactDom.render(
<Message sent=false />,
document.getElementById("root")
);
<Message sent={false} />,
ReactDom.render(<Message sent="false" />, document.getElementById('root'));
<Message sent="false" />,
ReactDom.render(<Message sent="false" />, document.getElementById('root'));
const PokeDex = (props) => {
const [pokeDex, setPokeDex] = useState([]);
/// ...
};
const Greeting = ({ initName }) => {
const greet = (name) => console.log("Hello, " + name + "!");
return <button onClick={ ... }>Greeting Button </button>
}
Explanation: Apparently the question misstyped greet as hug. Putting this aside, we can
still learn from this question.
this. In a browser window the
global
object is [object Window].
This is a functional Component, so this from this.hug actually refers to browser
window.
Since it is a functional component, we can directly refer to hug without using this.initName is available in Greeting's function scope, so we can directly supply as an
argument to
hug().
useRef hook?class Greeting extends React.Component {
render() {
return <h1>Hello {this.props.name}!<h1>;
}
}
const Greeting = (name) => <h1>{name}</h1>
function Greeting(name){return <h1>{name}</h1>;}
const Greeting = props => { <h1>{props.name}</h1> }
const Greeting = ({ name }) => <h1>Hello {name}</h1>;
waitlist not updating
correctly?
const Waitlist = () => {
const [name, setName] = useState('');
const [waitlist, setWaitlist] = useState([]);
const onSubmit = (e) => {
e.preventDefault();
waitlist.push(name);
};
return (
<div>
<form onSubmit={onSubmit}>
<label>
Name: <input type="text" value={name} onChange={(e) => setName(e.target.value)} />
</label>
<button type="submit">Add to waitlist</button>
</form>
<ol>
{waitlist.map((name) => (
<li key={name}>{name}</li>
))}
</ol>
</div>
);
};
waitlist is being mutated directly. Use the
setWaitlist function instead to update the waitlist state.
Add to waitlist is
clicked.Add to waitlist button is missing a click handler.waitlist
array.