React/Webpack Flashcards
What is React?
A javascript library for building interfaces
What is a React element?
An HTML element created using React syntax, and the smallest building block of a React app
How do you mount a React element to the DOM?
ReactDOM.render() method
What is Babel?
A JS compiler that comverts ES code into a backwards compatible version of JS
What is a Webpack loader?
They preprocess files as they are imported, allowing for frontend build steps to be handled
How can you make Babel and Webpack work together?
by installing the babel loader as a dev dependency when using Webpack
What is JSX?
A syntax extension that allows you to create React elements using HTML-like markup
Why must the React object be imported when authoring JSX in a module?
JSX creates React elements, which require React in order to be built
How can you make Webpack and Babel work together to convert JSX into valid JavaScript?
You install the transform-react-jsx npm plugin as a dev dependency along with the babel loader and webpack
What is a React component?
A function that accepts inputs called props and returns a React element
How do you define a function component in React?
using normal function definitions or es6 classes
How do you mount a component to the DOM?
use ReactDOM.render(), with function name and root css selector as parameters
What are props in React?
Properties that can be passed into a component
How do you pass props to a component?
Enclose the prop value in curly brackets and assign it to a property on the prop object of the component
How do you write JavaScript expressions in JSX?
Enclose the expression in curly braces
How do you create “class” component in React?
- Use the class keyword, followed by function name, followed by extends keyword then React.Component
- Next line: render()
- Next line: return keyword, react element type, js expression with this. included
How do you access props in a class component?
this.props.nameOfValue
What is the purpose of state in React?
Allows you to store variables in a React component
Useful for values that can change over time or need to be updated
How do you pass an event handler to a React element?
bind the event to this in the class constructor function
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?
\A string that uniquely identifies a list item among its siblings, such as an id
What are controlled components?
An input form element that is controlled by react in that it renders a form and also controls what happens in that form
What two props must you pass to an input for it to be “controlled”?
onChange and value
When does React call a component’s componentDidMount method?
once the component is rendered
Name three React.Component lifecycle methods.
componentDidMount, componentDidUpdate, componentWillUnmount
How do you pass data to a child component?
assigning that data to props and passing the props to the child component
What is Webpack?
Webpack is a tool that lets you bundle javascript applications together
How do you add a devDependency to a package?
Use the –save-dev keyword when installing the npm package
What is an NPM script?
A piece of code that executes a task when run using node and is located in the package json file under scripts
How do you execute Webpack with npm run?
Npm run then the name of the script
What kind of modules can Webpack support?
o ES, CommonJS, AMD, Assets, webAssembly
