Fundamentals of React.js for beginners

Describing about react.js, DOM, props etc.

What is React?

But Library’s do have some cons too. When you are having fun making a specific architecture, it can ruin your application. Frameworks are easier to use because you can only install the package and import any architecture you need. But with libraries like react, is not easier to work with because you need to build the architecture using HTML, CSS, JavaScript etc.

What is DOM?

Suppose, we need a list of food items in a card(we can take card elements from bootstrap or Material-UI). If we have 100 of food items to show in a single page we have to repeat this card element 100 times. Does that worth it? Isn’t is makes your website too large and costly?

Yes, it does! So, how can we fix it?

Using React components we can make a simple architecture for your card layout and then recall it 100 times for items! That’s it. That’s how DOM and React works with some easy steps.

What is components?

As an example, we were taking about list of food items. Let’s say we send some food information into the Card component. This Card component will return a repetitive structure for all food items we have sent to it. Uses of loops or map functions can be helpful.

What is props?

React with Simple JavaScript / Without JSX

class Example extends React.Component {
render() {
return <h1>Hello World!</h1>;
}
}

ReactDOM.render(<Test />, document.getElementById('root'));

What is JSX?

JSX just provides syntactic sugar for the React.createElement(component, props, ...children) function.

That’s right! JSX is easy to write than the full form in JS. JSX is an XML like extension of JS that allows us to write HTML in React.

JSX tags have Captalised form that indicates that it’s a React Component. They have both intial and ending tags like HTML Tags.

<Button color = 'primary' variant = 'outlined' >Send Mail</Button>

It compiles in React.createElement().

Events and Style Classes on React

<button onClick = {onSubmit} type = 'submit' >Submit</button>

As well as for the style classes, we need to write className not class.

<div className = "container"> </div>

JavaScript in JSX

It’s very simple to write a JavaScript expression using curly braces {} in a JSX script. For example, we need to explore props in our HTML that shows it to our website. Let’s take our previous example, we have a simple card component that shows 100 of items and we need to show our props in between the card component. I’m coping a bootstrap 5.0 code here to show you that.

import image from './image/image.jpg'const CardComponent =(props)=>{return(<div className="card" style={{width: '18rem'}}>
<img src={image} className="card-img-top" alt="...">
<div className="card-body">
<h5 className="card-title">{props.title}</h5>
<p className="card-text">{props.description}</p>
</div>
</div>
)
};
export default CardComponent;

let’s say we have a prop that’s an object. It contains the title and description of a food item. We are showing the props within the curly braces as a JavaScript expression.

Also, we are adding CSS styles within curly braces: style = {{…}}

What is React Hook?

There are some hooks in React like State and Effect hook.

React State Hook

import {useState} from ‘react’;

We need a variable that holds the state value and use it further, and a set function that sets the assigned value into the variable:

const [count, setCount] = useState(0);

We can initialize states with 0, null, boolean, array and object.

Software Engineer