React with TypeScript

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!