React Flashcards
What is React?
a FrameWork and not just a library.
framework = kind of library, define bunch of functions, but never call it. framework is in charge of when to call the function.
library.
open-source front-end “JavaScript library for building user interfaces” based on UI components.
What is a React element?
A React Element is what gets returned from components. A plain object describing what you want to appear on the screen in terms of the DOM nodes or other components
an Object, with custom properties on it. has $$typeof, key, props:{children}, ref, type, owner. react element is NOT a DOM element. it only describe the DOM element. real DOM elements are more complex than react elements (which is more simpler)
How do you mount a React element to the DOM?
createElement, and querySelect the ROOT real element, and mount the DOM to render() method.
What is JSX?
JavaScript XML, a syntax extension to JavaScript. allows us to write HTML in React, easier to write and add HTML in React, creates an element to be used in JS
JS syntax extension to write JS. JavaScript plus.
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)
babel converts it to javascript, the react object needs to be there to convert to React.createElement.
How can you make Webpack and Babel work together to convert JSX into valid JavaScript?
to have a rule for all files with jsx, will load with “babel-loader”, within the webpack.config.js
What is a React component?
Components (function or class) let you split the UI into independent, reusable pieces, and think about each piece in isolation.
Conceptually, components are like JavaScript functions.
How do you define a function component in React?
// name of the component needs to be CAPITALIZED since babel will translate
function ComponentName() {
return react element (type) = has to return react element
}
How do you mount a component to the DOM?
get the container, and use the root and render.
root.render(< ComponentName />)
What are props in React?
Object.
properties, being used for passing data from one component to another. HTML attributes.
How do you pass props to a component?
pass as key, value pair that looks like HTML attribute.
text=”I” text=”know” text=”React!” color=”red
in the function
How do you write JavaScript expressions in JSX?
by surrounding the expressions in a curly braces
wrap it in curly braces
How do you create “class” component in React?
class ComponentName extends React.Component {
render() {
return “reactElement” {this.props.”propertyKey”}
“reactElement”
}
}
{ JS expression syntax }
How do you access props in a class component?
by using this.props.”propertyKey”
What is the purpose of state in React?
built-in React that is used to contain data or information about the component. A component’s state can change over time; whenever it changes, the component re-renders
