React Flashcards
HTTP is a stateless protocol. What does it meand?
the server does not keep any data (state) between two requests.
What is DOM
Document Object Model is an Application Programming Interface (API) which enables programmatic modification of the element trees corresponding to web-pages.
What is Node.js
JavaScript runtime environment based on Google’s Chrome V8 JavaScript engine and works practically anywhere - from servers to mobile phones.
Name main One characteristic functional programming paradigm that is used in React. Which methods are used to follow this rule?
immutable data structures
concat method is used, which does not add the item to the array , but creates a new array in which the content of the old array and the new item are both included.
~~~
const t2 = t.concat(5)
~~~
Difference between function declare type
~~~
function product(a, b) {
return a * b
}
~~~
and
~~~
const average = function(a, b) {
return (a + b) / 2
}
~~~
Function declaration function product(a, b)
Function expression const average = function(a, b)
Function expressions in JavaScript are not hoisted, unlike function declarations. You can’t use function expressions before you create them
Stateful component
how to add state to the componen?
how should it change
what will happen when state is changed
useStateconst [ counter, setCounter ] = useState(0)
The function returns an array that contains two items. We assign the items to the variables counter and setCounter by using the destructuring assignment syntax shown earlier.
When the state modifying function setCounter is called, React re-renders the component
it is forbidden in React to mutate state directly since it can result in unexpected side effects
must not be called from inside of a loop, a conditional expression, or any place that is not a function defining a component.
How to pass state to child components?
pass state and stateHandler in props to components
~~~
<Display counter={counter} />
<Button text={“Increase”} onClick={()=>setCount(++counter)} />
~~~
What is controlled component?
input element is controlled - it takes value from state hook and on change calls method to change this state
const [newNote, setNewNote] = useState('a new note...');
const handleNoteChange = (event) => {
setNewNote(event.target.value)
}
<input
value={newNote}
onChange={handleNoteChange}
/>
How to render a collection?
(to ul element for example)
[“HTML is easy”,”note 2”, “last note]
<ul> {notes.map(note =>
<li key={note.id}>
{note.content} </li>
)} </ul>
don’t us item index as uniqui id
JavaScript engines, or runtime environments, follow the asynchronous model.
What does it mean?
This requires all IO-operations (with some exceptions) to be executed as non-blocking. This means that code execution continues immediately after calling an IO function, without waiting for it to return.
When an asynchronous operation is completed, or, more specifically, at some point after its completion, the JavaScript engine calls the event handlers registered to the operation.
Currently, JavaScript engines are single-threaded As a result, it is a requirement in practice to use a non-blocking model for executing IO operations. Otherwise, the browser would “freeze” during, for instance, the fetching of data from a server.
In today’s browsers, it is possible to run parallelized code with the he
The event loop of an individual browser window is, however, still only handled by a single thread.
What is Promise
what states does it have
promise is an object that represents an asynchronous operation
A promise can have three distinct states:
- pending
- fulfilled
- rejected
What is Effect-hooks
at what point it is executed?
The Effect Hook lets you perform side effects on function components. Data fetching, setting up a subscription, and manually changing the DOM in React components are all examples of side effects.
~~~
const hook = () => {
console.log(“effect”);
axios.get(‘http://localhost:3001/notes’)
.then((res) => {
console.log(‘responce recieced’)
setNotes(res.data);
})
}
useEffect(hook, []);
~~~
By default, effects run after every completed render, but you can choose to fire it only when certain values have changed.
The second parameter of useEffect is used to specify how often the effect is run. If the second parameter is an empty array [], then the effect is only run along with the first render of the component. (for example if passed, [sorce.props] - then it will be called only when this props will change);
The function passed to useEffect will run after the render is id done
How to pass handler to child with parameter in it
when ususally you pass just function name without a call ‘functionName’ rather than ‘functionName(variable)’
toggleIportanceOf(note.id)
<Note toggleImportance={()=>toggleImportanceOf(note.id)} />We have array of notes[] - how to change one of notes field without mutating initial note in this array ( further this new object is send to server)
const newNote=…
const noteToEdit = …
~~~
const noteToEdit = notes.find(note => note.id == id);
const newNote = { …noteToEdit, important: !noteToEdit.important };
```
why needed
“proxy”: “http://localhost:3001”
in package.json
Since we are serving our react app from the same server where we have backend - we’ve changed url for the server on relative once
~~~
const baseUrl = ‘/api/notes’
~~~
so the local build won’t work without it
setUser(response.data);//valid user object
console.log(user)
what will be user here? //const {user, setUser} = useState({})
user will be undefined here - need to use response.data directly
how to change component visibility through inline styles?
<div style={{ display: isLoginFormVisible ? ‘’ : ‘none’ }}>
