Answers To Study Guide: ReactJS + Redux Part I

This is a follow-up, answer guide to my blog post Study Guide: ReactJS + Redux.

☁️This study guide extends vocabulary and key concepts from React, Redux, and JavaScript. Enjoy!💿

I've broken it down into a few subtopics:

• INTRODUCTION TO REACT / GENERAL
• COMPONENTS
• STATE + PROPS
• ROUTING
• EVENTS

INTRODUCTION TO REACT / GENERAL

1. What is React?

   • React is a JavaScript library used to build, organize, and manipulate UI with the implementation of components, JSX, and declarative-type coding.

2. What are React's core features?

   • Namely above: Components, JSX, Declarative coding.

3. How is React code written?

   • React is written declaratively meaning the code says what it wants to achieve rather than how it will be achieved.

4. What is JSX?

   • JSX is a syntactic extension of JavaScript.
   • It allows for JavaScript expression to be rendered and returned within HTML elements.
   • JSX can be considered first-class data: it can be used in statements or loops, can be assigned to variables, can be accepted as arguments, and can be the return value to a function.

5. What is the Virtual DOM?

   • A representation of the DOM>
   • React looks to the Virtual DOM to see any updates or modifications to the DOM; if there are any, React will only render those changes to the DOM.

6. What is memoization? Give an example.

   • Storing something in memory to be used later on.
   • "...optimization technique of storing previously executed computations. Whenever the program needs the result of these computations, the program will not have to execute that computation again. Instead, it will reuse the result of the previously executed computation."

7. What is client-side routing?

   • The internal handling of routes/routing inside the frontend that is rendered to the client.

8. What is object destructuring? Give an example.

   • It is the storing of an object's attributes to a variable.
   • Example:

person = {
   name: 'Adriana',
   age: 400

}
const {name, age} = person

console.log(name)
// => 'Adriana'

1. What does "referentially transparent" mean?

   • "Pure" - producing no side effects; given the same input, the same output is always returned.

2. What does "reconciliation" mean?

   • See Virtual DOM

3. What is the difference between a framework and a library?

   • Framework: a set of standards to follow.
   • Library: a set of prewritten code to be used in an application.

4. What is ReactDOM?

   • A component given to us from React.
   • It helps to render our top level component to a top level HTML element.
   • Ultimately, provides a way to manipulate and control React components onto the DOM.

5. What does ReactDOM.render() do?

   • Renders our top level component to an HTML element.

6. What is Babel?

   • A transpiler that converts JSX to JavaScript.

7. What is transpiling? What is compiling?

   • Transpiling: converting code from one language to another that share a similar level of abstraction (JSX => JS). More specific.
   • Compiling: converting code from one language to another. More generalized.

8. What is Node Package Manager? What does it do?

   • A utility used in the command line to install node packages and manage package versions + dependencies.
   • When a node package is installed, it provides built in code + behaviors.

9. What is Webpack? What does it do?

   • A bundler that bundles modules of code into a single asset or file.

10. What does "unidirectional data flow" mean?

    • The flow of data in one direction only.
    • In React, from parent component to child component (props).

11. What is the purpose of keys?

    • Provides an unique identifier for a component.

COMPONENTS

1. What are the key features of Class components?

   • Render() + return()
   • Extends React.Component
   • constructor() + super() -- not so much anymore.
   • Lifecycle methods
   • binding
   • "this.props"

2. What are the key features of Functional components?

   • return()
   • Lifecycle Hooks
   • props

3. What is a "controlled" component?

   • A component that renders form elements and controls them by keeping the form data in the component's state.

4. What is a "pure" component?

   • A component that does not rerender when state has changed.

5. Is there a difference between class and functional components? (Think state, functionality, syntax)

   • Class and functional components hold no major differences since the implementation of lifecycle hooks into functional components. They both can manage + manipulate state, as well as mount or unmount components to the DOM.
   • The primary difference is now syntax.

6. What is the React.Component class? What is its purpose?

   • The top level class of React.
   • In order to declare another class component in React, you must extend the class to React.Component.
   • Provides many built in methods + behaviors.

STATE + PROPS

1. Describe state.

   • The data of an application's components.
   • State is immutable, but it can be replaced with a new state.

2. Describe props.

   • Data passed down from parent component to child component.
   • Props is immutable.

3. What are the ways we can update state and return a new state?

   • Through React, the use of lifecycle hooks and/or lifecycle methods.
   • Through Redux, the use of actions + reducers.

4. What is the difference between React state and Redux State?

   • React: State is local as it is accessed through components only.
   • Redux: State is considered global since state is stored in a single location (the store) outside of the application. Thus, giving access to state to all components when necessary.

ROUTING

1. What is React-Router? What does it do?

   • React-Router is a node package that allows for a standardization for client-side routing (frontend).
   • It syncs the UI to the components and makes possible for a URL change to maintain the same React component.

2. What are routeProps?

   • Props passed into a route from its top level component to be used in the rendered component of that Route component.

3. What is Router?

   • Navigational component that surrounds/holds the collection of Route components. Given to us by React-Router.

4. What is Route?

   • Individual navigational component that renders a component to the specified route.

5. What is {...routeProps}?

   • Passed into the render attribute of a Route component, it returns the new props given any changes.

6. What does the Switch component do?

   • Looks to see what Route component closely matches the URL path provided and renders that component.

EVENTS

1. How does React handle events? Give an example.

   • React uses event listeners and event handlers.
   • Event listeners, like onClick or onKeyPress, listen for an event and then invoke a callback that will invoke the change or update.

2. What is a "synthetic" event?

   • Wrapped around an event, it helps with cross browser compatibility so the events happen identically across all browsers.
   • e.preventDefault() is an example of one.

3. What is a "native" event?

   • events fired by the browser like a click or a key press.

4. What is the purpose of "e.preventDefault()"?

   • prevents default behavior of events, like a form submission.

5. What is a controlled form?

   • A form whose state is controlled by its parent component.

This is Part 1! Part 2 will be out shortly!

💿Thank you for reading along!💿
☁️Comment below for any suggestions!☁️

Comments

[Anita Wright]

Wow, great job breaking things down like this! Super helpful! 👏🏽

[Adriana DiPietro]

Thanks for your support Anita!!!

[akhilesh kumar ojha]

Nice post

[Adriana DiPietro]

Thank you!!