React is an open-source, front end, JavaScript library for building user interfaces or UI components. React is a JavaScript library. It is not exactly a framework. React build a nice user interface (UI) and it is maintained by Facebook. React can be used for developed single page applications or mobile applications. However, React is only concerned with state management and rendering that state to the DOM, so creating React applications usually requires the use of additional libraries for routing, as well as certain client-side functionality. It’s simply the language of user interface “outcomes”.

ReactDOM.render(

Introducing JSX

JSX is a syntax extension of JavaScript. It’s used to create DOM elements which are then rendered in the React DOM. A JSX expression must have exactly one parent element and other elements written into the parent element. In the below block of code the <div> tag is the parent element.

The React.createElement() function is used by React to actually create virtual DOM elements from JSX. When the JSX is compiled, it is replaced by calls to React.createElement(). You usually won’t write this function yourself, but it’s useful to know about.

const h1 = <h1 className="header">Hello world</h1>;

const h1 = React.createElement(
'h1',
null,
'Hello world'
);

React Components

React is designed around the concept of reusable components. You define small components and you put them together to form bigger components. All components small or big are reusable, even across different projects. React component are like JavaScript functions. The Component name starts with capital letter. Lowercase names are reserved for HTML elements.

React component by using function:

React component by using JavaScript class:

React Hooks

Hooks are functions that let us hook into state and lifecycle functionality in function components.

Hooks allow us to:

  • reuse stateful logic between components
  • Flexibility in moving up and down the components tree.
  • simplify and organize our code to separate concerns, rather allowing unrelated data to get tangled up together
  • avoid confusion around the behavior of the this keyword
  • avoid class constructors, binding methods, and related advanced JavaScript techniques

With hooks , we can reuse logic between our components without changing any structure of code. When components become larger and carry many logical operations, its become difficult to understand. Hooks solve this problem by sperate a particular single component into small functions and hooks solve the confusion of the behavior of the this keyword.

There are two main rules to use Hooks in React:

  • Make sure to not use Hooks inside loops, conditions, or nested functions;
  • Only use Hooks from inside React Functions.

Basic React Hooks

There are 10 in-built hooks that was shipped with React 16.8 but the basic commonly used hooks:

  • useState()
  • useEffect()
  • useContext()
  • useReduser()

useState()

The useState() hook allows React developers to update, handle and manipulate state inside functional components without needing to convert it to a class component.

import React, { useState } from 'react';

If we’ve noticed, our component looks pretty simple, concise and it’s now a functional component and also does not have the level of complexity that a class component would have. The useState() hook receives an initial state as an argument and then returns, by making use of array destructuring in JavaScript, the two variables in the array can be named what. The first variable is the actual state and the second variable updating the state.

useEffect()

useEffect() hook as component mounting, updating and unmounting all combined in one functions.

import React, {useState, useEffect} from 'react';
function App() {
//Define State
const [name, setName] = useState({name: 'name', age: });
const [title, setTitle] = useState('BIO');

//Call the useEffect hook
useEffect(() => {
setName({name: 'sunny', age: 22})
}, []) //pass in an empty array as a second argument

return(
<div>
<h1>Title: {title}</h1>
<h3>Name: {name.name}</h3>
<h3>Surname: {name.age}</h3>
</div>
);
};
export default App

We have now imported the useEffect hook and also made use of the useEffect() function to set the state of the name and age property which is pretty neat and concise. We may have noticed the useEffect hook in the second argument which is an empty array, this is because it contains dependencies.

useContext()

The useContext() hook gives functional components easy and proveide any data one component to another component so efficiently. Before the useContext hook was introduced we need to set up a contextType to access global state passed down from some provider in a class component.

useReducer()

The useReducer hook is used for handling complex states and transitions in state. It takes in a reducer function and also an initial state input; then, it returns the current state and also a dispatch function as output by the means of array destructuring.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store