Chapter 1: Introducing React and React Hooks

  1. What are React's three fundamental principles? 
    • Declarative: Instead of telling React how to do things, we tell it what we want. As a result, we can easily design our applications and React will efficiently update and render just the right components when data changes.
    • Component-based: React encapsulates components that manage their own state and views, then allows us to compose them to create complex user interfaces.
    • Learn once, write anywhere: React does not make assumptions about your technology stack and tries to ensure you can develop without rewriting existing code as much as possible.
  2. What are the two types of components in React?
    • Function components: JavaScript functions that take the props as an argument and return the user interface (usually via JSX)
    • Class components: JavaScript classes that provide a render method, which returns the user interface (usually via JSX)
  3. What are the problems with class components in React?
    • JavaScript classes are hard to understand for developers: The this context can be confusing, and we sometimes have to write code in multiple places at once
    • They are also hard to understand for machines: It is hard to tell which methods will be called and, as such, performance optimizations are not really possible
    • They are not declarative and thus go against React's fundamental principles: To use React features, we have to write code that tells React what to do, not how to do it
  1. What is the problem of using higher-order components in React?
    • Using higher-order components introduces components to our view tree that do not actually matter in terms of view structure. Having many higher-order components causes the so-called wrapper hell.
  2. Which tool can we use to set up a React project, and what is the command that we need to run to use it?
    • We can use create-react-app. To create a new project, we have to run npx create-react-app <app-name> or yarn create react-app <app-name>.
  3. What do we need to do if we get the following error with class components: TypeError: undefined is not an object (evaluating 'this.setState')?
    • We forgot to re-bind the this context of the method in the constructor of our class. As a result, this is not pointing to the class but, instead, to the context of the input field.
  4. How do we access and set React state using Hooks?
    • We make use of the useState() Hook as follows: const [ name, setName ] = useState('')
  5. What are the advantages of using function components with Hooks, in comparison to class components?
    • Function components with Hooks do not suffer from the same problems as classes. They are declarative and thus fit React's fundamental principles better. Hooks also make our code more concise and easier to understand.
  6. Do we need to replace all class components with function components using Hooks when updating React?
    • No, we do not need to replace all class components. Function components with Hooks can work side-by-side with existing class components and are 100% backward-compatible. We can simply write new components using Hooks or upgrade existing components at our own pace.
  1. What are the three basic hooks provided by React?
    • The useState, useEffect, and useContext Hooks are the basic Hooks provided by React and used very frequently in projects. However, React also provides some more advanced Hooks out of the box.
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.119.105.239