React Flashcards
What is Webpack?
It’s a tool that lets you bundle your JavaScript applications (supporting both ESM and CommonJS), and it can be extended to support many different assets such as images, fonts and stylesheets.
How do you add a devDependency to a package?
npm add –save-dev
What is an NPM script?
They are typically commands, or a string of commands, which would normally be entered at the command line in order to do something with your application. Scripts are stored in a project’s package.
How do you execute Webpack with npm run?
npm build
How are ES Modules different from CommonJS modules?
ES - direct support for asynchronous loading and configurable modeule loading
javascript
commonJS - designed for synchronous loading
nodeJS
What kind of modules can Webpack support?
ECMAScript
CommonJs
AMD modules
What is React?
A JavaScript library for building user interfaces
What is a React element?
an object
How do you mount a React element to the DOM?
root.render(element)
What is Babel?
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 Plug-in?
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?
babel-loader
What is JSX?
syntax extension to javascript
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?
transform react jsx plugin
What is a React component?
Components let you split the UI into independent, reusable pieces, and think about each piece in isolation.
How do you define a function component in React?
function keyword name, params return jsx
How do you mount a component to the DOM?
root.render
What are props in React?
objects
properties, passing data from one component to another
How do you pass props to a component?
you write ButtonClick type=”asfd” in angled brackets
How do you write JavaScript expressions in JSX?
surround it with curly braces
How do you create “class” component in React?
class Classname extends React.Component {
render()
}How do you access props in a class component?
with this
What is the purpose of state in React?
The state is a built-in React object that is used to contain data or information about the component
Keep track of values that change over time
How to you pass an event handler to a React element?
put it in when the react element is rendered
button onClick={this.handleClick}Click Me!/button;
What are controlled components?
An input form element whose value is controlled by React in this way is called a “controlled component”.
What two props must you pass to an input for it to be “controlled”?
value and onchange
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?
id (anything unique)
pokedex.map((pokemon, index) => function
