React.js Basics Flashcards
React.js Basics
When we render a list of components/elements, what property should we add to it?
key
The “key” property don’t get passed down to your components. What should we do if we need that value in our components?
We should explicitly pass the value as another prop
Which JS operators can be used to conditionally render components?
- The && operator (expression && component)
- Ternary operator
What is a “Controlled Component”?
An input form element whose value is controlled by React.
That is achieved by passing a value via the component’s props, and using that props as the value of the input:
Ex:
What are 3 DOM elements that have internal state?
- Input
- Textarea
- Select
To which event should you add a handler on a controlled component to handle mutation?
onChange
To which event should add a handler on a form to handle submission?
onSubmit
How is the “computed property name” ES6 syntax?
{ [prop] : value }
What happens if you specify the ‘value’ property when rendering a controlled component?
(eg: )
This will prevent the user to change the value of the component.
Explain the sentence: “The data always flows down”.
That means the state of a component can only be passed down to its children. A component can never pass state back to its parent.
How is the syntax for creating a new class component (with constructor and rendering methods)?
class Calculator extends React.Component {
constructor(props) {
super(props);
}
render() {
return ( <p>Hello</p> )
}
}On the snippet:
return (<h1>MyValue</h1>);
Why is it recommended to put parentheses?
To avoid the pitfalls of JS’s automatic semicolon insertion.
What does Babel convert JSX expressions to?
To React.createElement() calls.
What is React’s equivalente to the following onclick event handling: Activate Lasers
Activate Lasers- Camel case event name- Function is passed as expression, not string
What is the difference between props and state for a component?
Props are properties that the component receives at creation time, and should be immutable.State are encapsulated properties that the component initializes (can be based on props values), and can mutate. State change causes component re-rendering.
What is the correct way to change a component’s state?
By calling this.setState()
In React what does “Lift the state up” means?
That is a technique to share state between components. Sharing state is accomplished by moving (lifting) it up to the closest common ancestor of the components that need it.The ancestor will then provide to the children both the state value and a handler function to mutate its state via the children props.
“There should be a single ‘source of truth’ for any data that changes in a React application.”“What does that quote mean in coding perspective?
Means that state should be owned by a single component. If the same state must be shared between components, it must be lifted up to an ancestral component.
Which tool can be used to inspect the components state in a page?
React Developer Tools
What is the syntax of a function-based component?
function MyComponent(props) { return ( Hello );}
Given: Content
How does the component DialogBox receives the div that is inside it?
Through the props.children property
Given that a component SplitPane wants to render a layout: <div> // left content here </div> <div> // right content here </div>
What is React solution to receive multiple children content?
Pass it normally via any attribute in props.
Ex:
}
right={ }
/>
SplitPane would use: this.props.left this.props.right internally
Is there any limitations in what can be passed as props in React?
No.
When is it recommended to use inheritance in React?
Never.
What should I do if many components want to share the same non-UI related code?
Extract it into a separate JavaScript module The components may import it and use that function, object, or a class, without extending it.
Which programming principle should be used when deciding when to create a new component?
Single Responsibility Principle
Which lifecycle hook will be called on a component after it is rendered to the DOM for the first time?
componentDidMount()
Which lifecycle hook will be called on a component whenever the DOM produced by it is removed?
componentDidUnmount()
What are the 5 steps on Thinking in React?
- Start with the Mockup
- Break The UI Into A Component Hierarchy
- Build A Static Version in React - don’t use state
- Identify The Minimal (but complete) Representation Of UI State - the minimal state to be kept
- Identify Where Your State Should Live
- Add Inverse Data Flow - passing callbacks
React uses one-way data binding, while Angular uses two-way data binding.That means in React the data flows automatically from the model to the UI only (using state mutation).How should the other way data flow (UI changing the model) be implemented in React?
The component that owns the state should pass ‘callback functions’ down to the components that will receive UI interaction.
What are the steps that react do with virtual DOM at every state update?
- generates a new virtual DOM with the changes- diffs it with the old one- computes the minimal set of DOM mutations and put them in a queue- batch updates all changes
What is the benefit of using Functional Components over Class Components
These components tend to be easier to write and React will optimize them more in the future.
How to pass a CSS class to a JSX component?
using the “className” attribute
What is the correct way to set an int variable called “age” in this.state in the constructor
this.state = {age: 123}
not to be confused with this.state.age = 123
How could you use JS destructuring to avoid having to type this.props. everytime?
const {propA, propB } = this.props;
How could you use JS spread operator to pass all objects’s properties as props to a component?
Which JS library can you use to facilitate routing inside your app?`
react-router
Which React API facilitates passing down data to components implicitly, without using props?
The Context API
Write a router that renders a component when the URL is at “/”
Given a react-router Route with URL parameters:
How does MyApp components access the “filter” URL parameters?
The MyApp component will receive a parameter called “params”.
const MyApp( {params} ) => …
Which react-router function can I use to create components that will have the router params injects?
withParam( myComponent )
What is “PropTypes”?
It is a mechanism to describe accepted prop attributes of components, in order to make the code more type safe and also to document.
How would you define the propTypes of a component Header, which accepts a string as “title” prop. The title must be required.
Header.propTypes = {
title: PropTypes.string.isRequired
}
What are pure components (a.k.a. functional components)?
They are simple functions that don’t extend the React.Component class.
Ex:
const Component = (props) => {
return (<h1>props.title</h1>);
}
What is Flux?
Flux is a pattern for managing how data flows through a React application.
Explain Flux
The major idea behind Flux is that there is a single-source of truth (the stores) and they can only be updated by triggering actions. The actions are responsible for calling the dispatcher, which the stores can subscribe for changes and update their own data accordingly.
What is the difference between export and export default?
there can be only one “export default” per file. When you import it you do:
import AnyName from “myfile.js”
With normal export, you have to import with the same name. There can be many normal exports:
import { Name } from “myfile.js”
