React Basics with Q&A

In short, React is a descriptive JS library to make nice and smart UI for us. It explain the View. Who made it? Facebook 📦 lol

Our outlines to learn:

• Components
• State
• Props
• LifeCycle
• Event handling

Q 01: What is this code about? html or string?

const element = <h1>I am a Programmer!</h1>;

Q 02: What is wrong in this code?

class App extends React.Component {
   render() {
      return (
         <div>
            <h1>{i == 1 ? 'I have some data' : 'I have nothing'}</h1>
         </div>
      );
   }
}

Q3: How I can use this style for the text?

    render() {
      var someStyle= {
         fontSize: 100,
         color: Blue
      }
      return (
         <div>
            <h1>My Text Here</h1>
         </div>
      );
   }

1. Components

Components are 2 types: Dumb and Container/ some say Function and Class

Examples are:

Function Component: (jsx format)

const TestComponent = (prop) => {
    return(
       //something
   );
}

Class Component: (no jsx format, react will do it)

class TestComponent extends React.Component {
   render() {
    return(
       //something
   );
  }
}

Component name must be Capital letter to avoid html tag duplicate problem or bugs Like is react but is html

Answer 1, 2, 3:

• jsx
• declare var i
• style={someStyle}

Q 04: What is wrong here? and what will be the result?

function myName(props) {
  return <h1>My Name is: {props.name}</h1>;
}
const element = <myName name="Mohammad" />;
ReactDOM.render(
  element,
  document.getElementById('root')
);

Q 05: Which line is wrong here?

this.state.comment = 'Stefan';
this.setState({comment: 'Stefan'});

Q06: Which one is correct? what we called them?

1. componentDidMount();
2. componentWillMount();
3. componentCanMount();
4. componentWillReceiveProps();

Answer Q04, 05, 06:

• Components starts with Capital letter and no this.props as it is function component.
• line one, always update with setState() not manually
• 1,2,4 life cycle methods

Q07: What is missing here?

  constructor(props) {
    super(props);
    this.state = {
         value: ''
    };
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

Q08: How I can use previous or initial state to increment my value in below code?

  //initial state is 0
  state = {
    counter: 0 //this counter value will increment by 1 from handleClick event
  }
  handleClick  = () => {
     this.setState(()=> ({ //ans this line
       counter: counter + 1 // and this line also
     }));
  };

Q09: How to do above code using constructor and no prevState?

Answer Q07,08,09:

• this.handleChange = this.handleChange.bind(this);
• add prevState as argument and then prevState.counter to have previous state
• here:

  constructor() {
    super();
     this.state = {
        counter: 0
     };
  }

  handleClick  = () => {
     this.setState({
        counter: this.state.counter + 1
      });
  };

Q10: How to send below handleClick() method to Button component and how to use it inside Button component?

class Button extends React.Component {
  render() {
   return (
       <button>Click Me</button>
    );
  };
}

class App extends React.Component {
    constructor() {
    super();
     this.state = {
        counter: 0
     };
  }
  handleClick  = () => {
     this.setState({
        counter: this.state.counter + 1
      });
  };
  render() {
     return(
       <div>
         <Button/>
       </div>
     );
   }
}

Answer is use the method as properties of Button component by any name you like anyName={} like this and use this.handleClick as it is inside this App component. Then you can retrieve this method in Button by this.props.handleClick like below:

class Button extends React.Component {
  render() {
   return (
       <button onClick={this.props.onclickFunction}>Click Me</button>
    );
  };
}

class App extends React.Component {
    constructor() {
    super();
     this.state = {
        counter: 0
     };
  }

  handleClick  = () => {
     this.setState({
        counter: this.state.counter + 1 //how to set updates value from Button component, like reuse button?
      });
  };
   render() {
     return(
       <div>
         <Button onclickFunction={this.handleClick}/>
       </div>
     );
   }
}

Q11: How to set increment value from Button component, like reuse button? dynamic increment or reuse of button?

// increment value to component like this, u can add properties as much as u like
<Button incrementBy={1} onclickFunction={this.handleClick} anyOtherProperties={anythings u like, numbers, string, method etc.} />

// then send incrementBy to handleClick(), use ()=> arrow function to avoid errors
<button onClick={()=> this.props.onclickFunction(this.props.incrementBy)}>

// then use incrementBy 
  handleClick  = (incrementBy) => {
     this.setState({
        counter: this.state.counter + incrementBy
      });
  };