covid-19-tracker using React with Typescript

Abhilash Sadasivan Sakunthala — Fri, 18 Sep 2020 13:54:25 +0000

please check it here: https://itsmeab.github.io/covid-19-tracker/
git hub URL: https://github.com/itsmeAB/covid-19-tracker

Oh... It is really amazing when start using React with Typescript. It is giving more effectiveness in development (my opinion).

Anyone can find free APIs for getting the covid19 details.
I referred this one for COVID-19 details: https://disease.sh/

I used to React Leaflet for showing the map. It is the first time I am using this library. https://react-leaflet.js.org/

Also used the Chart.js for showing the Line graph.

I don't think it is 100% perfect. But I will try to improve.
Feel free to make suggestions on the application and code.

2048 game using react

Abhilash Sadasivan Sakunthala — Fri, 14 Aug 2020 07:28:32 +0000

online demo is here: https://itsmeab.github.io/React-2048-game/
code is here: https://github.com/itsmeAB/React-2048-game

React understanding for Beginers

Abhilash Sadasivan Sakunthala — Fri, 12 Jun 2020 13:47:50 +0000

Its been a long time I am thinking to write something about react what I know.

React is javascipt library for building user interfaces. It was developed by facebook in 2011. Currently it is one of the most popular javascipt library for building user interfaces. Nowadays, React is dominating this place for a long.

We can say that components are the heart of React applications. Component is a piece of user interface. Simple react application or complex react application, whatever it is, using a number of components to create the final product. It is helping the developer for the coming changes in the future.
Every React application has an App component which refered to as the root component. This component will represent the entire application and it contains all other child components. So every react application is a tree of components.
consider an example

Component is implemented as Javascript class or function. After the introduction of react Hooks everyone is mostly using the Functional components.

class component

class classComponent extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>; // React element
  }
}

functional component

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

The class component contains state and render method mainly. State is that we want to display when the component is renderd and the render method is describing how the UI looks like. The output of the render method is a react element which is a simple javascript object that maps to a DOM element it is not a real DOM element. It is just a plain javascript object that represents the DOM element in the memory. The representation of DOM element in the memory is refered to as Virtual DOM. When we change a state of component, then it will get a new React element. Thn react will compare this element and its children with the previous one and figures out what is changed and then it will update the part of the real DOM to keep it in sync with the virtual DOM. So we do not need to attach any evend handlers to DOM elements.
In case of functional component, using return instead of render method. It will return also a React element. There is no state. React 16.8 introduced Hooks. So in functional componets using hooks which can be called to create and maintain state.

If functional component is the first choice then the code will be shorter and easier to read.

As I mentioned earlier React is a library. Because of that need to use seperate libraries like Redux for state management and react-router for routing and etc. But it is not a big deal and it will not affect the performance of application development.

React is react to state change.

will continue ...

Instagram - logo

Abhilash Sadasivan Sakunthala — Sun, 02 Feb 2020 15:45:57 +0000