React and Redux

56 flashcards · Computer Science · by Dhruv B

1. What is Babel?

   A command line tool that converts any version of JS into what the browser supports.

2. What does the double bracket mean in HTML? For example: <div style={{backgroundColor:'red'}}></div>

   The first bracket signals you are going to reference a JS variable. The second bracket signals you are creating a new JS object in-line. For the example provided, the object has key:value pairs of properties inside that object.

3. How do you reference JS variables inside JSX?

   Use curly braces around the variable name. Example: const App = () => { const buttonText = 'Click Me'; return ( <button style={{color:'black'}}>{buttonText}</button> ) }

4. What values can JSX NOT show?

   Objects cannot be referenced as a React component/JSX.

5. How can you save a package into a projects dependencies?

   npm install --save <package_name>

6. Whats the best way to reuse JSX components?

   Identify what can be reused. Extract it into its own file. Use React props to make the component modifiable.

7. How does props.children decide what the children are?

   Any elements included between the opening and closing tag of a component are included in this props property.

8. What are the two types of Components?

   Functional and Class-Based

9. What are some properties of Functional Components?

   They help keep your code simple, readable, and reusable. As they are pure functions it is easier to test them. They do not have access to state so you are forced to think in terms of passing props, which will make your components reusable. If you think your component can be used outside of your project you can even consider publishing your component to npm.

10. What is a Functional Component?

    This component is a function that returns some data, whether just primitive data or JSX.

11. What is a Class-based Component?

    A component that extends React.Component and uses the render() method to output data.

12. What are good reasons to use Class-based components?

    Use this component when: You need to make use of state You need to fetch data from elsewhere You need to use lifecycle hooks Want control on re-rendering behavior

13. What are the rules to follow for Class-based components?

    Must be a Javascript Class Must extend React.Component Must define a render() method that returns some JSX

14. What is State?

    A JavaScript object that contains data that is relevant to one single component.

15. What happens to a component when its State is updated?

    When this happens, the component is re-rendered.

16. When is State initialized?

    This is initialized when the component is created.

17. How can state be updated?

    This can only be updated by using setState()

18. What function in JavaScript is always run when a component is created?

    The constructor(props) method is always run during component creation.

19. What kind of data can be stored in a State object?

    This basically a dictionary with key value pairs. As such, it can hold any kinda of data.

20. What are two ways to initialize state?

    class App extends React.Component{ constructor(props) { super(props); this.state = {showform: true} } } class App extends React.Component{ state = {showform: true} }

21. How can you pass state to a component?

    You can do this by sending it as a prop

22. How do you specify default properties for a component?

    <component> Spinner = props => { ... } <component>.defaultProps = { prop1: 'Loading' } export default <component>;

23. What is the componentDidMount lifecycle method useful for?

    This lifecycle method is useful for: Initial Data Loading Calling APIs Calling any other outer process.

24. What is the componentDidUpdate lifecycle method useful for?

    This lifecycle method is useful for: Loading data every time a component is (re)rendered.

25. What is the componentWillUnmount lifecycle method useful for?

    This lifecycle method is useful for: Cleaning up non-react data

26. What is an uncontrolled component?

    Components who's form data is handled by the DOM

27. What is a controlled component?

    Components who's form data is handled by a React component.

28. What is the difference between a controlled and uncontrolled component implementation?

    The former's components' value is set by state, as opposed to getting it from the DOM when a user submits data. onInputChangeControlled = (event) => { console.log(event.target.value) // Update state to keep track of the new value this.setState({term: event.target.value}) // We know the value of the input anytime, since its inside state. } onInputChangeUnControlled = (event) => { console.log(event.target.value) //React to event without state. //We only know the value of the input inside this fun…

29. What are the most common state-change events?

    onClick, onSubmit, onChange

30. What elements do state-change events apply to?

    These events apply to almost all HTML elements.

31. Where do you specify the state-change action for a HTML element?

    Specify the handler for this event in the attributes for the HTML element. For example: <input type='text' placeholder='search' onClick={afunctionCallback}></input>

32. What is the cleanest way to respond to a state-change event?

    The cleanest way to respond to this event is a function callback

33. What is Axios?

    This is a module that performs API calls, similar to fetch. It has a few more features that can be useful and let you write less code.

34. What is usually the best place to set state after getting data, for example from an API call?

    The best place to usually do this is right after you get the data in the function that does the work.

35. What is special about arrow functions? lol = () => {}

    These functions are special because they bind the context to the React component, because they do not have their own 'this'.

36. Where does a function get its context?

    This is resolved from where the function was called.

37. What is generally the best place to run API calls before/when a component is rendered?

    The general best place to do this is in componentDidMount()

38. How do you render a list of items?

    const ImageList = props => { const images = props.images.map((image) => { return <img src={image.urls.regular}/> }); return <div>{images}</div>; }

39. What attribute is import to add to lists?

    Its import to have an id in the root item for each item in this kind of component.

40. How do you add keys to lists?

    To do this, add a key attribute to the root element of a list item.

41. What is the ref system?

    This is a system that gives direct access to a single DOM element rendered by a component.

42. How do you create a ref?

    constructor(props) { super(props); this.aRef = React.createRef(); }

43. What is ref assigned after its component is rendered?

    This is a JavaScript object with a current property. It contains different attributes of the instance of the component it's attached to.

44. How do you attach a ref to a component?

    To do this, add a ref={this.aRef} property to the component.

45. For what component does a ref not work? Why?

    This doesn't work for function components because they don't have instances.

46. What is a hook?

    This is a function that lets you hook into React state and lifecycle features from function components.

47. What are hooks useful for?

    These are useful to use state and other React features without using a class.

48. When should you use a hook?

    Use this if you want to add state to something and don't want to create a class.

49. What does useState() return?

    This function returns: The current value of the var A function that lets you update it.

50. What parameter does useState() take in?

    This function takes in the initial value of the state as its only parameter.

51. What does the useEffect() hook do?

    This hook lets you perform side effects in function components, AFTER the component is rendered.

52. What is a side-effect in React?

    These are events/actions like data fetching, changing DOM elements in response to events.

53. Where do side effects usually get defined or run?

    These events/actions are usually run/written in lifecycle methods like comopnentDidMount, componentDidUpdate, and componentWillUnmount.

54. What are two kinds of side-effects in React?

    The two kinds of this are: Requires cleanup Doesn't require cleanup

55. When does react effect cleanup run?

    This runs after every render.

56. What are the two hook rules to follow?

    These two are: Don’t call this inside loops, conditions, or nested functions. Only call this from React functions, not any other.