DEV Community

Cover image for #2 of 100DaysOfCode
Atulit Anand
Atulit Anand

Posted on

#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'),
);

Enter fullscreen mode Exit fullscreen mode

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.🌼

Discussion (2)

Collapse
brockherion profile image
Brock Herion

Nice work! Getting started is always the hardest part, but if you stick with it, all your hard work will pay off

Collapse
icecoffee profile image
Atulit Anand Author • Edited on

Thanks

tysm