React with TypeScript

prsna1230 — Sun, 27 Aug 2023 15:56:34 +0000

Hey Guys! Imagine you're building a house. In the world of web development, that house is your application, and React is the tool you use to construct it. Now, think of JavaScript and TypeScript as the building materials. One's like clay, versatile and well-known, while the other's akin to a modern alloy, offering precision and strength. In this journey, we'll explore how these materials shape your creation, and why sometimes, the choice between them can make all the difference.
Anyway the end result is going to be a beautiful house(outer appearance) but the materials which we are using going to impact lot, like lifespan, comfort etc. In this blog we are going to see the difference of using React with JS and (Typescript)TS.

Difference 1

// ParentComponent.js
import React from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const message = 'Hello from Parent';

  return (
    <div>
      <h1>Parent Component</h1>
      <ChildComponent message={message} />
    </div>
  );
}

export default ParentComponent;

// ChildComponent.js
import React from 'react';

function ChildComponent(props) {
  return <p>Received message: {props.message}</p>;
}

export default ChildComponent;

In this example, the ParentComponent sends a prop called message to the ChildComponent. The ChildComponent receives the prop and displays it in a paragraph element.

Let's see the same implementation in typescript

// ParentComponent.tsx
import React from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const message: string = 'Hello from Parent';

  return (
    <div>
      <h1>Parent Component</h1>
      <ChildComponent message={message} />
    </div>
  );
}

export default ParentComponent;

// ChildComponent.tsx
import React from 'react';

interface ChildProps {
  message: string;
}

function ChildComponent({message}: ChildProps) {
  return <p>Received message: {message}</p>;
}

export default ChildComponent;

In the TypeScript version, we've defined an interface ChildProps for the props that the ChildComponent expects. The message prop is specified as a string type in the interface. This adds type safety and ensures that the component receives the correct prop type.

The rest of the code remains similar to the JavaScript version, with the main difference being the use of TypeScript types and interfaces to define prop types.

Difference 2
In the world of JavaScript, you can call a component's file index.js or index.jsx, and they mean the same thing. But, if you're using TypeScript, remember to name it as index.tsx. If you forget, React won't recognize it as a component; it will think it's just a TypeScript file.

Difference 3
Let's explore a simple sample project in React with TypeScript to grasp how to utilise state effectively.

import React, { useState } from 'react';

function App() {
  const [inputValue, setInputValue] = useState<string>('');
  const [namesList, setNamesList] = useState<string[]>([]);

  const handleAddClick = () => {
    if (inputValue.trim() !== '') {
      setNamesList([...namesList, inputValue]);
      setInputValue('');
    }
  };

  return (
    <div>
      <h1>Input and Display Example</h1>
      <input
        type="text"
        value={inputValue}
        onChange={(e)=>setInputValue(e.target.value)}
        placeholder="Enter a name"
      />
      <button onClick={handleAddClick}>Add</button>
      <div>
        <h2>Names List</h2>
        <ul>
          {namesList.map((name, index) => (
            <li key={index}>{name}</li>
          ))}
        </ul>
      </div>
    </div>
  );
}

export default App;

This code creates a simple web application that allows users to input names. When a name is entered and the "Add" button is clicked, the name is added to a list of names. The list of names is then displayed on the web page.

Happy Learning!

Unraveling JavaScript's Immutable Secrets: The Dance Between Primitives and Objects

prsna1230 — Fri, 26 May 2023 10:45:16 +0000

Hi, Do you know that Javascript is one of the most popular programming language. In the mean time it is one of the most hated programming language too. Do you know why? Because javascript contains lot of weird stuffs with amazing capability in performing operation. On this line, Today let we explore one of the most missed concept to learn as beginners.

Let we start with an example:

let a = 10;
let b = a;

In the previous code, I just assigned value 10 to a variable a, and I am reassigning the a to b. you may thinking what is the issue in it.? let me give a another code snippet.

here I assigning an obj1 to obj2. Very similar to previous code. But there is a difference. let we see the difference

let a = 10;
let b = a;
b = 20;
console.log(a) // 10
console.log(b) // 20

In the code, I modified the value of b as 20 but it doesn't affect the value of the a. as you see on the console.log of a gives still 10 but b is 20. you may think it is simple. Yes it is.! but behind this, there lies a concept called mutability .
*Generally Primitives are mutable in JS. *
oh! OK. what is primitives.?
In JS Primitives are numbers, string, boolean. whereas Non Primitives are Array, objects.

Let we see the difference between them:
If we declare a variable with string, number, or boolean it will store its data. whenever we try to modify that data it will not overwrite rather it will create a new copy in different memory address.

but, When a variable is assigned with non-primitives like array or object, that variable holds reference to that non-primitive ,instead of that as value.

If you noticed I changed the obj2 but it is affecting the obj1 as well, the reason is non primitive variable stores address not data.

Hope This is helpful.
Cheers,
Happy Learning.!

DEV Community: prsna1230

React with TypeScript

Unraveling JavaScript's Immutable Secrets: The Dance Between Primitives and Objects