notes.txt

npm -v
npx -v
node -v

node modules will be adede to the path after npm install <package>

npm - node package manager, used to manage all dependencies
npx - node package executor

npm - node package manager, used to manage all dependencies
npx - node package executor

npm init - initialization of npm, it will create package.json

To create React app:
    npx create-react-app todo-app 
    cd todo-app
    npm start

JSX- javascript executor
   Stricter than HTML
   start and ending tag should be proper
   multiple tagss should be wrapped with <> </>

JSX - In older browser, babel enables to convert to modern javascript
ES - Ecmascript

import './App.css';
import  {LearningComponent} from './components/learning-examples/LearningComponent'

function App() {
  return (
    <div className="App">
      <b>The praveen's Application</b>
      <LearningComponent/>
    </div>
  );
}

export default App; --> no need to mention near import {}

export function App() {
  return (
    <div className="App">
      <b>The praveen's Application</b>
      <LearningComponent/>
    </div>
  );
}

Best practices:
Move each component to separate folder

part of Component:
1. View - JSX
2. Logic - JS
3. Styling - CSS
4. State - Internal data store
5. Props - Pass Data

Hooks:
const [count,setCount]=useState(0);
setCount(count+1);
useState(0) will be having array of 2 elements.
first one initial value and second one is function

Props:
In return - we can add properties to function
<Counter proeprty1="1" property2="2"/>

#old
function Counter(proeprties){
console.log(properties.property1);
}

#new - modern
function Counter({proeprty1,proeprty2}){
console.log(property1);
}


export default function CounterButton({by,incrementMethod,decrementMethod}) {
    return (
    <div className="Counter">
        <div>
            <button className="counterButton" onClick={()=>incrementMethod(by)}>+{by}</button>
            <button className="counterButton" onClick={()=>decrementMethod(by)}>-{by}</button>
        </div>
    </div>
    );
  }
----------------------------------------------------
export default function Counter() {

    const [count,setCount]=useState(0);

    function counterButtonIncrement(by){
        setCount(count+by);
           }
    function counterButtonDecrement(by){
        setCount(count-by);
           }
    function counterButtonClear(){
        setCount(0);
           }
  return (
      <div className="Counter">
        <span className="count">{count}</span>
            <CounterButton by={1} incrementMethod={counterButtonIncrement} decrementMethod={counterButtonDecrement}/>
            <CounterButton by={2} incrementMethod={counterButtonIncrement} decrementMethod={counterButtonDecrement}/>
            <CounterButton by={5} incrementMethod={counterButtonIncrement} decrementMethod={counterButtonDecrement}/> 
            <button className="counterButtonClear" onClick={counterButtonClear}>Reset</button>     
      </div>
    );
}