basic

Question 1

how do you call a component called person with parameters name and age?

Answer 1

ReactDOM.render(‘’,

document.querySelector(‘#p1’));

Question 2

como se declara la funcion Person?

Answer 2

function Person(props) {
          return (
               <div>
                        <h1>{props.name}</h1>
                        Age : {props.age}
               </div>
      ); 
}

Question 3

what is the major React component that you render through ReactDOM.render() method?

Question 4

how do you import the react module

Answer 4

import React from ‘react’;

Question 5

functional component definition?

Answer 5

declare through a function and also called stateless, dumb or presentational. 
const cmp = () => { return <div>some JSX</div> }

Question 6

class-base component definition?

Answer 6

define through a class. stateful, smart and containers.
class Cmp extends Component {
        render() {
               return <div> some JSX </div>; 
        }
}

Question 7

create a functional component that takes name and age as arguments?

Answer 7

import React from ‘react’;

const person = (props) => {
    return <p>I'm {props.name} and I am {props.age} years old!</p>;
};

export default person;

Question 8

create a functional component that works like this:

Reading

Answer 8

const person = (props) => {
    return  <div>
                <p>I'm {props.name} and I am {props.age} years old!</p>
                <p>And my hobby is {props.children}</p>
            </div>               
};

export default person;

Question 9

create a functional component that works like this:

Reading with the parentesis

Answer 9

const person = (props) => {
    return  (
                <div> 
                    <p>I'm {props.name} and I am {props.age} years old!</p>
                    <p>And my hobby is {props.children}</p>
                </div> 
            )              
};

export default person;

Question 10

add an array of persons to the state property of the App class

Answer 10

class App extends Component {
  state = {
    persons: [ {name : 'Max', age: 28},
               {name : 'Manu', age: 29}, 
               {name : 'Stephanie', age: 26}

]   }    ...

Question 11

props triggers an UI update? and state?

Answer 11

yes. yes too

Question 12

where do you declare the state?

Answer 12

as a property in a class, specially App class

Question 13

what is this inside to a non ES6 function referring to ?

Answer 13

not to the class but to something internal I am not sure. but if you use arrow functions it will always refer to the class.

Question 14

in a class definition do you separate method declarations and poperties with ;?

Answer 14

no.

Question 15

basic instruction for rendering a JSX element

Answer 15

ReactDOM.render(<h1>Hello world</h1>, document.getElementById(‘app’)); there’s a

Question 16

two most important import fro react

Answer 16

import React from ‘react’;

import ReactDOM from ‘react-dom’;

Question 17

what is the container for a ReactDOM.render() expression?

Answer 17

the element where the expression is going to be rendered. in this case

Question 18

what is the virtual DOM?

Answer 18

it is a copy of the DOM created by React. when you do a render, the virtual DOM get’s updated then the diffing happens, i.e., React compares virtual DOM and last DOM snapshot, get the change set, and update the DOM on only the changes