Home

---

• html converted to JavaScript code called jsx using Babel
• Every Component should start with capital letter
• Every File/Module Can have only one default and multiple other component.

the default component are written eg : import FirstComponent , {SecondComponent} from './FirstComponent';

1. FirstComponent is defined 'export default'
2. There can be only one default allowed in a [file or module]

---

• in JSX code -> If you put JavaScript code use curly braces {}
• in JSX before using 'this' it is necessary to write super() in constructor
• this.state = {coutner:0} -> this is the way to initialize the state in constructor
• to update the state we use this.setState({counter:this.state.counter+1})
• to bind 'this' with increment method we have to write following code in constructor :

         this.increment = this.increment.bind(this);

To avoid above bind method we can use arrow function

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

• React Maintain Virtual Dom -> So when state change it find the diff and update exactly that dom element

---

Assume we want to add style inside the element ==> let see what challenges we faces

• style={font-size:50px} --> it fail because {} used in jsx to specify JavaScript code.
  • to fix above we need to covert it into object--> for that we use {{}}
  • So now we can write style={{font-size:50px}} --> it will still fail because in jsx property has to be in camel case.
  • so finally we have to write this way : style={{fontSize:'50px'}}

definition of var,let,const in javaScript

• let is improved version of var which cannot be re-declared and scope of let is to block. Cannot be used before defining gives error
• const is same as let but it is not allowed to updated.
• var can be of global scope or function scope. var can be re-declared [behave as update]. we can use it before defining it but it will give value as undefined.

---

• this.props.<<name_of_property>>
• to add default values we can user <<className>>.defaultProps = {by:1}
• to set property Type we can import PropTypes class add write : <<className>>.propTypes = { by : PropTypes.number }

---

• use ` if we want to print variable for eg:console.log(`my name is ${name} `, name);