React.JS information
What is a controlled component?
-An input form element whose value is controlled by React through the method of two-way binding.
What are the two arguments that a useEffect hook takes in React.
1. a function that should be executed After every component evaluation IF the specified dependencies change. 2. Dependencies of this effect - the function only runs if the dependencies change.
With React, you build a __________ with one root component that's mounted into a ____________.
1. component Tree 2. DOM node
Q. You have three components: A, B, and C. The definition of component C is: const C = ({ one, two }) => <> <div id="one">{one}</div> <div id="two">{two}</div> </>; What code snippet will make C render component A in a div#one and component B in div#two
<C one={<A />} two={<B />} />
You have this style.css file: .red {background-color: red;} Your React stack is configured to use CSS modules. Assuming that the style.css file has been imported into a React component as a module like this: import styles from 'styles.css'; Which snippet of code is the likely way to use the .red style in JSX?
<div className={styles.red}>...</div>;
Q. You have a component named Row that received a prop named odd. The component outputs a div. You must give that div a gray background when the prop odd is true and green otherwise. Which code snippet will do the job?
<div style={ { backgroundColor: odd ? 'gray' : 'green' } }>
Q. What is the resulting HTML for this component? const App = () => ( <div>{4 + 2}</div> );
<div>6</div>
Compilers
A JavaScript compiler takes JavaScript code, transforms it and returns JavaScript code in a different format
Q. What is a higher order component?
A function that takes a component and returns a new component
Which value should you pass to event listener props like onClick?
A pointer at the function that should execute when the event occurs. Don't call it within.
Stateless Component
A pure function that renders DOM object based solely on the properties (parameters) provided to it. No internal state, no lifecycle hooks
A React component has this line: import "../style.css" The style.css file has Cascading Style Sheets (CSS) rules and the React component is styled according to them. Assuming your React web app stack uses ReactDOM, Webpack, Babel, and TypeScript, which part of that stack makes it possible for your React component to import the CSS file?
A webpack loader
How should you NOT listen to events when working with React?
Adding an event listener (e.g via "addEventListener") manually
Q.If component C defined a context object and used its "Provider". What components can access the value of that context object?
All children and grand children components of C
Q. You have a React application that defined and used a context object. The Provider component has three children components that consume the context: C1 is a normal class component; C2 is a pure class component; C3 is a function component What happens when the value attribute of Provider changes?
All three components will re-render
Q. Which statement is true about defining a React component without state?
Any React component can be defined without state
How much state may you manage in one single component?
As many as you need/want
Why do you need this extra "state" concept instead of regular JS variables which you change and use?
Because standard JS variables don't cause React components to be re-evaluated. Further Explained- React doesn't care whether you changed some variable values. It'll not re-evaluate teh component function. It only does that for changes to registered state values (created via useState)
Why do we destructor the array that useState returns?
Because useState returns two values , the default state and the functions that updates the state. The parameter that you pass throught useState function will be the current State.
Composition
Building User Interface with smaller blocks
Bundlers
Bundlers take JavaScript and CSS code written as separate modules (often hundreds of them), and combine them together into a few files better optimized for the browsers
How can you update component state (created via useState)?
By calling the state updating function which useState also returned.
Q. While coding unit tests for a component, you run into an issue where one of its child components is throwing exceptions and causing your tests to fail. How can you keep your unit tests, without removing the child component?
By mocking out your child components
CDN
Content Delivery Network - deliver cached, static content from a network of servers across the globe.
An input form element whose value is controlled by React is called a __________
Controlled
How can you change what a component displays on the screen?
Create a state value with useState which you can then change and output in JSX
Which kind of code do you write when using React.js?
Declarative JavaScript Code
Why is React all about "Components"?
Every UI in the end up is made up of multiple building blocks (=components), hence it makes sense to thing about user interfaces as combination of components
True or False? The useState syntax will update the state value.
False- Calling useState will simply create a new state.
Why is the below code wrong? const [counter, setCounter] = useState(1); ... setCounter(counter + 1);
If you update state that depends on the previous state, you should use the "function form" of the state updating function instead. So to fix this code you would replace setCounter(counter + 1); with setCounter(counter => counter + 1
What is "JSX"?
It is a syntax extension to JavaScript. JSX produces React "elements".
what is two-way binding
It means that a value which is used in the component is passed on to a parent component, through props and recieved by the parent component.
What does "component tree" mean?
It means that you have one root node which then has more components nested beneath it.
What does this code snippet do? someArray.map((element) => <p>{element}</p>)
It transforms an array (someArray) into a new array full of JSX elements (which can be output by React)
What is a "React Component"?
Its a JavaScript function which typically returns HTML (JSX) code that should be displayed
Why should you add the special "key" prop to list JSX elements?
Its required for react to correctly identify and update (if needed) the list elements.
Q..Which API can measure how often React renders and what the cost of rendering is?
React.Profiler
What method do you call to create a Context object?
React.createContext();
Q. How would a tool such as Babel or TypeScript compile the following JavaScript XML (JSX) line? <button type="submit"> Send </button>
React.createElement("button", { type: 'submit' }, "Send")
Q. Which line mounts a React application in a browser
ReactDOM.render()
Q.What is a disadvantage to using a state-management solution such as Redux rather than built-in state management in React?
Redux introduces extra verbosity and code complexity.
What is a 'Side Effect"
Task done to the Dom that are not categorized as an 'Effect'. Events like storing the data to Browser Storage, sending HTTP Requests to Backend Servers Set & Manage Timers. etc.. Must happen outside the normal component functions.
Q. You have the following snippet of code in a test file for a React component: import App from './app.js'; // The component being tested it('renders correctly', () => { const tree = renderer.create(<App />).toJSON(); expect(tree).toMatchSnapshot(); }); What does this test validate?
That if a snapshot already exists, and matches with the one from the tree, the test passes
How many custom React components must a React app have?
That's totally up to you
What is the proper syntax for setting a default value {item: 0 }to a prop of a component named "TheeComponent?"?
TheeComponent.defaultProps = {items: 0}
What does 'Lifting State Up' mean
To move data from a child component to a parent, as to use that data on the parent component or to pass it along another child component. Since you cant pass data between children components.
Q. What validation does snapshot testing provide?
Validation that the component's expected rendered HTML output did not change
How do you pass data between components?
Via "custom HTML attributes" (better known as "props")
How can you communicate from one of your components to a parent (i.e. higher level) component?
You can accept a function via props and call it from inside the lower-level (child) component to then trigger some action in the parent component (which passed the function).
How can you output dynamic data in React components (i.e. in the returned JSX code)?
You can use single curly braces (opening & closing) with any JS expression between them.
What's true about outputting conditional content in React components?
You can work with regular ternary expressions of "if" checks to output or return different results in/ from your component.
What does "declarative" mean?
You define the desired outcome (e.g. a target UI) and let the library (React) figure out the steps.
Q. What is a difference between using the Document Object Model (DOM) application programming interface (API) instead of React?
You must write imperative code more frequently than declarative code.
Stateful Component
a class component that does maintain its own internal State.(React Components)
What is a tagged template literal? What is used for?
adding backticks to the end of a function in order to pass the template literal string through the functions and return both the string and the expressions
stateless functional component
any function you write which accepts props and returns JSX.
"props"
arguments passed into React components. Props are passed to components via HTML attributes. props stands for properties.
userReducer
can be used to replace useState() if you need 'more powerful state management'.
Q.Given the following component hierarchy (Foo -> Bar -> Baz): const Foo = ({ v }) => <Bar v={v} />; const Bar = () => <Baz />; const Baz = () => <div>{v}</div>; write a code snipper that represents the minimal changes needed to ensure that the {V} in component Baz renders the same value as the {V} in component Foo.
const Bar = ({ v }) => <Baz v={v} />; const Baz = ({ v }) => <div>{v}</div>;
Q.You want to manage two state variables, x and y, in a function component. These two state variables will always update together and their initial value is not defined. Which code is the correct way to do so?
const [{x, y}, setXY] = React.useState({});
Lifecycle Methods
custom functionality that gets executed during the different phases of a component.
Q.Your team convention is to export all components using named exports. Which line of code must you use to define your component?
export const MyComponent = ...
Keys
is a special string attribute you need to include when creating arrays of elements. Keys help React identify which items have changed, are added, or are removed.
Q.Which return statement should a component use so it renders nothing?
return null;
what is ref?
this attribute can be an object created by React.createRef() function or a callback function, or a string (in legacy API). When the ref attribute is a callback function, the function receives the underlying DOM element or class instance (depending on the type of element) as its argument.
Stateless Functional Component
type of simple function that returns react elements
Q.What is the syntax to create an async function inside the useEffect Hook?
useEffect(() => { async function Foo() { }... }, [])
Reconciliation
when components props or state change, React decides whether an actual DOM update is necessary by comparing the newly returned element with the previous rendered.
state
when some data associated with it changes over time.
When attempting to edit the css styling of an element, with JSX what would be the syntax used ? for example, you would like to edit <div className='chart' /> and you need to edit the background-color.
you would add the style property to the div element around another set of curly braces, since JSX needs to recieve a Javascript obj. once you do that you can either surround the styling with quotations or convert it with camel case and avoid the use of '-'. Ex 1: <div className='chart' style={{'background-color': 'red'}}/> Ex 2: <div className='chart' style={{backgroundColor: 'red'}}/>
