React

node -v
npm -v
create-react-app --version        
npm install -g create-react-app
create-react-app myapp
cd myapp
code .
npm start  
--------------------------------------------------------------------------------------------
components -> 1)class based components 2) functional components
JS + XML => JSX [ HTML এর মত দেখতে তবে HTML নয় ]  
jQuery ব্যবহার করা যাবে না 
--------------------------------------------------------------------------------------------
src/App.js
import logo from './logo.svg';
import './App.css';
import User from './Components/User';
function App() {
  return (
    <div className="">
      <User></User>
    </div>
  );
}
export default App;
--------------------------------------------------------------------------------------------       
src/Components/User.js [ class component ]
import React,{Component} from 'react';
class User extends Component {
    render(){
        return(
            <div>
                <h1>Hello</h1>
            </div>
        );
    }
}
export default User;
--------------------------------------------------------------------------------------------  
src/Components/User.js [ funtional component ]
import React from 'react';
function User(){
    return <h1>Hello</h1>;
}
export default User;
--------------------------------------------------------------------------------------------
src/Components/User.js [ without JSX format ]    
import React from 'react';
function User(){
    return React.createElement(
        "h1",
        null,
        "Hello"
    );
}
export default User; 
--------------------------------------------------------------------------------------------
props
          
App.js
<User name="Arman"></User>
<User name="Sharif"></User>
          
User.js
function User(props){
    return <h1>Hello {props.name}</h1>;
}
class User extends Component {
    constructor(props){
        super(props);
        this.props = props;
    }
    render(){
        return(
            <div>
                <h1>Hello {this.props.name}</h1>
            </div>
        );
    }
}
--------------------------------------------------------------------------------------------
User.js
import React,{Component} from 'react';
import "./User.css"
class User extends Component {
    render(){
        const text = {
            color: "red",
            textAlign: "center"
        }
        return(
            <div className="box">
                <h1 style={text}>Hello {this.props.name}</h1>
                <p style={{
                    color: "blue",
                    fontSize: "33px",
                    textAlign: "center"
                }}
                >How Are You ?</p>
            </div>
        );
    }
}
export default User;
User.css
.box{
    width: 300px;
    box-shadow: 0px 0px 10px gray;
    border-radius: .5rem;
    text-align: center;
    margin: 20px auto;
    padding: 20px;
}
--------------------------------------------------------------------------------------------
import UserStyle from "./User.module.css"
<div className={UserStyle.box}>
--------------------------------------------------------------------------------------------
DYNAMIC VALUE IN STATIC ARRAY WITH STATE
          
App.js
import React,{Component} from 'react';
import Person from "./Components/Person/Person.js"
class App extends Component {
    constructor(props){
        super(props);
        this.state={
            persons:[
                { name:"Arman", age:"28", },
                { name:"Nayem", age:"29", },
                { name:"Farhan", age:"26", },
            ]
        }
    }
    render(){
        let persons;
        persons = this.state.persons.map((p,index)=>{
            return <Person key={index} name={p.name}></Person>;
        });
        return (
            <div> {persons} </div>
        );
    }
}
export default App;
          
Person.js
import React,{Component} from 'react';
import PersonStyle from "./Person.module.css";
class Person extends Component {
    constructor(props){
        super(props);
        this.props = props;
    }
    render(){
        return(
            <div className={PersonStyle.box}>
                <h1>Hello, {this.props.name}</h1>
            </div>
        );
    }
}
export default Person;
          
Person.module.css
.box{
    width: 300px;
    padding: 20px;
    box-shadow: 0px 0px 10px gray;
    border-radius: .5rem;
    margin: 20px auto;
    color: blue;
    text-align: center;
}          
--------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------