React Flashcards
What is a webpack?
webpack, at its core, is a code bundler. It takes your code, transforms and bundles it, then returns a brand new version of your code.
What are the three main steps a webpack needs to do?
1) webpack needs to know the starting point of your application, or your root JavaScript file.
2) webpack needs to know which transformations to make on your code.
3) webpack needs to know to which location it should save the new transformed code.
What are the three different parts of a Component?
- states (data, arrays, etc.)
- lifecycle methods (life cycle events: allows you to hook into different lifecycle events)
- UI
How do you specify what the UI of a component will look like?
Use the render() method
How do you call the react render?
ReactDOM.render()
What are the two arguments that ReactDOM.render() take?
The first is a react element, the second is where we want to render the react element in the DOM.
What is the syntax for using a component?
, where App is the name of the component.
What does webpack do?
Webpack bundles all of our modules together.
What does babel do?
Babel compiles JSX code into normal JavaScript so that the browser can understand it.
What does –save-dev do?
Saves the packages required to build your app to the json.package devdependicies object. DevDevependencies are all the packages your app needs to build. While DevDependencies are all the packages your app needs to run.
What does webpack-dev-server –open do?
Webpack-dev-server bundles your code into a local cache so it loads faster, and opens it on whichever localhost it is hosted on. This is faster than without because you would have to compile it to a dist folder. This is great for development because it is faster.
What is a react element?
React element describes what you want to see on the screen. Not so simply put, a React element is an object representation of a DOM node
What is the render component syntax?
ReactDOM.render(< Hello />, document.getElementById(‘app’))
What are props?
for passing data from one component to another child component and that system is through props. props are to components what arguments are to functions.
When making a list what do you need to include so React can efficiently know which items are removed or added?
A key. The syntax is:
arr.map(function(name) {
return <li> {name.name} </li>;
})}
What are PropTypes?
PropTypes allow you to declare the “type” (string, number, function, etc) of each prop being passed to a component. Then, if a prop passed in isn’t of the declared type, you’ll get a warning in the console.
How can you tell what ‘this.’ is referencing?
Look at where the function is invoked, and what is the function being called on. What the function being called on (aka “to the left of the dot”, e.g: steve.sayName()) is what this is referencing.
What does call do?
Every function has a call property which can be used to invoke the function on the argument. Any “this” used in the function will refer to the argument in the function call.
E.g. sayName.call(stacey); this invokes the sayName function on the stacey object.
You can supply additional arguments for parameters as the function after stacey
what does apply do?
Apply is the same as call. It invokes a function on an object, and also parses out the additional arguments for parameters for the function from the data structure you give it.
E.g.
sayName.apply(stacey, languages);
where stacey is the object sayName is being invoked on, and languages is an array data structure which will be parsed out for the parameters on sayName
what does bind do?
It returns a function based on the arguments that you provide. This explicitly defines this
What is the benefit of an arrow function over a function declaration?
In an arrow function “this” refers to the context being invoked on. Whereas, function “this” refer to its internal context, unless you pass a ‘this’ as a second argument when mapping
