React Flashcards
What is Array.prototype.filter useful for?
It “filters” out the elements you don’t want and returns a new array of the elements you do want
It passes a function as the second argument to filter it out
What is Array.prototype.map useful for?
It applies some kind of function to every element in the array and returns a NEW array with those values
What is Array.prototype.reduce useful for?
It’s helpful for getting 1 result from all the elements of 1 array
The result, however, will move from ([0], [1]) the result of which is then used for the next function with the next one in line, [2], and then that result for the next one [3], and so on and so forth
What is Webpack?
Starts from multiple modules and packages and the end results is fewer files, common case is to make 1 bundle/file
Let’s us write modules but also support any module format and handle resources and assets at the same time
It’s a tool that lets you bundle your JS applications (supporting ESM and CommonJS) and it can be extended to support many different assets like images, fonts and stylesheets
How do you add a devDependency to a package?
Npm install [name like webpack or webpack-cli, or both] –save-dev
What is an NPM script?
Command line command with a nickname
The “scripts” property in the package.json file supports a number of built-in scripts and their preset life cycle events
How do you execute Webpack with npm run?
Add the nickname to the script property with whatever command we want then we command like so
Npm run [name like build]
What is React?
A JavaScript library for building user interfaces
It’s a package from npm
What is a React element?
It’s an object
React.createElement( ‘dom element in string’, [props, if nothing null], [children] )
How do you mount a React element to the DOM?
Create the html element where you want the object placed
Then const root = create a ReactDom.createRoot()
Then render method on that root var
What is Babel?
It’s a toolchain mainly used to convert ECMAScript 2015+ code into backwards compatible version of JavaScript in current and older browsers or environments, or back-covert JSX
What is a Plug-in?
This is a software component that adds a specific feature to an existing computer program. When a program supports plug-ins, it enables customization
What is a Webpack loader?
They 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, they’re kind of like “tasks” and provide a powerful way to handle front-end build steps
Can transform files from different language like TypeScript to JavaScript or load inline images as data URLs.
How can you make Babel and Webpack work together?
You have to install babel-loader as a devDependency
Npm install babel-loader
What is JSX?
It’s a syntax extension to JavaScript
JavaScript plus more stuff (additional syntax), no HTML
Recommended to use with React to describe what the UI should look like, looking like template language but with the power of JavaScript
Why must the React object be imported when authoring JSX in a module?
It actually creates an element, we just don’t see it with the JSX syntax
With JSX syntax it looks like
const element = <h1>Hello, JSX!</h1>;
But if you break it down, it looks like
Const element = React.createElement(‘ht’, null, “hello, JSX!’);
JSX creates a react element, which needs to be able to call on the React object, which has to be imported
How can you make Webpack and Babel work together to convert JSX into valid JavaScript?
@babel/plugin-transform-react-jsx in devDependencies helps convert JSX into JavaScript
Webpack default behavior compiles everything and makes a module
Babel default behavior does nothing.
We have to tell babel exactly what to do with the transform-react-jsx plug-in
What is a React component?
They’re reusable JavaScript functions or class that return React elements that represents a piece of the user interface They accept arbitrary inputs (properties) and then return React elements that describe what should appear on the screen
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
How do you define a function component in React?
It can be arrow function or just function keyword, the first letter must be an uppercase letter and it needs to return a react element
function CustomButton() {
return <button>Click Me!</button>;
}
How do you mount a component to the DOM?
You first document query select to where you want the element to show up
Then createRoot on ReactDOM with create the DOM element on that element you selected
Create a variable(element) and assign it the react element with the actual name of the function used to create the DOM element
Render the above element on the root variable first selected via querySelector ** the React element must be the argument for the render method on root
const container = document.querySelector(‘#root’);
const root = ReactDOM.createRoot(container);
const element = <CustomButton></CustomButton>;
root.render(element);
What are props in React?
Props is an object
It can be used as properties/attributes
It is also used as the argument passed in a function to create customized attributes of a React element
How do you pass props to a component?
You write props as the parameter in the function definition and then use props.[contentVariableName] the dot notation on props so that you can reference what to pass through this function. This is defined in a different variable
propName = value OR propName = { }
function CustomButton(props) {
return (
<button>{props.text}</button>
);
}
How do you write JavaScript expressions in JSX?
Anything within curly braces can be a JavaScript expression in JSX
Variables
Actual math equations
How do you create “class” component in React?
You must extend from React.Component and then call the render() method and return the React element
class CustomButton extends React.Component {
render() {
return <button>{this.props.text}</button>;
}
}
How do you access props in a class component?
You define it in the React element with the this object
return <button>{this.props.text}</button>;
What is the purpose of state in React?
It creates the base foundation of the default state of the React element that is used to compare for future changes
Data model of values that change over time
State is always what has happened, not what the user sees
I.e. The user clicks a button, that’s the action that happened. The text change is dependent on the user clicking the button
Always use facts to determine state
How do you pass an event handler to a React element?
Must bind() the method and value of this first
this.handleClick = this.handleClick.bind(this);
Then when you return the React element, you must pass the onClick property with the handleClick method to the element, like button)
<button onClick={this.handleClick}>Button Text Name</button>
You pass an event handler as a prop in the react element
What are controlled components?
An input form element whose value is controlled by React, where React renders a form and controls what happens in that form on subsequent user input
Input value is controlled by the component and the component controls what happens to the value(?)
What two props must you pass to an input for it to be “controlled”?
Value property and onChange property
<input value={this.state.value} onChange={this.handleChange} />
What Array method is commonly used to create a list of React elements?
Map method
What is the best value to use as a “key” prop when rendering lists?
String (special string attribute you need to include when creating list of elements), must be unique in its scope
