react Flashcards
What is React?
React is a free and open-source front-end JavaScript library for building user interfaces or UI components.
What is a React element?
Elements are the smallest building blocks of React apps. An element specifies what should be there in our UI. An Element is a plain object describing what we want to appear in terms of the DOM nodes.
How do you mount a React element to the DOM?
by using ReactDOM.render(element, container)
What is Babel?
Babel is a toolchain that translates ES6 code into ES5.
What is a Plug-in?
Plug-in is a software component that adds a specific feature to an existing computer program.
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.
How can you make Babel and Webpack work together?
By using Babel Loader. (web pack bundles files together and babel is a tool that makes code able to be parsed by most browsers.) Webpack loader will run code through babel before files are bundled into one.
What is JSX?
JSX is an extension to the JavaScript language syntax which provides a way to structure component rendering using syntax familiar to many developers.
Why must the React object be imported when authoring JSX in a module?
Since JSX compiles into calls to React.createElement, the React library must also always be in scope from your JSX code.
How can you make Webpack and Babel work together to convert JSX into valid JavaScript?
By using plugin’@babel/plugin-transform-react-jsx’ on webpack.config.js.
first determines the file hierarchy for the project and generates a dependency graph. From the dependency graph it compiles the code to a single source, using Babel to translate and remove the import and export statements, and convert JSX into standard JavaScript.
What is a React component?
Components let you split the UI into independent, reusable pieces. Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called “props”) and return React elements describing what should appear on the screen.
How do you define a function component in React?
write JavaScript function and pass in single argument “props” (which is an object) and return react element. function components must start with capital letter.
What are props in React?
Props are arguments passed into React components.
Props are passed to components via HTML attributes.
How do you pass props to a component?
Props are also how you pass data from one component to another, as parameters.
How do you pass props to a component?
We pass them as attributes to components.
How do you create “class” component in React?
When creating a React component, the component’s name MUST start with an upper case letter. A class component must include the extends React.Component statement. This statement creates an inheritance to React.Component, and gives your component access to React.Component’s functions.The component also requires a render() method, this method returns HTML.
class Car extends React.Component {
render() {
return <h2>Hi, I am a Car!</h2>;
}
}
How do you access props in a class component?
By using the ‘this’ keyword.
How do you access props in a class component?
By using the ‘this’ keyword. for example: this.props.text
What is the purpose of state in React?
State is a plain JavaScript object used by React to represent an information about the component’s current situation. giving us control over the element.
How do you pass an event handler to a React element?
pass in name of function as the event handler
What are controlled components?
A controlled component is a component that renders form elements and controls them by keeping the form data in the component’s state.
What two props must you pass to an input for it to be “controlled”?
value and onChange (props or attributes)
What Array method is commonly used to create a list of React elements?
map
What is the best value to use as a “key” prop when rendering lists?
elements inside the map() call need keys
