Some fundamentals of React JS

Basics

We know that REACT is based on components. By using react we can reuse the components based on our needs and this is very helpful for creating a nice-looking UI.

You can make react components by two ways :

1. Class Components

2. Functional Components

Nice! Let's go through the system of creating React components.

#Class Components

For creating a class component in React you have to define a class that will extend the Component class and has a render function.

By focusing on the example below we can get clear idea about making a react class component.

Example:

// NewComponent.js

import React, { Component } from ‘react’;
class NewComponent extends Component {
render() {
return (
    <div>This is new component.</div>
);
}
}
export default NewComponent;

Then save it as a NewComponent.js file and then you can access this component by calling from parent components or directly.

#Functional Components

Functional Components are the most wanted react component nowadays. Many react developers are fond of it.

Let's dive into the code for understanding more

Example: -

//NewComponent.js

import React from ‘react’
function NewComponent(){
   const newComp = ‘Hello this is new component’
return <h1>{newComp}</h1>
}

export default NewComponent

This is the way of writing a functional component in React Js.

#JAVASCRIPT XML

Now we will know more about the important topic which is JSX. JSX stands for Javascript XML.

Just think in a simple way JSX used for writing HTML in React that’s it.

Let's look into a component of react js which includes XML.

#Example

import React from ‘react’
function Hello(){
 const hello = “Hello in JSX”
 return <h1>{hello}</h1> //jsx
}
export default Hello
//output: Hello in JSX

#Default Props in Class Component

It can be defined as the default property of the class components of react.

Let's get into the code for getting clear ideas about defaultProps.

#Example: -

class Hello extends React.Component {
}
Hello.defaultProps = {
   color: ‘red’
};

If props.color is not given then its default value will be set to red.

render() {
    return <Hello /> //props color will be red.
}

If we want to change the color then

render() {
    return <Hello color={‘blue’} /> //props color will be blue
}

That’s the basics about defaultProps in react class component.

#Props in functional component

Props in the functional component are very easy.

#Example

function Greetings(props) {
   return <h1>Hello, {props.name}</h1>
}
export default Greetings

Now after importing we can call this component like this:

import Greeting from ‘./Greetings’;
function App() {
return (
  <div>
     <Greetings name={‘Shakil’} />
  </div>
);
}
//output: Hello, Shakil

By following this way we can use props in React functional component.

#Props in JSX

*JavaScript Expressions As Props

We can use any JavaScript expressions as props. Just put them into {}.

For example:-

<NewComponent sum={1+4+5+2} />
//output: 12

This is the basic way to use JavaScript expressions as props.

*String As Props

We can pass strings as props. There are two ways given in the example.

Example:-

<ThisComponent string={‘Hello string props’} />
<ThisComponent stringprop=”Hello string props” />

By using these ways we can pass a string as props.

# State in React Class Component

The state mainly contains specific data which can be changed in the future. The state is very useful in react.

Let look into the example: -

class MyComponent extends React.Component {
constructor(props){
super(props)
this.state = { name : “shakil” }
}
render () {
return <h1>Hello {this.state.name}</h1>
//for updating this state we will use this.setState = {name : “hridoy”}}
}
}

#State in React Functional Component

We got a primitive idea about the concept of state from previous section. Now we will learn about the way to use state in react functional component.

function Mycomponent(){
const [name, setName] = useState(“shakil”)
return <h1>Hello, {name}</h1>
//for updating state we will use setState(“hridoy”)
}

By following this way we can use state in react functional component.

#Ternary Operator

We can use the ternary operator for conditional rendering. You can understand more by following the given example.

Example: -

function MyComponent(){
const click = true;
return (
click ? <h1>Click is true </h1> : <h1> Click is false </h2>
//if click = true then Click is true else click is false
)
}

This is a basic way of using the ternary operator.

That’s all for today. I am a new blogger trying to write about some basics of JavaScript, React Js, and their fundamentals. I am not so expert so there are many mistakes in my article if you find any mistake, please forgive me.