React Feature

Props
The main difference between state and props is that props are immutable. This is why the container component should define the state that can be updated and changed, while the child components should only pass data from the state using props.

Props and state are CORE concepts of React. Actually, only changes in props  and/ or state  trigger React to re-render your components and potentially update the DOM in the browser

props allow you to pass data from a parent (wrapping) component to a child (embedded) component

props (short for “properties”) and state are both plain JavaScript objects. While both hold information that influences the output of render, they are different in one important way: props get passed to the component (similar to function parameters) whereas the state is managed within the component (similar to variables declared within a function).

Example
const posts = () => {
    return (
        <div>
            <Post title="My first Post" />
        </div>
    );
}
const post = (props) => {
    return (
        <div>
            <h1>{props.title}</h1>
        </div>
    );

Props Validation
Properties validation is a useful way to force the correct usage of the components. This will help during development to avoid future bugs and problems, once the app becomes larger. It also makes the code mo

Example-A
import React from 'react';
class App extends React.Component {
   render() {
      return (
         <div>            
            <h3>Number: {this.props.propNumber}</h3>            
         </div>
      );
   }
}
App.propTypes = {  
   propNumber: React.PropTypes.number
}
export default App;

State
state is like a data store to the ReactJS component. It is mostly used to update the component when the user performed some action like clicking the button, typing some text, pressing some key, etc.
Calls to setState are asynchronous

JSX
JSX is a shorthand for JavaScript XML.
1- React uses JSX for templating instead of regular JavaScript.
2- It is faster because it performs optimization while compiling code to JavaScript.
3- It is also type-safe and most of the errors can be caught during compilation.
4- It makes it easier and faster to write templates if you are familiar with HTML.

ReactJS Components
In ReactJS we have two different types of components.
1-Stateless ReactJS Component
All function-based components can be considered as stateless ReactJS components.
Stateless ReactJS Components are pure javascript functions so, we don’t need to have state.
2-Stateful ReactJS Component
All class-based components can be considered as stateful ReactJS components.
Stateful ReactJS Components inherits the class React. Component so, state get’s inherited.

Environment Setup
Install NodeJS and NPM
After successfully installing NodeJS, we can start installing React upon it using npm. You can install NodeJS in two ways
1-Using webpack and babel.
2-Using the create-react-app command.

Form
we will set an input form with value = {this.state.data}. This allows updating the state whenever the input value changes. We are using the onChange event that will watch the input changes and update the state accordingly

Example1:
class App extends React.Component {
   constructor(props) {
      super(props);      
      this.state = {
         data: 'Initial data...'
      }
      this.updateState = this.updateState.bind(this);
   };
   updateState(e) {
      this.setState({data: e.target.value});
   }
   render() {
      return (
         <div>
            <input type = "text" value = {this.state.data} onChange = {this.updateState} />
            <h4>{this.state.data}</h4>
         </div>
      );
   }
}
export default App;

Example2:
class App extends React.Component {
   constructor(props) {
      super(props);
      
      this.state = {
         data: 'Initial data...'
      }
      this.updateState = this.updateState.bind(this);
   };
   updateState(e) {
      this.setState({data: e.target.value});
   }
   render() {
      return (
         <div>
            <Content myDataProp = {this.state.data}
               updateStateProp = {this.updateState}></Content>
         </div>
      );
   }
}
class Content extends React.Component {
   render() {
      return (
         <div>
            <input type = "text" value = {this.props.myDataProp}
               onChange = {this.props.updateStateProp} />
            <h3>{this.props.myDataProp}</h3>
         </div>
      );
   }
}
export default App;

ref
Refs is the short hand for References in React.
The ref is used to return a reference to the element. Refs should be avoided in most cases, however, they can be useful when we need DOM measurements or to add methods to the components.

ReactDOM.findDOMNode(this.refs.myInput).focus();
<input value = {this.state.data} onChange = {this.updateState} ref = "myInput"/>

keys
React keys are useful when working with dynamically created components or when your lists are altered by the users. Setting the key value will keep your components uniquely identified after the change.

{this.state.data.map((dynamicComponent, i) =>
<Content key = {i} componentData = {dynamicComponent}/>
)}

HOC
HOC are components which wrap another component
a higher-order component is a function that takes a component and returns a new component.
A higher-order component is a function that takes a component as an argument and returns a component. This means that a HOC will always have a form similar to the following:

const higherOrderComponent = (WrappedComponent) => {
class HOC extends React.Component {
render() {
   return <WrappedComponent/>;
  }
}
return HOC;
};

Services Worker
A service worker is a type of web worker.
A service worker is a script that your browser runs in the background, separate from a web page,

Service worker lifecycle
A service worker goes through three steps in its lifecycle:
1-Registration
2-Installation
3-Activation