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 }
);
}
}
How do you access props in a class component?
this.props.text etc
what is the purpose of state in react
the purpose of state is to keep track of values that change over time.
how do you pass an event handler to a react element
the prop with an assignment operator and curl braces with the this.method
if you do not see the call site of this you can not be sure of the value of this
// bind guarantees the value of this when the function or method is called
// bind returns a copy of a function with a permanent this.
referring to the bind in the constructor
undefined instead of window in es6 methods
react order
1.react deletes everything from the container dom element and owns it thereafter.
2. react looks at your react element and decides what to do.
-if the react element is an html type button, div , h1 -> dom creation
-if the react element is a function component type(call it and use the elements)
-if the react element is a class component type -> new ( and call render)
// third option - class
// immediately calls the render method of the new object
{
type:”button”,
props: {
onclick;fn,
children; “click me!”
}
}
react does dom creation make the real dom match the above object and also adds the event listener for click
when our click listener runs, it calls setstate
this starts a transition from the current state to the next state.
by replacing the old properties in this state
a re-render is scheduled with the new state
react receives a new react element from the render method
{
type: button,
props: {
children: thanks!
}
}
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:
What Array method is commonly used to create a list of React elements?
map method
What are controlled components?
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”.
value is kept in a component state, listen for changes and update the state
What two props must you pass to an input for it to be “controlled”?
value and onChange
