React Flashcards
What is a Webpack?
Module bundler (that bundles JavaScript files for usage in a browser)
How do you add a devDependenccy to a package?
npm install -D packagename
What is an NPM script?
A way to bundle common shell commands for a project
How do you execute Webpack with npm run?
npm run build
“build” is written in the “scripts” of the package.json file - it can be named something else too
How are ES modules different from CommonJS modules?
o ES modules import everything before the code is executed unlike CommonJS modules which load dependencies on demand while the code is getting executed
o Different syntax (CommonJS uses require and ES uses import)
o ES module syntax is part of the language but CommonJS modules need a loader (it’s not an official standard- instead it’s a community library)
What kind of modules can Webpack support?
o ECMAScript modules
o CommonJS modules
o AMD modules
o Web Assembly
What is React?
A JavaScript library for building UI
Actually a framework
What is a React element?
Plain object that describes what a DOM should look like
How do you mount a React element to the DOM?
ReactDOM.render(element, [container])
What is Babel?
JavaScript compiler used to convert latest ECMAScript code into a backwards compatible version of JS
What is a Webpack loader?
Tool that pre-processes a file before importing with plug-ins
(Tool that helps webpacks interpret and translate files in order to bundle static assets)
How can you make Babel and Webpack work together?
npm install babel-loader as a devDependency
What is a Plug-in?
A software component that adds a specific feature to an existing computer program
What is JSX?
o JavaScript XML
o Syntax extension to JavaScript
Why must the React object be imported when authoring JSX in a module?
Because it’s used in the final code of babel outputs (babel calls React.createElement in its output so ‘createElement’ would not work without the ‘React’ object)
How can you make Webpack and Babel work together to convert JSX into valid JavaScript?
- npm install @babel/plugin-transform-react-jsx
2. npm install babel-loader
What is a React component?
Function or a class that generates React elements
How do you define a function component in React?
By writing a JavaScript function (and the function name MUST start with a capital letter)
How do you mount a component to the DOM?
ReactDOM.render(ReactElementName, container)
What are props in React?
o Arguments passed into React components
o Properties of an object
How do you pass props to a component?
By giving it key:value pairs
How do you write JavaScript expressions in JSX?
By surrounding it with curly braces
How do you create “class” component in React?
class extends React.Component {
render () {
}
}How do you access props in a class component?
this.prop.keyName
What is the purpose of state in React?
To indicate a component’s current status
How do you pass an event handler to a React element?
As props to child components
What are controlled components?
An input form element whose value is controlled by React
What two props must you pass to an input for it to be “controlled?
- onChange
- value
When does React call a component’s componentDidMount method?
After the first successful render
Name three React.Component lifecycle methods.
o componentDidMount
o componentDidUpdate
o componentWillUnmount
and
o shouldComponentUpdate
How do you pass data to a child component?
Using props
