React

How can you make Webpack and Babel work together to convert JSX into valid JavaScript?

@babel/plugin-transform-react-jsx

Why must the React object be imported when authoring JSX in a module?

Babel compiles JSX down to React.createElement() calls.

What is Babel?

Babel is a JavaScript compiler Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments.

What is a React component?

Components let you split the UI into independent, reusable pieces, and think about each piece in isolation. Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called "props") and return React elements describing what should appear on the screen.

What is a Plug-in?

In computing, a plug-in (or plugin, add-in, addin, add-on, or addon) is a software component that adds a specific feature to an existing computer program. When a program supports plug-ins, it enables customization. Applications support plug-ins for many reasons. Some of the main reasons include: to enable third-party developers to create abilities which extend an application to support easily adding new features to reduce the size of an application to separate source code from an application because of incompatible software licenses.

How do you define a function component in React?

JS function or ES6 class -returns a React element

What is JSX?

JSX is an XML/HTML-like syntax used by React that extends ECMAScript so that XML/HTML-like text can co-exist with JavaScript/React code. The syntax is intended to be used by preprocessors (i.e., transpilers like Babel) to transform HTML-like text found in JavaScript files into standard JavaScript objects that a JavaScript engine will parse.

What is a Webpack loader?

Loaders are transformations that are applied to the source code of a module. They allow you to pre-process files as you import or "load" them. Thus, loaders are kind of like "tasks" in other build tools and provide a powerful way to handle front-end build steps. Loaders can transform files from a different language (like TypeScript) to JavaScript or load inline images as data URLs. Loaders even allow you to do things like import CSS files directly from your JavaScript modules!

What is React?

React is an open-source JavaScript library created by Facebook for building complex, interactive UIs in web and mobile applications. The key point in this answer is that React's core purpose is to build UI components;

How do you mount a component to the DOM?

ReactDOM.render

How do you mount a React element to the DOM?

ReactDOM.render()

What is the best value to use as a "key" prop when rendering lists?

The best way to pick a key is to use a string that uniquely identifies a list item among its siblings. Most often you would use IDs from your data as keys:

How do you create "class" component in React?

To define a React component class, you need to extend React.Component and have at least render()

How do you write JavaScript expressions in JSX?

You can put any valid JavaScript expression inside the curly braces in JSX. For example, 2 + 2, user.firstName, or formatName(user) are all valid JavaScript expressions. You can pass any JavaScript expression as a prop, by surrounding it with {}

What are controlled components and how do you work with them?

a form that is rendered and controlled by React In HTML, form elements such as input, textarea and select typically maintain their own state and update it based on user input. In React, mutable state is typically kept in the state property of components, and only updated with setState(). We can combine the two by making the React state be the "single source of truth". Then the React component that renders a form also controls what happens in that form on subsequent user input. An input form element whose value is controlled by React in this way is called a "controlled component".

What Array method is commonly used to create a list of React elements?

array.map

How can you make Babel and Webpack work together?

installing babel-loader

What is a React element?

it is an object An element is a plain object describing a component instance or DOM node and its desired properties. It contains only information about the component type (for example, a Button), its properties (for example, its color), and any child elements inside it.

What are props in React?

props are objects React Props (short for properties) are like function arguments in JavaScript and attributes in HTML... pass props as an argument to function component

What is the purpose of state in React?

setState() schedules an update to a component's state object. When state changes, the component responds by re-rendering.

What is super in the class constructor?

super is the constructor of the class you are extending

How do you access props in a class component?

this.props contains the props that were defined by the caller of this component

How do you pass props to a component?

<reactElement key = "value">