React Flashcards
What is React?
React is a JS library used for building interactive user interfaces and web applications quickly and efficiently with significantly less code than you would with vanilla JavaScript.
React’s primary role in an application is to handle the view layer of that application just like the V in a model-view-controller (MVC) pattern by providing the best and most efficient rendering execution. Rather than dealing with the whole user interface as a single unit, React.js encourages developers to separate these complex UIs into individual reusable components that form the building blocks of the whole UI. In doing so, the ReactJS framework combines the speed and efficiency of JavaScript with a more efficient method of manipulating the DOM to render web pages faster and create highly dynamic and responsive web applications.
What is JSX?
JSX means JavaScript XML. it is an XML/HTML extension to JS, it has an HTML-like syntax that also comes equipped with the full power of ES6. Just like HTML, JSX tags can have tag names, attributes, and children. If an attribute is wrapped in curly braces, the value is a JavaScript expression.
What is Babel?
Babel is a JavaScript compiler that can translate markup and programming languages to JS. React uses Babel to convert JSX into JS.
What is State in React?
Each and every react component has a built-in state object.
The state object is where you store property values that belong to the component.
When the state object changes, the component re-renders.
What is a hook?
In react, we have stateful components and stateless components. Stateful components are those that declare and manage the local state in it and stateless components are pure functions that don’t have a local state or side effects to manage. With React Hooks, we can isolate stateful logic and side effects from a functional component. Hooks are JavaScript functions that manage the state’s behavior and side effects by isolating them from a component.
In which direction does data flow in React?
In React, data flow unidirectionally, which means that data only flows one way, from parent components to child components. this data is called props. In essence, this means child components are not able to update the data that is coming from the parent component. In React, data coming from a parent is called props.
What are props in React?
Props are arguments passed into React components via HTML attributes. they are used to store data that can be accessed by the children of a React component.
What is the main difference between state and props?
props (short for “properties”) and state are both plain JavaScript objects. While both hold information that influences the output of render, they are different in one important way: 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 3 ways events in React are handled differently from regular HTML?
- Event attributes are in camelCase
- Use event.preventDefault() to prevent default behavior
- Functions are invoked without need for ()
E.g. <button onClick={submitForm}>Submit</button>
What are the three phases in the lifecycle of a component?
- Mounting: adding elements into the DOM.
- Updating: when a component’s state or props is changed.
- Unmounting: component is removed from the DOM.
what are higher-order components in React?
A higher-order component (HOC) is an advanced technique in React for reusing component logic. HOCs are not part of the React API, per se. They are a pattern that emerges from React’s compositional nature.
Concretely, a higher-order component is a function that takes a component and returns a new component.
What are props.children?
props.children is a special prop, automatically passed to every component, that can be used to render the content included between the opening and closing tags when invoking a component. These kinds of components are identified by the official documentation as “boxes”.
What is React Fragment?
React Fragment is a feature in React that allows you to return multiple elements from a React component by allowing you to group a list of children without adding extra nodes to the DOM.
