#2 of 100DaysOfCode

Wow, Second Day.
I finally did some programming in React. Came to know furthermore about types of React API calls and different ways in which we can make Elements in React.

Anyway following are my today's learnings.

• Functional Components and reactive updates.
• Virtual DOM and JSX.
• Props and states - i.e. Inputs to a component
  • props are immutable. But the whole component can be rendered by different props by the component's parent
  • states are mutable and every time a state of a component changes React re-renders it on the page.
• React.DOM takes two arguments
  • The Component
  • DOM node that will hold the component on the page
• To pass in multiple components we can:
  • Pass it an array of components
  • Enclose it in
  • A dummy parent element.
  • A React.Fragment Element
• onClick event in React

And a great example of closure. 😁

function Button(props) {
  // Commented out code was the partial application method that I tried using, It's an error, so please Ignore
  // const handleClick = props.onClickFunction.bind({})(props.increment);
  const handleClick = () => props.onClickFunction(props.increment)
  return (
    <button onClick={handleClick}>
      +{props.increment}
    </button>
  );
}

function Display(props) {
    return (
    <div>{props.message}</div>
  );
}

function App() {
    const [counter, setCounter] = useState(0);
  const incrementCounter = (inc) => setCounter(counter+inc);
    return (
    <div>
      {[1, 5, 10, 100].map((inc)=>{
      return <Button onClickFunction={incrementCounter} increment={inc} />  
      })}

      <Display message={counter}/>
    </div>  
  );
}

ReactDOM.render(
  <App/>,
  document.getElementById('mountNode'),
);

Try it out HERE

In this example since onClick takes a function as a value, I tried setting the default value using the bind() method, But it never worked and yeah, I forgot about the closures.😕

If anyone wanna check that out please I'd really appreciate that.

I hope, I might have helped in any way.😄
Thanks for Reading.
Have a Beautiful Day.🌼