React Flashcards
What is React?
React is a JavaScript library to facilitate the creation of interactive, stateful and reusable UI components.
What is the virtual DOM?
It is an abstraction of the HTML DOM. It allows React to do its computations within the abstract DOM without the real DOM operations, often slow and browser-specific.
In most cases, what do you need to to transform HTML code into a static React component?
- Return the HTML code in render.
- Replace class attribute name to className (because class is a reserved word in JavaScript).
What is the directory node_modules/?
It contains all the dependencies that the package manager loads based on the dependencies list defined in the package.json file.
What is the directory public/?
- Public root of the site.
- Files in there are accessible to anyone on the web.
- Good place to keep static files and assets that are not being managed in the src/ directory.
What is the src/ directory?
The application code!
Where does the browser look for the initial instructions to render the React app?
public/index.html
Does the public/index.html file has to be blank? Why not?
No: you can add whatever static design frame and elements around the React element, and know that the app will appear inside that element when JavaScript executes.
What is src/index.js?
It is the file where React looks for initial instructions to build UI inside the root element defined in public/index.html.
What are the two different ways to import modules, assuming Webpack is used?
- Modules defined in package.json and installed can be imported by name ==> e.g. import {Module} from ‘module’;
- Modules that are not package.json can still be imported by specifying a path to the file where those modules are defined ==> e.g. import {Module} from ‘path/to/module’;
What are the arguments of the render() function within src/index.js?
- A React component to render: the ‘App’ component from src/app.js
- A DOM node to serve as the render container, that is, the root element.
Why can we use HTML and JSX expressions in a React app JavaScript file?
Because the JSX interpreter will compile the JSX tags and HTML tags into calls to React.createElement(). Incidently, the React module has to be imported even if not seemingly used.
What is the component < App/ >?
- It is the first component the React app will call in index.js.
- It serves as the container for rendering all the other components in the app.
What are all components expected to do?
All components are expected to define a function called render() that returns some DOM elements.
Why are curly brackets special inside JSX tags?
They indicate that the code inside the curly brackets is JavaScript. It can be used to print the evaluated value of a JavaScript expression in the generated markup.
What cannot be put inside curly brackets inside JSX tags?
Statements CANNOT be within these curly brackets, but any JavaScript expression can be.
How to run a React app in development?
$ npm start
What does $ npm test does?
It launches a test runner (i.e. Jest) watching changes to the app and trying to run related tests.
What does $ npm run build does?
It packages the app for a production deployment, at /build/static/js/.
How does React handles non-JavaScript assets?
Webpack loaders (which create-react-app is using behind the scenes to build the app) let you load them directly in Javascript through the module system if files are included in the ‘src’ directory.
What is a SPA (Single Page Application)?
A SPA website usually loads once, then rewrites sections of a page rather than loading entire new pages from a server.
What are React components?
- Conceptually, components are like JavaScript functions.
- They accept arbitrary inputs (called “props”) and return React elements describing what should appear on the screen.
- Components are stateful and reusable.
What are Web components?
- Reusable page elements that encapsulate pieces of functionality.
- Examples:
- Search input that offers live previews of search results.
- Button that shows a tooltip on hover.
- They are distinct and complementary to React components.
What is JSX?
- It is a templating language combining HTML and JavaScript into a single file.
- It is mostly a syntactic convenience for building up JavaScript objects that describe DOM elements.
What is the rendering limitation of SPAs?
- The client-side rendering that SPAs do means delayed rendering and delivering more JavaScript to the client.
- This is a limitation that all JavaScript frameworks have.
What is the solution to the limitation of SPAs?
Frameworks such as React, Ember and Angular 2 are creating server-side rendering engines in Nodejs that can pre-render the app as static HTML, so that the browser has HTML to read immediately on page load.
What is the alternative to declaring a variable at the top of a file?
Make use of constructor function to declare the intitial state of a component:
import React from 'react';
class ComponentName extends React.Component { constructor(props) { super(props); this.state = { [var]: [expression] }; } render() { ... } }}
export default ComponentName;
What are props?
Props are arbitrary inputs accepted by components.
- For components created as objects: props are a property of this.
- For components created as functions, props are a function parameter.
How to pass an input as prop to a component?
Component some_prop=input / >
What care should be taken when accessing props within components?
Only access props (e.g. this.props) to read values. Never modify props inside components.
Components always need to have one top-level element. How to make sure they do?
- Add a single wrapper element: < div > … [your_elements] … < /div >
- Nest one of the top-level elements inside the other.
What is the basic structure of a Reat component?
import React from ‘react’;
class ComponentName extends React.Component {
render() {
return (
[... some elements defined with JSX ...]
);
}
}
export default ComponentName;
What is the scope of state?
state is a private property of components. Only the corresponding component can read it and change it.
What is super(props)?
It is a JavaScript expression used to call functions on a parent’s object within a constructor function. It runs the constructor function of the parent component. props is passed along to make sure super() has access to the same arguments as the overwriting constructor.
How can a component share information about its state?
Pass the state explicitly via props in the call to an other component.
How to handle the different stages of component’s life in the DOM?
- When a component’s output is first inserted into the DOM it will trigger a hook called componentDidMount().
- When it’s removed from the DOM it will trigger one called componentWillUnmount().
- These hooks are on the same level as render() and return(), and between them.
Where to store variables set within hooks?
They should be stored on the this object or on a variable initialized at the top of a file. Only variables used in render() should be stored in state.
How to trigger React to update?
Use the setState() method within a function inside a component:
class ComponentName extends React.Component {
constructor(props) {
super(props);
this.state = {
[var]: [expression]
};
}
updateFunc() {
this.setState({
[var]: [expression]
});
}
render() { ...
}
}
how to refer to props or previous state when using setState?
Use a second form of setState that accepts a function as an argument, rather than directly passing the state (because value of state and prop may be unpredictable due to React asynchronous nature):
updateFunc() {
this.setState(function (prevState, props) {
return {
};
});
}
What is the basic structure to handle events in React?
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
handleClick(event) {
console.log(this);
}
render() {
return (
[button onclick={this.handleClick}]
Click me
[/button]
);
}
}
Why do we need to use a constructor to bind an event to this to handle events?
Because the value of this is not bound to the object where the function was originally defined. it is a common pattern when you define a class, and need to preserve reference to this inside its class functions after they are passed around to be executed as callbacks outside the orginal class context.
What does it mean that React has a unidirectional data flow?
Apps are organized as a series of nested components. These components are functional in nature: they receive information through the props attribute, and pass information via their return values. Data is passed down from components to their children.
Should components try to read or modify the DOM directly?
No, if you find yourself writing selectors to access elements on the page, then there is something wrong.
How can a child element trigger a change reflected in a parent component?
The parent component should pass one of its own functions as a callback in a prop when calling the child component.
What is the right place of an element of state if two or more components need to share access to it?
The right place of the element of state is in a common ancestor component.
What is the routing limitation of SPAs?
As the application is contained in a single page, it cannot rely on the browser’s forward/back buttons.
Add dependencies to package.json, either or both to production and development/test.
- Production: $ npm install [package] –save
- Development/test: $ npm install [package] –save-dev
What is the role of React Router?
React Router fixes the routing limitation of PSAs. It allows the application to navigate between different components, changing the browser URL, modifying the browser history, and keeping the UI state in sync.
What are the components on which the React Router API is based?
- Router: keeps the UI in sync with the URL.
- Link: renders a navigation link to change the location.
- Route: renders a UI component depending on the URL.
What are the two router implementations and their URL formats?
- BrowserRouter: using the HTML5 History API.
- import { BrowserRouter } from ‘react-router-dom’;
- http://localhost:3000/route/subroute
- HashRouter: using the hash portion which sets or returns the anchor part of the URL.
- import { HashRouter } from ‘react-router-dom’;
- http://localhost:3000/#/route/subroute
How many child elements a router component can have?
Only one child component.
What is the main job of the Router component?
The main job of a Router component is to create a history object to keep track of the location (URL). When the location changes because of a navigation action, the child component is re-rendered.
What is JSX?
JSX is a shorthand for JavaScript XML. This is a type of file used by React which utilizes the expressiveness of JavaScript along with HTML like template syntax. This makes the HTML file really easy to understand. This file makes applications robust and boosts its performance.
