React
Where is the state object initialized?
State objects are initialized in the constructor.
What is the Render function?
The ReactDOM.render() function takes 2 arguments, the HTML code and a HTML element. This displays the html code in the element.
Why should you call super(props) in constructor? Should you?
The only reason to pass props to super is if you need to access this.props within the constructor method itself.
What is React State?
The state object is where you store property values that belong to the component.
What is asynchronous?
When something is going on and you don't want to wait until that thing is done to continue your program.
What are components in components?
When you place another component inside another component.
Can you change the state object?
Yes, by using the setState() method.
Can you use props in a constructor?
Yes. Only if the component has a constructor function. If you pass it to the construtor you should also pass thos values to the super class via the super jeyword.
Can a component have a constructor if so, can you explain the purpose for it?
Yes. The constructor gets called when the component gets initiated.
How can you refer to the state object that might reside anywhere in the component?
You can refer to the state object by doing this.state.propertyname
How to send props into a component?
You send it via HTML attributes.
What is children props?
const app = () => { return ( <Book title={"Example"}> <p> I'm a child prop </p> </Book> ); } const Book = ({title, children}) => { return ( <div> <h1>{title}</h1> {children} </div> ); } Notice in the app component you can have a p tag between the book component tags. Elements between components like this are known as children props. You can access them in the Book component by destucturing with the children name passed.
Think of an example of callback code and explain it
function getPostsFromServer(){ setTimeout(() => { let output = ''; posts.forEach((post,index) => { output += `<li>${post.title}</li>`) }); document.body.innerHTML = output; }, 5000); } getPostsFromServer(); After 5 seconds, the posts from the server will load and display as list elements. function createPost(post){ setTimeout(() => { posts.push(post)' }, 2000); } createPost()
What's the command to create a new React project?
npx create-react-app [Project Name]
Where are dependencies located?
package.json is where you list dependencies. Similar to maven pom.xml. While node_modules, is where the actual libraries are located.
What is the es7 snippet trick to quickly generate a react functional component template?
rfce
What method should you always use to make sure the component knows it's been updated and calls the render() method and all the other lifecycle methods?
setState()
Can you explain the function component?
A Functional component is a function that takes props and returns a react element using JSX. They do not have state, unless you are using React Hooks.
What is React?
A JavaScript library created by Facebook for building UI's through components.
Explain the class component.
A class component is a component that extends React.Component to give you access to the React Component functions. Class components require a render method which returns HTML.
What is a JSX Expression?
Any valid javascript expression where jsx will execute it and return the result. You can write JSX expressions inside curly braces.
How many properties can a state object contain?
As many as is needed.
Why should you learn ES6?
Because it features arrow functions, classes and React uses ES6
Can you explain components in files?
Components are usually made separately in files so that the code can be reusable. Each component must import React and export itself so other components can use it.
Who created React?
What are the React props like?
Function arguments in javascript and attributes in HTML
What are the 2 types of components in React?
Functional Components and Class Components
How do you start your React App.
Go to project directory with cd and then type the command npm start
What is a React Hook?
Hooks allow you to use and other features without creating classes. Hooks allow you to "hook" into features of react. For example, useState allows us to hook into react's state feature.
Why do hooks exist?
In the past, state was tightly coupled to class base components. They lived in the constructor.
Can you explain the constructor method? What phase is it apart of?
It is a part of the mounting phase. It is called before anything else when the component is initiated. It is the natural place to set up initial state and other initial values. You can also pass props as an argument to the constructor.
What is ES6?
It stands for ECMAScript6. It is the name of the standard created for javascript.
When a value in the state object changes the component will:
It well re-render which will also change the output according to the new values.
What is JSX?
JSX allows you to write in HTML in react. It stands for JavaScript XML
What are hooks?
Low level primitives or building blocks of the React framework that give you specialized abilities. Hooks are functions that start with "use". You can only use hooks at the beginning of a functional component. They don't work in other parts of javascript code unless you create your own custom hook.
Can you explain the mounting phase in React?
Mounting means putting elements into the DOM. There are 4 built in methods that get called when mounting a component. - constructor() - getDerivedStateFromProps() - render() - componentDidMount() The render method is required and will always be called. The others are optional and will be called if you define them.
Explain Passing Data with props.
Props allow you to pass data from one component to another via HTML attributes.
What are React props?
Props are essentially arguments that are passed into React components. This is done through HTML attributes.
Can you explain passing data with props?
Props give you a way to pass data from one component to another.
With JSX if you want to insert a large block of HTML how can you do this?
Putting the HTML inside parenthesis.
What is state in React?
React Components have built in state Object. The state is where you store property values that belongs to the component. When the state object changes (this.setState()), the component re-renders.
How does React work?
React basically creates a virtual DOM. All the code we write interacts with the Virtual DOM. Then the virtual DOM perfoms the changes on the real DOM.
What is React Render HTML?
ReactDOM.render() function is used to render HTML.
What is a component in react?
Reusable pieces of code that work in insolation that return HTML through a render function.
What is React Forms?
Similar to HTML Forms, Reacts forms allows users to interact with a webpage. Form data is usually handled by the Component. When the data is handled by the components, the data is stored within the state object.
