React Flashcards
What is Webpack?
Webpack is a tool that lets you compile JavaScript modules, also known as module bundler
How do you add a devDependency to a package?
npm install –save-dev name or npm i -D webpack webpackcli
What is an NPM script?
An npm script is a convenient way to bundle common shell commands for your project.
How do you execute Webpack with npm run?
npm run build
What is React?
A JavaScript library for building user interfaces
What is a React element?
A React Element is what gets returned from components. It’s an object that virtually describes the DOM nodes that a component represents. is an object that describes the dom element.
How do you mount a React element to the DOM?
root.render(element)
What is Babel?
Babel is a JavaScript compiler converts es6 to es5.
What is a Plug-in?
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.
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!
How can you make Babel and Webpack work together?
If Babel is a translator for JS, you can think of Webpack as a mega-multi-translator that works with all kinds of languages (or assets). For example, Webpack often runs Babel as one of its jobs.
with babel-loader through webpack.config.js and add the plug ins
babel core + webpack + babel loader + tell babel which plugs ins to use.
What is JSX?
a react extension Fundamentally, JSX just provides syntactic sugar for the React.createElement(component, props, …children) function.
Why must the React object be imported when authoring JSX in a module?
you are using react.createlement method when authoring jsx.
How can you make Webpack and Babel work together to convert JSX into valid JavaScript?
using the babel loader and the plugn in
What is a React component?
Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called “props”) and return React elements describing what should appear on the screen. this is useful so you can reuse it.
How do you define a function component in React?
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
How do you mount a component to the DOM?
const root = ReactDOM.createRoot(document.getElementById(‘root’));
const element = ;
root.render(element);
What are props in React?
“Props” is a special keyword in React, which stands for properties and is being used for passing data from one component to another.
How do you pass props to a component?
You can pass any JavaScript expression as a prop, by surrounding it with {}. For example, in this JSX:
How do you write JavaScript expressions in JSX?
{ }
What are props in React?
props is an object. if the react elements have prop values they will be key value pairs in the object.
How do you pass props to a component?
it looks like an html attribute, as key value pairs in your react element.
How do you write JavaScript expressions in JSX?
You can pass any JavaScript expression as a prop, by surrounding it with {}. For example, in this JSX:
How do you create “class” component in React?
class CustomButton extends React.Component {
render() {
return (
{ this.props.text }
);
}
}
