react Flashcards
What is React?
React is a free and open-source front-end JavaScript library for building user interfaces or UI components.
What is a React element?
Elements are the smallest building blocks of React apps. An element specifies what should be there in our UI. An Element is a plain object describing what we want to appear in terms of the DOM nodes.
How do you mount a React element to the DOM?
by using ReactDOM.render(element, container)
What is Babel?
Babel is a toolchain that translates ES6 code into ES5.
What is a Plug-in?
Plug-in is 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.
How can you make Babel and Webpack work together?
By using Babel Loader. (web pack bundles files together and babel is a tool that makes code able to be parsed by most browsers.) Webpack loader will run code through babel before files are bundled into one.
What is JSX?
JSX is an extension to the JavaScript language syntax which provides a way to structure component rendering using syntax familiar to many developers.
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?
By using plugin’@babel/plugin-transform-react-jsx’ on webpack.config.js.
first determines the file hierarchy for the project and generates a dependency graph. From the dependency graph it compiles the code to a single source, using Babel to translate and remove the import and export statements, and convert JSX into standard JavaScript.
What is a React component?
Components let you split the UI into independent, reusable pieces. Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called “props”) and return React elements describing what should appear on the screen.
How do you define a function component in React?
write JavaScript function and pass in single argument “props” (which is an object) and return react element. function components must start with capital letter.
What are props in React?
Props are arguments passed into React components.
Props are passed to components via HTML attributes.
How do you pass props to a component?
Props are also how you pass data from one component to another, as parameters.
How do you pass props to a component?
We pass them as attributes to components.
How do you create “class” component in React?
When creating a React component, the component’s name MUST start with an upper case letter. A class component must include the extends React.Component statement. This statement creates an inheritance to React.Component, and gives your component access to React.Component’s functions.The component also requires a render() method, this method returns HTML.
class Car extends React.Component {
render() {
return <h2>Hi, I am a Car!</h2>;
}
}
How do you access props in a class component?
By using the ‘this’ keyword.
How do you access props in a class component?
By using the ‘this’ keyword. for example: this.props.text
What is the purpose of state in React?
State is a plain JavaScript object used by React to represent an information about the component’s current situation. giving us control over the element.
How do you pass an event handler to a React element?
pass in name of function as the event handler
What are controlled components?
A controlled component is a component that renders form elements and controls them by keeping the form data in the component’s state.
What two props must you pass to an input for it to be “controlled”?
value and onChange (props or attributes)
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?
elements inside the map() call need keys
What does express.static() return?
finds and returns static files requested. (static() returns a function)
What is the local __dirname variable in a Node.js module?
__dirname is an environment variable that tells you the absolute path of the directory containing the currently executing file.
What does the join() method of Node’s path module do?
The path. join() method joins all given path segments together using the platform-specific separator as a delimiter, then normalizes the resulting path.
What does fetch() return?
The fetch() method in JavaScript is used to request to the server and load the information in the webpages. The request can be of any APIs that returns the data of the format JSON or XML. This method returns a promise that resolves to response object.
What is the default request method used by fetch()?
Without options Fetch will always act as a get request.
How do you specify the request method (GET, POST, etc.) when calling fetch?
pass in config object as second parameter and specify which method will be used in uppercase letters.
fetch(‘https://jsonplaceholder.typicode.com/users’, {
method: ‘POST’
})
When does React call a component’s componentDidMount method?
componentDidMount() is invoked immediately after a component is mounted (inserted into the tree). Initialization that requires DOM nodes should go here. If you need to load data from a remote endpoint, this is a good place to instantiate the network request.
How do you pass data to a child component?
In the parent component, create a callback function. This callback function will retrieve the data from the child component. Pass the callback function to the child as a props from the parent component. The child component calls the parent callback function using props and passes the data to the parent component
How do you pass data to a child component?
We use props. In the parent component, create a callback function. This callback function will retrieve the data from the child component. Pass the callback function to the child as a props from the parent component. The child component calls the parent callback function using props and passes the data to the parent component
