DEV Community

loading...
Cover image for #2 of 100DaysOfCode

#2 of 100DaysOfCode

icecoffee profile image atulit023 ・2 min read

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)

pic
Editor guide
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