React.js basics

17 flashcards · Programming Languages · by Ajmal Haris

1. A JSX expression can have exactly ________ outermost element.

   A JSX expression must have exactly one outermost element. Example: const paragraphs = ( <div id="i-am-the-outermost-element"> <p>I am a paragraph.</p> <p>I, too, am a paragraph.</p> </div> );

2. What is ReactDOM?

   ReactDOM is the name of a JavaScript library. This library contains several React-specific methods, all of which deal with the DOM in some way or another.

3. What's "diffing" in Virtual DOM?

   By comparing the new virtual DOM with a pre-update version, React figures out exactly which virtual DOM objects have changed. This process is called “diffing.”

4. In JSX, you can’t use the word class! You have to use className instead. Why?

   This is because JSX gets translated into JavaScript, and class is a reserved word in JavaScript. When JSX is rendered, JSX className attributes are automatically rendered as class attributes.

5. Is slash necessary in self-closing tags?

   Yes, In JSX, you have to include the slash. If you write a self-closing tag in JSX and forget the slash, you will raise an error.

6. How is javascript injected into a JSX code?

   By adding curly braces, the curly braces themselves won’t be treated as JSX nor as JavaScript. They are markers that signal the beginning and end of a JavaScript injection into JSX, similar to the quotation marks that signal the boundaries of a string. Example: <p> {Math.PI.toFixed(20)} </p>

7. What’s a component?

   A component is a small, reusable chunk of code that is responsible for one job. That job is often to render some HTML.

8. How do we define a component using class?

   class MyComponentClass extends React.Component { // everything in between these curly-braces is instructions for how to build components render() { return <h1>Hello world</h1>; } }

9. What is 'props'?

   Information that gets passed from one component to another is known as “props”.

10. How do we pass 'props' to a component?

    By giving that component an attribute. Example: of string pass, <MyComponent foo="bar" /> other than string pass, <Greeting myInfo={["top", "secret", "lol"]} />

11. prop and props, difference?

    props is the name of the object that stores passed-in information. this.props refers to that storage object. At the same time, each piece of passed-in information is called a prop. This means that props could refer to two pieces of passed-in information, or it could refer to the object that stores those pieces of information.

12. this.props.children

    this.props.children will return everything in between a component’s opening and closing JSX tags.

13. notes

    If a component has more than one child between its JSX tags, then this.props.children will return those children in an array. However, if a component has only one child, then this.props.children will return the single child, not wrapped in an array.

14. this.setState Automatically Calls render, how?

    Any time that you call this.setState(), this.setState() AUTOMATICALLY calls .render() as soon as the state has changed. Think of this.setState() as actually being two things: this.setState(), immediately followed by .render(). That is why you can’t call this.setState() from inside of the .render() method! this.setState() automatically calls .render(). If .render() calls this.setState(), then an infinite loop is created

15. What is state hooks?

    The State Hook is a named export from the React library, so we import it like this, import React, { useState } from 'react'; useState() is a JavaScript function defined in the React library. When we call this function, it returns an array with two values: current state - the current value of this state state setter - a function that we can use to update the value of this state

16. Why do we use Hooks?

    We use Hooks to “hook into” internal component state for managing dynamic data in function components.

17. What are stateful and stateless components>

    A stateful component, and a stateless component. “Stateful” describes any component that has a state property; “stateless” describes any component that does not.