React fundamental concept for beginner 2021.

If you are new to react then you might realize it’s different from other frameworks although it’s a library. But it’s widely popular in the tech industry. Here I will tell you some fundamental concepts which you may know but maybe some are new.

react fundamantals

# React is all about components

React is designed around the concept to reuse components. You will define small components and you won't repeat this again. In further you will use the same components on another page.

function Name(props) { 
// Returns a DOM element here. For example: 
return <h1>{props.name}</h1>; 
}
// To render the Button component to the browser ReactDOM.render(<Name name=”John Doe” />, mountNode)

React components name start from capital letter. It won’t work if you use a small latter.

# You can use JavaScript expression anywhere in JSX.

inside JSX code, you can use the javascript expression. Like :

const RandomNumber = () => 
<div> 
{ Math.floor(Math.random() * 10) } 
</div>; 
// To use it: 
ReactDOM.render(<RandomNumber />, mountNode);

any javascript expression can go inside those curly braces. This is equivalent to the ${} interpolation syntax in JavaScript template.

# React components with javascript class

Simple function components are good for small components. But you want more then you can use JavaScript class components.

class Name extends React.Component { 
render() { 
 return <h1>Hi, {this.props.name}</h1>; 
 }
}
 // Use it (same syntax)
 ReactDOM.render(<Name name=”John Doe” />, mountNode);

# Two important difference in Events React

When handling events inside the react element there are two very important difference from the way we do som with the dom API:

• All react attributes are named using camelCase, rather then lowerCase. It’s onClick not onclick.
• We pass an actual javascript function reference as the event handler rather than a string. its onclick={handleClick}, not onClick=”handleClick”

# Every React component has a story.

the following applies to the class component only those that extend react.Component. Function components have a slightly different story.

• First, we define a template and react to create elements from the components.
• Then we instruct react to use it somewhere.
• Then, React instantiates an element and gives in a set of props that we can access in props
• Then react compute the output method.

# React will react.

React gets its name from the fact that it reacts to state changes. React update each time when we change any value from the state. For this reacting it’s named as react. Sound interesting!

Thanks for reading this. Hope you learn something new form that.