Fundamentals of React.js for beginners

Describing about react.js, DOM, props etc.

What is React?

React is a library which has been used for user interfaces. People make mistake that it’s a framework. But a library is much useful when it comes to a small thing to add into the interface. If you want to add an element we’ll need to import only that element not the full package. React has been used for only design User Interface (UI) that doesn’t need a full framework package.

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?

DOM means Document Object Model. If we want to describe it, we can say that it’s a logical tree structure of HTML of XML documents. DOM contains html structure and style. A node can call multiple leaf nodes or child nodes which have simple structure of it’s own.

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?

We can assume component as a function of any other programming language. A function takes input as parameters and returns a value after working with the input values. If we take a combined parameter ‘props’ and send it to the component, that component will return a small UI structure to it’s parent component.

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?

We can call it as a parameters of component. Generally, it’s an object that can have multiple object elements in it. In our example, our card needs some information to show what the food item is about. We take a parameter ‘item’ and pass it through the props into the Card component. So that the Card component can show all the details within a card structure. Otherwise, every card will give only structures and same information that we don’t want.

React with Simple JavaScript / Without JSX

We can write a code for a React Component by extending the default React.Component. By calling the ReactDOM.render() function, it displays the specified HTML code inside the specified HTML element. It takes two arguments, HTML code and an HTML element.

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

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

What is JSX?

JSX is used to make easy coding for developers. They says,

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

For basic JavaScript codes we use onclick(), onselect(), onshow() and other methods. But for React it’ll be onClick(), onSelect(), onBlur() etc. because all React attributes have camelCases. CamelCase can be derived as every word starts with a capital letter except the first word. Eg. firstName, lastName etc. Also we are using {onSubmit} not “onsubmit”.

<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

We need to write JavaScript expressions in JSX most of the times. How can we do that?

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?

A Hook is function that hooks into the React features. If we write a component and we need to add some state into it, we’ll use hook eg. state hook. Before Hook, we needed to add separate class for it.

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

React State Hook

useState is a Hook that lets us add React state to function components. We need to import useState first and then use it using two variables like this:

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.