blog 403

Discuss in words something you learned in class today or this week.

Within a single page React app we can create routes which allow us to render any component we want with the help from React router. First, install the router…

npm i react-router-dom

Next, we will create a Router.js within our src folder and import Switch and Route from the router…

import { Switch, Route } from 'react-router'
import { Home } from './Home'
import { About } from './About'
const Router = () => {
return (
<Switch>
  <Route exact path="/" component={Home} />
  <Route path="/about" component={About} />
  <Route path="/shop/:id" component={ItemDetail}/>
</Switch>
)
}
export default Router

Here, we are also importing two components from our components folder which represent home and about pages. Simply wrap your Route components in a Switch component (think of it as an if/else statement for routing). For the home route, we will always include the word exact when pointing to the “/” so that it won’t go to the home component each time a route includes an / (which would be every other route…)

Next, in our index.js or App.js (depending on how you want to set it up…) we will import our Router and wrap it in the BrowserRouter. Be sure to import the BrowserRouter. Then either export your App.js and import it in your index.js, or do it like below and render the main component.

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from './App';
import Router from './Router';
const Main = () => (
<BrowserRouter>
  <Router />
</BrowserRouter>
)
ReactDOM.render(<Main />, document.getElementById('root'));

What is render() in React? Explain its purpose.

You see render pop up in two places in react: attached to the ReactDOM to render out our app and also within class-based components before the return statement. It is in fact required that we call this render method on a class-based component.

ReactDOM.render takes two arguments. The first argument is what we want to render. Usually, this will be the main <App /> component, but sometimes may be something else for example if we are setting up routes that wrap the entire app (see above). The second argument is where we want to render which is typically a single div within our HTML file with a certain id (convention is ‘root’).

Is setState() async?

Yes. According to the docs:

setState() does not immediately mutate this.state but creates a pending state transition. Accessing this.state after calling this method can potentially return the existing value. There is no guarantee of synchronous operation of calls to setState and calls may be batched for performance gains.

What are controlled components?

• A Controlled Component is one that takes its current value through props and notifies changes through callbacks like onChange. A parent component "controls" it by handling the callback and managing its own state and passing the new values as props to the controlled component. You could also call this a "dumb component".
• An Uncontrolled Component is one that stores its own state internally, and you query the DOM using a ref to find its current value when you need it. This is a bit more like traditional HTML.

What is the event loop in JavaScript?

The event loop is how JS runs asynchronously, giving the illusion of multi-threading while actually executing all operations on a single thread. The call stack keeps track of all the operations in line to be executed. When a function is complete it is removed from the stack. The event queue keeps track of the sequence in which each operation should be sent for execution. The event loop constantly checks whether or not the call stack is empty. If it is empty, new functions are added from the event queue. If it is not, then the current function call is processed.

Why does ReactJS use className over class attribute?

Because class is a reserved word in JavaScript.