Introduction

Question 1

What is React?

Answer 1

A library for creation of “composable” UI components using Javascript and XML.

Question 2

What are the main advantages of React?

Answer 2

1. Reactive Rendering
2. Composable Components
3. Abstracted Document model

Question 3

What is a React component ?

Answer 3

In simpler terms a React component is nothing but the Javascript class, which must have a “render” method which returns the description of “Component’s UI”.
This description will be in JSX format.

Question 4

Write the general syntax of React component?

Answer 4

class Hello extends React.Component {
   render () {
       <h1> Hello World </h1>
   }
}

Question 5

How React allow us to write “tags” (html/xml”) inside the Javascript code? How browser understands this JSX?

Answer 5

React uses JSX (Javascript extension) for writing the UI components. By this way, we can add tags (xml or html) inside the components.
The browser doesn’t understands this JSX, hence we need a trans compiler which transforms the JSX code into Javascript.

Question 6

What’s the shortest way to bootstrap a react application?

Answer 6

By using “create-react-app” package.

npm install -g create-react-app

Question 7

What is npx?

Answer 7

NPX is the package which gets automatically installed, when we install the npm.T he npx is used to run the “npm packages”.

Question 8

How to use npx to create a react based project?

Answer 8

npx create-react-app todo

Question 9

What is the package/directory structure created by the create-react-app?

Answer 9

Whenever we create any project using “create-react-app”, it creates the following directory structure:

1. public directory
2. src directory
3. package.json
4. .gitignore file

Question 10

What’s the purpose of “public/index.html” file created by the create-create-app utility?

Answer 10

“index.html” is the main file loaded in user’s browser, whenever a user hits the application.
It contains the “root” element which will contain the entire application.

Question 11

What’s the purpose of “src/index.js” file created by the create-create-app utility?

Answer 11

This is the main “javascript” file, which is responsible for starting the react application in user’s browser.
This file is also responsible for configuring the react application.

Question 12

What’s the purpose of “src/app.js” file created by the create-create-app utility?

Answer 12

This is nothing but the react component, which contains the “html” content which will be displayed to the user. It also contains the “javascript” file required for the content.

Question 13

what is main difference between npm and npx?

Answer 13

npm is used to install packages.
npx is used to execute packages.
In react based development, npx is only used when we need to create a new “project”, rest all other package management is done by “npm”.

Question 14

How to add “bootstrap” library to you react application?

Answer 14

1. Install bootstrap to your project:
   npm install bootstrap
2. Import bootstrap css in index.js
   import ‘bootstrap/dist/css/bootstrap.css’

Question 15

How to start the react application?

Answer 15

npm start

Question 16

What is the difference between “render” and “return” inside a React Component?

Answer 16

Render is the lifecycle function, which is called whenever a component is updated.
Return is used to return the “react element” in JSX format.

Question 17

How a react element is returned by the component?

Answer 17

A react element is returned from the “render” method inside the Component class.
It returns the “react element” which is displayed to the user.
e.g. return (

<div> <p> my react element </p> </div>

)

Question 18

What is a “react element”?

Answer 18

A react element is nothing but the “html element” which is visible to the user.

Question 19

What’s the main different between import and require?

Answer 19

“require” and “modules.export” is CommonJS feature.

“import” and “export” is ES6 feature.

Question 20

How to use import/export, if we are using the CommonJS?

Answer 20

We need to use the “transcompiler” like Babel, which transcompiles the code into ES5.

Question 21

Write the general syntax of React component?

Answer 21

React component is just a class, which contains the render function.

import React, { Component } from ‘react’;

export default class App extends Component {
  render () {
     return (
          <div class="root"> <p> hello world </p> </div>
   }
}

Question 22

How to provide “class” attribute to HTML element in JSx?

Answer 22

It is done by using “className” attribute.

Question 23

What will happen, if we use “plain” HTML attributes in react element instead of JSX attribute?

Answer 23

We will get error inside the console with name “Invalid DOM property”.

Question 24

What is an expression inside the react component?

Answer 24

The expression is the mechanism, which gets evaluated to a “value” whenever a component is called. It is always written inside “curly braces”.
e.g. { this.state.data }

Question 25

How to initialise the state data inside a constructor and used in an expression?

Answer 25

The state data is initialised inside the JS constructor.

Question 26

Wha is the “props” variable used inside the component?

Answer 26

A “props” or “properties” is the important variable which is required to configure one component by another.
Whenever a component is called, the data is passed via props variable.

Question 27

Explain the “state” property inside the “react” component?

Answer 27

The “state” property is used to define the “state” data.

Question 28

Write general syntax of using “Expression” inside the react component

Answer 28

import React, { Component } from 'react';
export default class App extends Component {
  constructor(props){
    super(props);
    this.state = {
         userName = "Nandan"
   }
 }
}

Question 29

How Dynamic content are displayed inside the React component?

Answer 29

Dynamic contents are displayed using the “expressions”.

The expressions are using the “state data”.

Question 30

How does React knows, when to update the “react component”?

Answer 30

whenever there is a change in the “state of the component i.e. this.state”, the react calls the render method, which re-evaluate the expressions, hence the component gets updated.

Question 31

Is it right to say, the entire dynamism in react component is based on “state” of the components?

Answer 31

yes. If we change the state, the react “re-renders” the component.

Question 32

What is done by filter() function of Array in Javascript?

Answer 32

The filter function returns the “sub-array” based on the “test call-back function”.

Question 33

What should be returned by the “test callback” function provided to the “filter” function of array?

Answer 33

It should return true or false.

If “true” is returned, then it will keep that element in the subarray, otherwise drop it.

Question 34

Explain the functionality of “filter” function of array?

Answer 34

1. It iterate the array for each element.
2. Get’s the first element and pass same to the “callback” function.
3. The function gets the element value, and put the logic on the value.
4. The callback function returns the “true/false” based on the logic applied on “item’s” value.
5. If the returned value is “true”, the subarray will contain this value otherwise drops same.

Question 35

How can we can count the elements returned by the filter() function?

Answer 35

By calling ‘length” variable of returned subArray:

myArray.filter( item => item.first === true ).length

Question 36

What’s the purpose of input element?

Answer 36

The Input Element is used to get the text from the user.

Question 37

What are the important attributes of input element?

Answer 37

1. className
2. value
3. onChange

Question 38

Should we place a closing tag for input element?

Answer 38

No, “input element” is a void element, it should not contain “closing” tag or inner element.

Question 39

What is done by Array’s find function?

Answer 39

The find() function returns the first “item” which satisfies the find condition, passed as callback function.