A Short Discussion About React.js

3 min readMay 7, 2021

What is React?

React is a JavaScript library for building user interfaces. Library is a collection of code, by re-using it we can make our application. React works as like this. React use some collection of Vanilla JavaScript code and create application, website, mobile application and desktop application user interface.

How do we use React?

When we use react we only needed to include f JavaScript files to get everything working.

<html>
<head>
<meta charset="utf-8">
<title>Hello world</title>
<!-- Script tags including React -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/reactdom.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js">
</script>
</head><body>
<div id="app"></div><script type="text/babel">
ReactDOM.render(
<h1>Hello world</h1>,
document.querySelector('#app')
);
</script></body>
</html>

This is the example of Hello world of a React website. This JavaScript code is a single line that dynamically adds Hello world to the page.

How does React work?

React does not directly on the browser’s DOM (Document Object Model), but it works on a virtual DOM and manipulating the document in the browser after changes to our data (which can be quite slow) it resolves changes on a DOM built and run entirely in memory. After the virtual DOM has been updated, React intelligently determines what changes to make to the actual browser’s DOM.

What is JSX?

JSX is JavaScript XML. JSX is as like HTML tag where we type JavaScript expression by using {} curly brace.

//HTML
<div> 
   Hello
</div>//JSX
<div> 
   {'Hello'. toUpperCase
</div>

React Props

Props is a keyword of React by which properties and is being used for passing data from one component to another. React Props are like function arguments in JavaScript and attributes in HTML. To send props into a component, use the same syntax as HTML attributes

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

function App() {
  return (
  <div>
     <Welcome name="Kulsum" />      
     <Welcome name="Polash" />      
</div>
  );
}

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

React Key

React ‘key’ is a unique Identifier, it is a special string attribute you need to include when creating lists of elements in React. Keys are used to React to identify which items in the list are changed, updated, or deleted. In other words, we can say that keys are used to give an identity to the elements in the lists.

const stringLists = [ ‘Karim’, ‘Sohel’, ‘Polash’, ‘Lima’ ];const updatedLists = stringLists.map((strList)=>{<li key={strList.id}> {strList} </li>;});

Higher-order Component

A higher-order component (HOC) is a function that takes a component as parameter and returns a new component (-react docs). A HOC is an advanced technique for reusing logic in React components. It is a pattern created out of React’s compositional nature.

HOCs basically incorporate the don’t-repeat-yourself (DRY) principle of programming, which you’ve most likely come across at some point in your career as a software developer. It is one of the best-known principles of software development, and observing it is very important when building an application or writing code in general.

React State

State is dynamic storage of database, which is save our data of the component. Mordant way of store data is use hook.

const[showData, setShowData] = useState(false);

This hook return a value and a seter function. State is a dynamic component, when state change, its start to ready for show data.

Lifecycle Effects

This is a normal JavaScript function. When a component is created, updated or deleted this function will be run. This all is managed by ‘useEffect Hook’

React.useEffect(() => {
  console.log('component loaded')
}, []);

The first Argument run when the component is created, and then next time when it will run it depends on second argument ‘[ ]’ . we can set a value by which when second time it will run.

React.useEffect(() => {
  console.log('component loaded')
}, [showData]);

Context-API

When we need to use some data in various component we use context-API, Context provides a way to pass data through the component tree without having to pass props down manually at every level. Context is designed to share data that can be considered “global” for a tree of React components, such as the current authenticated user, theme, or preferred language.

import React, { createContext, useState } from "react";export const UserContext = createContext();function App() {
const [loggedInUser, setLoggedInUser] = useState({});
return (
<UserContext.Provider value ={[loggedInUser, setLoggedInUser]}><Router>
<Header></Header>
<Switch>
<Route path="/home">
<Home></Home>
</Route>
<Route path="/login">
<Login></Login>
</Route>
<Route exact path="/">
<Home></Home>
</Route>
</Switch>
</Router>
</UserContext.Provider>
);
}
export default App;