React Trivia Flashcards
What’s a react component?
A function of its state and props. It can be a class component or a functional component.
Functional components is a plain JS function that returns JSX.
Class component is a JS class that extends React.Component and returns JSX inside a render method.
Whats a higher order component?
It’s a function that takes a component and returns a new component.
Whereas a component transforms props into UI, a higher order component transforms a component into another component. They’re common in third party libraries such as Redux’s connect.
What’s React JS?
It’s an open source frontend JS library used for building user interfaces, specifically for single page apps.
What are the advantages and disadvantages of ReactJS?
Advantages:
- Increases the apps performance with the virtual DOM
- JSX makes code easy to read and write
- It renders both on client and server side
- It’s easy to integrate w/ other frame works like Angualr, since it’s only a view library
What are the advantages and disadvantages of ReactJS?
Advantages:
- Increases the apps performance with the virtual DOM
- JSX makes code easy to read and write
- It renders both on client and server side
- It’s easy to integrate w/ other frame works like Angular, since it’s only a view library
- Easy to write UI test cases and integration with tools like JEST
Disadvantages:
- It’s only a view layer, you still have to plug your code for Ajax requests, events and so on. some people get surprised by that
- The library is pretty large
- The learning curve can be steep
What’s JSX?
JSX is a syntax notation for JS XML (XML-like syntax extension to ECMAScript). It provides expressiveness of JS along with HTML like template syntax.
What are the differences between props and state?
Both are plain JS objects. They’re different in their functionality with respect to component. Props get passed to the component similar to function parameters whereas state is managed within the component similar to variables declared within a function.
What are the differences between props and state?
Props:
- are passed into components
- they should not change w/in a component
State:
- used to keep track of information between rendering
- it’s created in the component and contains “private” info to initialize, change, and use on it’s own
- it’s changeable via setState
Similarities:
- both are plain JS objects
- with both, changes trigger a render update
- they are both deterministic, meaning if your component generates different outputs for the same combination of props and state then you’re doing something wrong
What’s the difference between functional components vs. class components?
Functional components:
They’re JS functions that accept a single props object argument w/ data and return a react element. They can be created via a JS function or an ES6 class
Class components:
They’re simple classes that require you to extend from React. Component must use the render() method. They allow you to use React lifecycle methods ex. componentDidMount() and componentWillUnmount() as well as have access to the state of the component
What are controlled/uncontrolled components?
Controlled:
They make the React state become the “single source of truth”. It combines the React way of keeping mutable state in the state property and only updating via setState, and the HTML way of form elements such as input, text area, and select maintaining their own state and updating it based on user input. the value of the input is always driven by the React state.
Uncontrolled components
W/ uncontrolled components, the form data is handled by the DOM itself. Instead of writing an event handler for every state update, you can use a ref to get form values from the DOM. Since the “source of truth” is in the DOM, it can require less code and sometimes be easier to integrate React and non-React code when using uncontrolled components.
How would you structure a new React project?
Group by features or roles
ex. component that deals with rendering restaurants, I’d put the index.js in a folder, followed by the css file, and other related files that is needed
How would you structure a new React project?
Group by features or roles.
ex. component that deals with rendering restaurants, I’d put the index.js in a folder, followed by the css file, and other related files that is needed
You can also group by file type. Ex. grouping similar files together into separate folders.
How would you structure a new React project?
Group by features or roles.
ex. component that deals with rendering restaurants, I’d put the index.js in a folder, followed by the css file, and other related files that is needed
You can also group by file type. Ex. grouping similar files together into separate folders.
What are the main benefits of using react hooks?
- Hooks allow you to extract stateful logic from a component so it can be tested in isolation or reused. Basically, it allows you to reuse this stateful logic w/o changing our component hierarchy
- Hooks let you split one component into smaller functions based on what parts are related, rather than forcing a split based on lifecycle methods such as componentDidMount and componentDidUpdate which can cause bugs and inconsistencies.
- Hooks let you use more of React’s features w/o classes. The main drawbacks to using classes are that you need to understand how this works in JS and also remember how to bind the event handlers.
Can you use hooks side by side with existing class components?
Yes, hooks work side by side with existing React class components. It’s best to use hooks for new, less critical components as part of your hooks intro strategy, rather than refactoring your entire codebase to use hooks.
