Mod 8 Flashcards
What are components in React?
Applications in React are based around the concept of components which are reusable units of UI. React creates a component tree from the components in our app, and maps it to the real DOM tree that a browser renders. When writing a React application, our code modifies the component, rather than directly modifying the DOM tree. The React library then efficiently updates the real DOM to minimize the amount of rendering the browser has to do.
What uses JSX?
React. Browsers don’t understand JSX and React components. But React libraries convert components into HTML and JavaScript, and then build a DOM tree that browsers can render.
How are pages updated in React?
Our code changes React state variables. Based on this change to state variables, React automatically renders the relevant parts of the DOM tree.
How many pages do React Apps have? Why?
React is used for Single Page Applications.
With** SPAs** the HTML, CSS, and JavaScript for a web app are sent from the web server to the browser exactly once. Once the web app is loaded into the browser, then JavaScript code makes changes to the DOM so that the user feels that they are navigating to a different page.
What file is the entry point into the DOM tree? (The root of our React tree)
The file index.js is the entry point to the DOM tree created by our React app. When writing our own app, we typically do not make any changes to index.js. Instead, our changes start with the file App.js which is also imported by index.js.
How do destructuring expressions work?
const book = { title : “Modern JavaScript”, price: 21.99};
const title = book.title; // Value of title is set to “Modern JavaScript”
const vals = [87, 42, 53];
const a = vals[0]; // Value of a is set to 87
We can take the values in an array or dictionary and break them down into other variables easily. For dictionaries, this is done by property name, while arrays use the order of elements. This is often used when passing a parameter to a function, like when react creates new components using some data.
What kind of components should we define in React?
We aim to define simple components in React. This leads to modular code as well as to reusability. Remember, a component must return one top level element. So, we write each component in its own file and let components use other components.
How are components in a React app arranged?
Components in a React app are arranged in a tree structure with the App component as the root of the tree. When we are thinking about a React app (either to understand an existing app or to design a new one), it is helpful to draw the components in the app as a tree to visualize the app at a high level.
What tools do we have to debug a React app?
- When we start a React app, certain types of compilation errors are caught and displayed in the terminal from which we started the React app.
We should examine the terminal to see if any errors have been reported. - For the React app running in the browser, our debugging tools include the React Developer Tools and the browser console.
How can we replace for loops in React apps?
We can use the map method.
What function must we use to update state variables? What are its arguments and returns?
The function useState takes one argument, which is the initial value of the state variable, and returns an array:
- The first element in the array is the state variable that models the state of our component.
- The second element in the array is a function that takes one argument and sets the state variable to this argument. We must use this function to update the value of the state variable. Otherwise, React will not automatically render this component even when its state variable changes.
What does a React Router do?
React Router supports defining routes in our React app, i.e., we can define how to map URLs to resources. When the user clicks a link in the app, the React app already loaded in the browser uses the React Router library to map this request to a new component and renders a different DOM tree completely within the browser, without sending the request to a server.
What is a {link} element do in React? How is it different than an <a></a> element in html?
When we click the URL in a Link component, the React app changes the DOM tree entirely on the client-side, i.e., in the browser, without needing to talk to the server. The browser shows the new URL as the address of the page. But the page has not been loaded from the server.
When we click the URL in an a element, if the URL corresponds to a new page (rather to an anchor in the same page), then a request is sent to the server, the new page is received in the response and is then rendered in the browser. This happens even if our React app is otherwise set up as a SPA, due to the use of the a element.
What are controlled forms?
Controlled Forms is the pattern of managing the input via useState in React apps.
