Getting Started Flashcards
How can I make react render in an element in the HTML?
By simply calling ReactDOM.Render(
,
document.getElementById(“existing-elem-on-html”)
)
Why can I write HTML in a javascript file and it does not throw an error?
Because this is not HTML but JSX. Doesn’t throw an error because the react lib is imported in the javascript file.
What happens when you create a react component that is called starting with a lower case letter?
It will try to render the html directly (eg: function button…). Components needs to start with CAPITAL letter
How is a react hook declared?
by creating an array with a getter and one setter which receive an useState() method e.g
const [counter, setCounter] = userState();
What does use state method returns?
an array containing two elements which are destructured into an array.
How to inititalize the value of the getter part of the array?
By passing an argument to the useState(0);
What the onClick event expects to receive? Does it need to be in curly braces?
It expects to receive a POINTER to a method, NOT the execution of the method. Necessary to be within curly braces.. e.g:
… onClick={myFunc}… AND NOT myFunc()
Can I assign arrow functions to events such as onClick?
Yes… e.g:
onClick={() => console.log(‘hello’)}
In a summarized way: what is React Hooks?
It hooks a simple component into a state.
How to update the getter part of the array? Do we need to declare it?
By calling setState(). No need to declare it.
What is a React.Fragment? What is the shortcut to react fragment?
It is a way to group components together and avoid using divs. The shortcut for it is using empty tags <>
What does the props variable contains?
Key value pairs
What is the common saying about props and state?
immutable props, mutable state
Should we use loops and whiles in react? Is it a hard requirement?
No, we have to make it declarative by using map/filter/reduce. Not a hard requirement.
What is a good UI candidate to turn into a component?
Items that share data OR behavior
What is a good tip when naming react components? Why?
Naming them with two letters.. e.g: PlayNumber instead of Number. So that you won’t override javascript default objects.
How much data should be passed to a component via props?
Just the necessary data. Do NOT take shortcuts and send the full list/array.
What is a common react structure and order?
React hooks and states; then computations (functions)
What is a reactEffect?
Is a method that is always executed when the component renders.
What is a good practice when implementing the reactEffect method? How to do it?
To clean it up after its execution. It is possible cleaning it up by returning a lambda that clears the effect (e.g remove a previously created timer)
What is a clever way to remount a React component?
By introducing and changing its key id to key + 1, then react will unmount and create a brand new component.
What is a custom hook?
Is a method to group states and usually returns an array which will be destructured later on.
What is the naming convention of a custom hook?
start the name using use… e.g: useGameState.
What is a the two hard requirement for hooks?
Never use within loops and never conditionally create a hook
