Default Flashcards
What are React Components?
Components in React have two jobs:
1) Return JSX, which tells react what we want to show on the screen to the user
2) Handle user events
All Components that we create in react are going to be functions that return JSX.
What is JSX?
JSX is a syntax extension to JavaScript. We can think of it as a set of instructions to tell react exactly what content we want to show on the screen at any given time.
JSX follows many similar rules to HTML. With JSX Elements we:
1) Tell React to create a normal HTML element
2) Tell react to show another component
What is the difference between React and ReactDOM?
When we work with React, we actually work with two different libraries - React and ReactDOM.
React - knows how get different components work together. How call a component function, how to get back JSX and how to iterate over JSX elements and decide whether to create some kind of html element or call other component function.
It’s referred as a ‘reconciler’
ReactDom - kwnows how to take instructions on what we want to show and turn it into HTML. Takes all the JSX, turns it into HTML and shows it to the user.
It’s called a ‘renderer’
What are the three tenets of React ecosystem
1) Component Nesting (a component can be shown inside of another
2) Component reusablility (we wnat to make components that can be easily reused through our application)
3) Component Configuration (we should be able to configure a component when it is created)
How do you nest components in our react App()
- We need to make the component available for import to outside files - we need to export the Component
const CommentDetail = () => {
return <div> Some JSX </div>
}
export default CommentDetail
- We need to import the component using ES5 module system. And provide a relative path to the file
import CommentDetail from ‘./CommentDetail’
- In order to render it inside of our app, we need to nest it in the App, like so:
const App = () => {
return (
<div>
</div> ); };
How can you work with React’s Props System?
Props system in react is a system for passing data from a parent component to a child component.
The goal of the system is to communicate data from parent to a child (customization and configuration of a child).
- You can provide props from parent to child by adding a property just as any other attribute, that we add in JSX.
This property is unique and passed only to that instance of the component that we are creating.
- In order to consume the information that we attach in the prop, we need to use it in the Component. By convention we add props variable as an argument of the component function.
And then refer to them with normal object properties
props.author
- We can also pass another components as props. In that case, they will be available under props.children
We are not limited to just react components, we can pass plain text as well as just JSX
What is the difference between Class Components and Function Components in React?
Class components:
- use Lifesycle method system to run code at specific points of time.
- Can use the ‘state’ system to update content on the screen
Functional Components (Stateless functional components)
- Can use Hooks to run code at specific points in time.
- Can use Hooks to access state system and update content on screen
How can you setup a Class Component in React?
1) It must be a JavaScript Class
2) Must extend (subclass) React.Component
3) Must define a ‘render’ method that returns some amount of JSX
What are the rules of the State system in React?
1) Only usable with class components (technically can be used with functional components using ‘hooks’ system’)
2) ‘State’ is a JS object that contains data relevant to a component
3) Updating ‘state’ on a component will cause our component to almost instantly rerender.
4) State must be initialized when a component is created
5) State can only be updated using ‘setState’ function!
How can you initialize React’s state object and then update it using setState?
In React’s Class Component, we need to call the constructor method with argument super.
constructor(props){
super(props);
// we need to initialize the state that we want to use, this is the only time we assign this.state directly
this.state = {lat: null}
}
// alternatively we can initialize the state by setting
class App extends React.Component {
state = { lat: 40, errorMessage: '' };
}
which, when ran by babel will in turn compile it into a constructor function
// then we need to always use this.setState function
this.setState({lat: position.coords.latitude});
How can you set up conditional rendering in React’s Class Component?
In order to conditionally render content in React, one needs to set up if statements in the render() function and return JSX, like:
if (something){
return <div>Error: </div>
}
if (somethingElse){
return <div>Something else: </div>
}
return <div>Loading…</div>
We can also make use of ternary operators and short-circuit evaluation
{name=’Maciej’ ? ‘Witaj Macieju’ : ‘Witaj wędrowcze’}
{isError && <h1>Error…</h1>}
What methods does Component’s Lifecycle consist of?
| constructor (good place to do one-time setup) | render (avoid doing anything besides returning JSX) // content visible on the screen | componentDidMount (Good place to do data-loading - the best practice, to load data is inside of this method instead of constructor function) // Sit and wait for updates... | componentDidUpdate (Good place to do more data-loading when state/props change) // Sit and wait until this component is no longer shown | componentWillUnmount (good place to do cleanup (especially for non-React stuff))
How can you apply Default Props to a Component?
In order to add default props to a component we need to assign them on the object
nameOfComponent.defaultProps = {}
like:
Spinner.defaultProps = {
message: ‘Loading’
};
It is advisable to setup defaultProps every time we want to create a very reusable component, so when we create it in different places of our app, we do not need to always pass a prop to display some content.
What are the benefits of Class based Components?
1) Can use ‘state’ (another React System) -> Easier to handle user input
2) Understands lifecycle events -> Easier to do things when the app first starts
3) Easier code organization
What is the difference between state and props in React?
- “props” (short for “properties”) is an object of arbitrary inputs a React function component accepts as the first argument.
- “state” is data that changes over the lifetime of a specific instance of a React component.
What is the naming convention that we should use when creating event handlers inside of our components?
onInputChange
So, we pass on, then the name of the element and then the event that triggers the element.
Another popular community convention is to assign name like: handleInputChange
Why making controlled elements in React World is so important?
If we do not set up the state of the element and store it in our React component, then HTML is the ONLY source of the data. Meaning, that if we want to get the value of let say an input, we need to each time reach into the input.value to see what’s there.
We are better off if we store the value on the state of the component
state = {term: ‘’}
this.setState({ term: e.target.value })}/>
// go look at the state to get current value
Then, every time the component is rerendered (and it is rerendered every time we use setState function), the value of the input checks what’s the value of the state.term
Making React Component being the source of truth for the data -> and we have much more control over that.
