What is React?

React is a flexible, efficient, open-source JavaScript library.

It was developed by Facebook back in 2013 for building user interfaces(front end).

Facebook Software Engineer, Jordal Walke, created it.


Why React?

It allows us to create a complex UI by making components (small & isolated pieces of code)

1. Reusable component
2. Load fast
3. External plugin
4. Around 45% of the world's websites use React
5. Major brands like Facebook, Instagram, Yahoo, Netflix, Airbnb, Dropbox using React

Components

Function Component 
import React from 'react'

function Hello(props){
    // File name and function name need to be similer
return ( // return is very important!!!
        // return is my BIG Mistake!!!   
    <div>
        <h1>Name: {props.name} & Age: {props.age}</h1>
    </div>
    // Writing function name same like file name
    // JSX code need to be write here
);
}

export default Hello
Class Component
import React,{Component} from 'react'

class Welcome extends Component{ 
    //'extends' keyword for inheritence
    // Component = Built in Class
    render(){
        return <h1>Welcome to Class Component{this.props.name}</h1>
    }
}

export default Welcome
App.js 
import logo from './logo.svg';
import './App.css';
import Hello from './Components/Hello' // extention is not important
import Welcome from './Components/Welcome';

// Autometically import after input tag
function App() {
  return (
    <div className="App">
      <Hello age="15" name="X1"/>
      <Hello age="51" name="X2"/>
      <Hello age="55" name="X3"/>
      <Welcome name="Y1" />
      <Welcome name="Y2" />
      <Welcome name="Y3" />
      
    </div>
  );
}

export default App;
JavaScript XML


1. JSX Stands for JavaScript XML.
2. JSX looks like HTML.
3. JSX tag has tag name, attributes, etc...
4. JSX ultimately converts into JavaScript, Which reads by browser.
5. JSX support style
6. JSX supports regular JavaScript expression.
7. JSX provides you space for comments.
8. Babel compiler convert JSX to JavaScript


With JSX 
    <dic className="App">
    <h1>{2+3+5}<h1>
    </div>
Without JSX 
    React.createElement( "div", {
        className: "App"
    }, React.createElement("h1", null, 2 + 3 + 5));

React Button Click Event

Function 
import React from 'react'

function Hello(props){
function doThis(){
    alert('Button is clicked')
}
return (
    <div>
        <button onClick={doThis}>Click Me</button> // if write doThis() function will execute immediately
        <h1>Name: {props.name} & Age: {props.age}</h1>
    </div>
);
}

export default Hello

Class 
import React,{Component} from 'react'

class Welcome extends Component{ 
    doThis(){
        alert('Button is clicked')
    }
    render(){
        return <div>
        <button onClick={this.doThis}>Click Me</button>
        <h1>Welcome to Class Component{this.props.name}</h1>
        </div>
    }
}

export default Welcome

React Passing arguments to event handlers

Function 
import React from 'react'

function Hello(props){
function doThis(a){
    alert(a)
}
return (
    <div>
        <button onClick={doThis.bind(this,"I am from Function")}>Click Me</button> // if write doThis() function will execute immediately
        <h1>Name: {props.name} & Age: {props.age}</h1>
    </div>
);
}

export default Hello

Class
import React,{Component} from 'react'

class Welcome extends Component{ 
    doThis(a){
        alert(a)
    }
    render(){
        return <div>
        <button onClick={this.doThis.bind(this,"I am from Class")}>Click Me</button>
        <h1>Welcome to Class Component{this.props.name}</h1>
        </div>
    }
}

export default Welcome