Tuesday, October 3, 2017

React JS Q&A

1. What is it?

JavaScript library for building HTML user interfaces for the Web Browser.
React abstracts away the generation of HTML as JSX (a representation of HTML in JavaScript).

2. How does it work?

  • Uses JavaScript to product HTML.
  • Uses JSX, a special syntax to specify HTML tags with in JavaScript. JSX is transpiled to regular JavaScript that runs in any browser (createElement() etc.).
  • React creates a virtual DOM in memory that is rendered as the DOM of the Web Browser.

3. How is React code organized?

  • React code is organized as Components.
  • A React Component is either a Function Component or a Class Component.
  • Function Component is does not have an internal state.
  • Class Component can maintain an internal state.
  • React application is created by composing React Components.
  • React Components are usually rendered on the client although they can rendered on the Server using node.js.

4. What is a React Function Component?

  • Receives props
  • Returns JSX
  • JSX is converted to HMTL by transpiler
const Button = (props) => {
return (
  <div>
      <span>Action: </span>
      <button>{props.label}</button>
    </div>
  );
};

ReactDOM.render(<Button label='Go'/>, mountNode);

5. What is a React Class Component?

  • Class Component receives props just like Function Component but as as data member of the class
  • this.state is a special data member of the class that holds state of the component
  • render() is a special function that returns the JSX

class UCaseComponent extends React.Component {
  state = {enteredValue : 'initial', uppercaseValue : 'initial'.toUpperCase()};
  
  handleTextChange = (e) =>{ 
    this.setState({enteredValue: e.target.value, uppercaseValue :  e.target.value.toUpperCase()});
}
  
  render() {
    return (
    <div>
      <input type="text" value={this.state.enteredValue} onChange={this.handleTextChange}/>
      <div><span>{this.props.labelEnteredValue}: </span>{this.state.enteredValue}</div>
      <div><span>{this.props.labelUppercase}: </span>{this.state.uppercaseValue}</div>
    </div>
   )
  }
}

ReactDOM.render(<UCaseComponent labelEnteredValue='Entered' labelUppercase='Uppercase'/>, mountNode);

6. How does React components pass data?

  • React passes data as properties among components (props).
  • Properties are immutable.

7. How does React maintain state?

  • this.state member (data object) of a React component keeps state around for a component.
  • this.state member of the top-level component maintains state for the application.
  • Change is state automatically triggers a re-render of affected DOM elements. React performs a tree reconciliation of the Virtual DOM with the Browser DOM.
  • To maintain complicated application state, helper state management framework such as Flux can be used along with React.

8. How does React handle HTML events?

  • React encapsulates standard handlers (such as onClick) as function handlers 

9. How can I play with React?

Posted by at
Labels: