Today I will write about the syntaxes of React that I learned about.

Events

Event names are camel-cased, so we need to use onClick instead of onclick that we used while making vanilla JS projects / simply to manipulate DOM.

React normalizes these names across browsers, so we don't need to consider browser inconsistencies. In addition to normalizing event names, React normalizes event objects created by the browser. React's events are also called synthetic events like e.preventDefault().

Now how does the event work? Suppose I want to create a component CounterButton with an onClick event. How can I do this?

I can create a button element inside the js file under a functional component named CounterButton.

function  CounterButton(){
<button onClick={}></button>

So this will tell React to instantiate the CounterButton component with the prop onClick set to a function. However, this alone won't make our CounterButton respond to clicks. Only DOM components can handle DOM events like onClick - so the CounterButton must render a DOM component and pass the onClick prop into it. The CounterButton is essentially a pass-through for the click event. The name of the onClick prop passed to our CounterButton is arbitrary. Any name can be passed through, for example, I have given the name of the prop handleClick and created the button CounterButton component as <button handleClick={() => ...} />.

function CounterButton() {
  return <button onClick={handleClick}> 
 Click Me</button>
}

Here I have passed in the CounterButton component a prop handleClick, which then gets passed into the onClick of a button.

now if I say -

function CounterButton() {
 return <button onClick={handleClick ()}>
Click Me
</button>}

what's going to happen? I have passed the handleClick() function as a prop which then gets passed into the onClick of a button. That means the handleClick function is called when the browser started running. So no need to wait for the button to get clicked. For this reason, we should pass only the function {handleClick} as a prop not call the function {handleClick ()}.

# Props

Another interesting topic of React is props which can be compared/called with parameters. Any JSX attributes become props (parameters) of the React element. The value of an attribute can be a string, like text=" hello", or it can be any JavaScript expression when wrapped in curly braces, as in text={title} (which would set the value of the text prop to title).

If I want to give a detailed explanation of how props work then I would say - props need to be included as a parameter inside the component & the value we want to pass through the prop will be mentioned inside the functional APP component( App.js). Let's have a look at an example.

( Buttion.js file )
function Button(props) {
  return <button >{props.text}</button>
}
(App.js file)
function App () {
  return <Button text="hello" />
}

A simple example where we can see in the Button component prop has been passed & I can say the prop would be the value of text. Now I have declared the value of the text prop inside the functional App. Now by modifying the function -

function Button(text) {
  return <button >{text}</button>
}

Here I haven't mentioned prop but typed text. So React will consider text as a prop and inside the curly braces{} the value of the prop text will be passed through. In addition, we can also pass more than one 'prop'.

function Button(text, handleClick) {
  return <button onClick={handleClick} >{text}</button>
}

function App (){
return (
<Button text="Download"  handleClick={downloading} />)}

For the above Button component, we have passed two props & the value of the props has been declared inside the App component. So when the button will be clicked the prop handlClick will run the function downloading whereas the prop text value will be Download which is actually the name of the button.

That's all for today.