What is React.js, component props, and event handlers

What are the rules of class components?

- Must be a Javascript Class - Must extend (subclass) React.Component - Must define a "render" method that returns some amount of JSX.

Create a simple a React App that return "Hello World"

/* index.jsx */ import React from "react"; import ReactDOM from "react-dom"; import HelloWorld from "./HelloWorld"; class App extends React.component { render() { return ( <HelloWorld /> ); } } ReactDom.render(<App/>, document.querySelector("#root")); /* HelloWorld.jsx */ import React from "react"; class HelloWorld extends React.component { return <div>Hello World</div>; } export default HelloWorld;

What can class Components do?

1. Can produce JSX to show content to the user 2. Can use the lifecycle method system to run code at specific points in time. 3. Can use the "state" system to update content on the screen.

What can function Components do?

1. Can produce JSX to show content to the user. 2. Can use Hooks to run code at specific points in time. 3. Can use Hooks to access state system and update content on screen.

What are the three Tenets of Components?

1. Component nesting, which lets a component can be shown inside of another 2. Component resuability because we want to make components that can be easily reused through out application. 3. Component Configuration because we should be able to configure or modify a component when it is created.

Explain React state and props.

1. React State Every component in react has a built-in state object, which contains all the property values that belong to that component.In other words, the state object controls the behaviour of a component. Any change in the property values of the state object leads to re-rendering of the component. 2. React Props Every react component, accepts a single object argument called props (which stands for "properties").These props can be passed to a component using HTML attributes and the component accepts these props as an argument.Using props, we can pass data from one component to another.

What are the advantages of using React?

1. Reusable components React uses component-based architecture for developing applications. Components are independent and reusable bits of code. These components can be shared across various applications having similar functionality. The re-use of components increases the pace of development. 2. Use of Virtual DOM to improve efficiency React uses virtual DOM to render the view. As the name suggests, virtual DOM is a virtual representation of the real DOM. Each time the data changes in a react app, a new virtual DOM gets created. Creating a virtual DOM is much faster than rendering the UI inside the browser. Therefore, with the use of virtual DOM, the efficiency of the app improves.

What do these event handlers do? 1. onClick 2. onChange 3. onSubmit

1. User clicks on something 2. User changes text in an input 3. User submits a form

How does onChange event handler work?

1. User types in input 2. Callback gets invoked 3. We call setState with the new value 4. Component rerenders 5. Input is told what its value is (coming from state)

What is a component and how does it work?

1. can be a function or a class 2. produces HTML to show the user using JSX. 3. and handles feedback from the user using Event handlers

why do we use class Component over functional component?

Because with functional component, it takes a good amount of time to get the data from API, and by the time it finally return the data to us, we have already rendered our app component onto the screen. With the class based component, we can use re-access state system, which tells the component to re-render itself with the new information/data. We use class based component when we know that we are going to use "state". At some point to handled the user input where the user actually typing into the search bar.

Which one should we use? Class Components or Function components?

Companies with established projects are using Class components Companies with newer projects may be using Class based or Function-based components.

How do we pass in the props from parent class component to the children functional component? Write down a code example!

Example) class App extends React.Component { render = () => { return ( <SeasonDisplay season="Winter" /> ) } } const SeasonDisplay = (props) => { return <div>props.season</div>; };

How to communicate Child to Parent component?

Make sure to convert the functional based parent component to a class based component. You can communite the child to its parent by using props inside the child to invoke the parent method. Example) // Parent class App extends React.Component { onSearchSubmit = (term) => { console.log(term); } render = () => { return ( <div className="App"> <SearchBar appSubmit={this.onSearchSubmit} /> </div> ); } } // Child class SearchBar extends React.Component { onFormSubmit = (event) => { event.preventDefault(); /****** Important ******/ this.props.appSubmit(this.state.term); } onInputChange = (event) => { console.log(event.target.value); this.setState({ term: event.target.value }) } render = () => { return ( <div className="search__Bar"> <form onSubmit={this.onFormSubmit} className="search__Bar__form"> <input type="text" value={this.state.term} onChange={this.onInputChange} className="search__Bar__input"></input> <button className="search__Bar__submit">Search</button> </form> </div> ); } }

what is JSX?

Stand for Javascript XML. It allows us to write HTML elements in Javascript by placing them in the DOM without using createElement() and appendChild() method.

What is the difference between Controlled and Uncontrolled element?

Uncontrolled element is when we had to reach into the DOM and pull out the value from the user input. Controlled element is when we directly look at our react component and get the value from the "state" object without reaching into the DOM. Meaning we are storing the user input/ information inside our components like state object. Controlled element helps us manipulate whatever the user is typing in there, for example uppercasing.

How to make the form not to refresh the page automatically when we submit a form by pressing enter?

Using "preventDefault()" Example) onFormSubmit = (event) => { event.preventDefault(); } <form onSubmit={this.onFormSubmit}> <input>Something</input> </form> This will make sure that whenever we press enter to submit a form, it will not submit or refresh.

When should we use class based component?

When we need state, lifecycle hooks, or performance optimization.

What values JSX can't show?

an object without specifying its property. example) const buttonText = { text: "Click me" }; <button>{buttonText}</button> but you can do this. <button>{buttonText.text}</button>

Before js file go to the browser, what tool does it need to convert from es2015 to es5 js?

babel

How to write html class and for in JSX?

class => className for => htmlFor

Convert the following function based component to class based component: const App = () => { return <div>Hello World</div>; };

class App extends React.Component { render() { return <div>Hello World</div>; } };

How to get the user input?

use "onChange" method in the input tag example) render = () => { onInputChange = (event) => { console.log(event.target.value); } <form> <input onChange={this.onInputChange}></input> </form> }

What is the referencing JS variables in JSX or how do we display something?

{invoke_function/value}