Introduction to React

Question 1

What is React?

Answer 1

Raect is a JS library for building front-end application and UI.

It allows us to create reusable components that manange their own state then compose them to create comples UI’s.

Question 2

It is an officially supported way to create single paged React applications.

It offers a modern build setrip with no configuration.

Answer 2

Create-React-App

Question 3

What is a React Component?

Answer 3

The building block of any React app.

1. Lets you break up the user interface into separate pieces that can be reused and handled independently
2. Can be defined as a Function or a Class
3. Takes in an optional input (prop) and returns a JSX which is renderd on the screen.

Question 4

What is a React class component?

Answer 4

1. it has to extend React.Component
2. requires a render method which teturns JSX

Question 5

What is a State?

Answer 5

A State contains data specific to its component and may change over time

1. When the State changes the component re-renders
2. It can contain as many properties as you like
3. To change the State we use this.setState()

Question 6

What is a Prop?

Answer 6

Stands for properties

1. Used for passing data fro one component to another.
2. Data with props are beign passed in a uni-directional flow ( one way from parent to child)

Question 7

What are dev tools used for?

Answer 7

Its a Chrome dev tool extention for the open-sourced react extention library.

1. It allows you to inspect the react component hierachies

Question 8

For getting started with ReactJS we can choose between two methods:

Answer 8

1. Import the library directly into an HTML file

‌

2. Start from create-react-app

Question 9

You must not forget to link the boostrap.css inside either

Answer 9

./src/index.js

or

./src/App.js

Question 10

The only method you must define in a React.Component subclass is called

Answer 10

render( )

Question 11

In order to make your component usable and importable from other ones, you need to export it after its declaration. What is the syntax?

Answer 11

export default App

Question 12

JSX accepts dynamic code inside what?

Answer 12

curly braces ({…})

Question 13

Which React lifecycle method is the only required method when writing a class component, and is the most important one?

Answer 13

the render()

(it’s in charge of outputting your JSX and create DOM nodes into the page.

It will be re-invoked every time there’s a change in the props or in the state of your component)

Question 14

Which is the first method invoked in a class component mounting process.

Answer 14

constructor( )

Question 15

Which lifescycle method is a method which gets triggered after the component has fully mounted, or after its initial render took place?

Answer 15

componentDidMount( )

(It will just be triggered once during the entire lifecycle of a React component.)

Question 16

Which method gets triggered every time an update occurs in the component, so every time a change in its state or in its props does happen?‌

Answer 16

componentDidUpdate( )

Question 17

Which method gets triggered just a moment before your component gets unmounted (removed) from the DOM?

Answer 17

componentWillUnmount()

(This is especially useful for clearing timeouts or event listeners that are not going to be used anymore.)