Basic Fundamentals of React.js

What is ReactJS ?

ReactJS is a JavaScript library. It allows the programmer to create quick UIs. React is designed for the purpose of reuse components. You can define small components and put them together to form bigger components.

All the components whatever it is small or big are reusable, even across different projects.

Here we will discuss about some basic fundamental concepts about ReactJS.

Functions vs classes

Before releasing 16.8 version of react, there was a concept that only the use of class component can make a component “stateful” rather than functional components.

But, This has changed with the release of “React Hooks” beginning with React version 16.8, which was released in early 2019. After coming React hooks with new API, make a function component stateful and many other features. The class-based syntax is only needed for advanced and very rare cases.

Components vs Elements

Components: Components are reusable in the same application and across multiple applications.. Components make your code more readable and easier to work with. It can be declared in several different ways. Components come in two types, Class components and Function components. Example-

Class Components:

class City extends React.Component {
  render() {
    return <h2> Hi, I am a City! </h2>;
  }
}

Function Components:

function City() {
  return <h2> Hi, I am also a City! </h2>;
}

Elements

On the other hand, elements which we found from return of the components. It’s an object that virtually describes the DOM nodes that a component represents. With a function component, this element is the object that the function returns and with a class component the element is the object that the component’s render method returns. React elements are not what we see in the browser. They are just objects in memory and we can’t change anything about them.

The React Element that represent object would be as follows:

const element = React.createElement(
  'div',
  {id: 'Submit-btn'},
  'Submit'
)

The above React.createElement() function returns an object:

{
  type: 'div',
  props: {
    children: 'Submit',
    id: 'Submit-btn'
  }
}

And finally it renders to the DOM using ReactDOM.render():

<div id='Submit-btn'>Login</div>

React Hooks

In React components, a hook is treated as special function. All hooks functions are started with the word “use”. There are a several kinds of hook in React. Here we discuss some of them.

useState()

useState is a hook which is used to provide a function component with stateful elements. We can keep number, string or what we need and react will preserve it as initial state. It declares a “state variable” and we can named it anything like mango .It returns a pair of values: the current state and a function that updates it. Example-

In this example we set a counter. When you click the button, it increments the value:

import React, { useState } from 'react';
function Example() {
  // Declare a new state variable, which we'll call "count"  const [count, setCount] = useState(0);
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

useEffect()

useEffect is a hook which can be used to managed side effects in the function components. In many cases we want to perform the same side effect, but in class component it wasn’t possible.

Now we have Hooks and the useEffect Hook comes to our rescue. Here’s the example making use of the useEffect Hook:

import React, { useState, useEffect } from 'react';
function Example() {
  const [count, setCount] = useState(0);

useEffect(() => {    
// Update the document title using the browser API    
document.title = `You clicked ${count} times`;  });
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

useContext()

Another commonly used react hook is useContext. This hook is used to create context API in a react application. To manage state in a component, it is more easier rather than use of useState. Beacause there are no possibility for nesting. In any component we can use the created context API for the management of state.

In this example, we create a new context in a separate file like this:

import React from 'react';
const AuthContext = createContext({});
export const AuthProvider = AuthContext.Provider;
export default AuthContext;

Then we need to wrap the parent element, hence the highest tier from where we want to distribute props with the provider we created:

import React from 'react';
import ChildComponent from './Components/ChildComponent';
import { AuthProvider } from './Context/AuthContext';
function ParentComponent() {
  const auth = { userId: '12345', loggedIn: true }

  return (
    <AuthProvider value={Auth}>
      <ChildComponent />
    </AuthProvider>
  );
}

Now, all of the ParentComponent’s children have access to auth as a prop.

import React, { useContext } from 'react';
import { AuthContext} from './Context/AuthContext';
function ChildComponent() {
const auth = useContext(AuthContext); 
  console.log(auth);   //{ userId: '12345', loggedIn: true }
  return null
}