React Flashcards
What is React?
a javascript library for building user interfaces
helps you build fast and interactive UIs
it allows you to change data without reloading the page
allows you to build components and reuse them
What is a React element?
what gets returned from components
its an object that virtually describes the DOM nodes
that a component represents (or an object that describes an html element)
How do you mount a React element to the DOM?
by using ReactDOM.render() method
What is Babel?
a tool to convert ES2015+ code into a backwards compatible version of JS that can be run by older JS engines
What is a Plug-in?
a software component that adds on a specific feature to a program
when a program supports plugins, it enables customization
What is a Webpack loader?
they allow you to pre-process files as you import or “load” them
they can transform files from a different language (like TypeScript) to JavaScript
or load inline images as data URLs
or import CSS files directly from your JS modules
its recommended that you specify the them in your webpack.config.js file (by using module.rules)
or another way is inline which is specify them explicitly in each import statement
How can you make Babel and Webpack work together?
by installing babel-loader
What is JSX?
a syntax extension to JavaScript
when used in React, it describes what the UI should look like
it produces React “elements”
Why must the React object be imported when authoring JSX in a module?
because React must be in scope from your JSX code even though its not directly referenced
once we convert jsx into js, you’ll see that React.createElement is being used
How can you make Webpack and Babel work together to convert JSX into valid JavaScript?
by installing babel-loader and its plugin:
babel-loader
@babel/core
@babel/plugin-transform-react-jsx
What is a React component?
it lets you split the UI into independent, reusable pieces and think about each piece in isolation
components are like JS functions thats why we call components “Function Component”
they accept arbitrary inputs (called props) and return React elements describing what should appear on the screen
React component accepts a single “props” (stands for properties) object argument with data and returns a React element
How do you define a function component in React?
function keyword function name (HAS TO start with a capital letter or else the function gets passed as a string) props passed in () returns jsx
How do you mount a component to the DOM?
by calling the component function in between open and closed angle brackets
What are props in React?
props is a keyword in React that is used for passing data from one component to another
props is an object
you can pass any JS expression as a prop by surrounding it with { }
How do you pass props to a component?
in a (function) component, you can pass the props object into your function by specifying it in the () of the function component
to pass props, you want to assign value to props
How do you write JavaScript expressions in JSX?
we can put any valid JS expression inside curly braces in JSX
if you pass no value for a prop, it defaults to “true”
How do you create “class” component in React?
- by using the class keyword
- name of class for ex Welcome
extends keyword - and extending to React.Component (Welcome would be a sub class of React.Component)
- must define render() inside curly braces
How do you access props in a class component?
this.props
What is the purpose of state in React?
State is similar to props, but it is private and fully controlled by the component
The only place where you can assign this.state is the constructor
to modify state, use setState()
// Wrong this.state.comment = 'Hello';
// Correct
this.setState({comment: 'Hello'});
state keeps track of something
state is for keeping tracking of values that change over time
How to you pass an event handler to a React element?
by calling onClick props and passing in javascript function
what does bind do?
this.handClick is binding this constructor function and assigning it to the this.handleclick of the constructor function
we want the handClick value when
What Array method is commonly used to create a list of React elements?
map method
What is the best value to use as a “key” prop when rendering lists?
the data’s (an array) id or unique value of the data, so react can distinct each array value
needs to be unique amongst its sibling (an array)
What are controlled components?
a component that takes its current value through props and notifies changes through callbacks like onChange or onSubmit
What two props must you pass to an input for it to be “controlled”?
onChange and Value
What does fetch() return?
a Promise containing the response / Response object of the path in your fetch argument
What is the default request method used by fetch()?
GET method
How do you specify the request method (GET, POST, etc.) when calling fetch?
by declaring the request method as an object in the second argument of the Fetch method
✧ What is the json() method?
takes a Response and reads it to completion
returns a promise which resolves with a JS object that is the result of parsing the body text as JSON
NOTE: despite the method being named json(), the result is not JSON but is instead the result of taking JSON as input and parsing it to produce a JAVASCRIPT OBJECT
When does React call a component’s componentDidMount method?
its invoked immediately after a component is mounted (inserted into the tree)
componentDidMount runs once
a good place to initiate API calls, if you need to load data from a remote endpoint
Name three React.Component lifecycle methods.
render() - only required method within a class component
constructor()
componentDidMount()
componentDidUpdate()
componentWillUnmount()
How do you pass data to a child component?
by passing props
and if the props is in another component, pass this.props
What does express.static() return?
returns a function that is a middleware function, a function to pass to app.use as a middleware function
What is the local __dirname variable in a Node.js module?
directory name of the currently module
aka the full absolute path to that file/module
What does the join() method of Node’s path module do?
joins the path specified in the method’s arguments into a string of a file path
✧ what is express.static
it exposes a directory or a file to a particular URL so it’s contents can be publicly accessed
opens express file over server in default browser
(need more info)
What is registration?
the process of “signing up”
What is authentication?
the process of “logging in”
In digital systems, authentication is the process of accepting secrets, or “credentials”, from a client and checking them against a stored version of the credentials
What is authorization?
is how digital systems decide what data or functionality is available to their users
