ReactJs with typescript (Beginner)

Quotes of the day

Dreams can come true when you want to make it true.

Hi, Friends welcome to my new post. In this post, we'll talk about ReactJs with Typescript Chicha at the beginner level. So let's start with the command to create React App, the command is given below.
If you're not familiar with TypeScript then you should follow this link and cheat code like GTA game has.
Want ReactJs Cheat Code in Typescript? Here it is

Create React App.

npx create-react-app my-app --template typescript

I know you all know the command, but let others know that command too 😁. After that command, you'll notice that there's a new folder created on the folder that you selected. Open it on your choice of text editor, I open it on VScode and replace the App.tsx file code from my given code, but that's the basic code, nothing big deal, just simple JSX code 🥲. The code is given in Modify your code.

Modify your code

export default function App(): JSX.Element {
  return (
    <div>App</div>
  )
}

In the above code, you're seeing that the function has a return type that's JSX.Element, which helps to VScode in understanding the code block and gives you the emmet and code suggestion.
I simply change and run the application by giving the command in the terminal.

npm start

and your application starts and your default browser will open your beautiful React App, like mine, see below 😁.

Install Bootstrap

Well, It's not looking good right now 🙁. But we'll make it pretty. Now I'm gonna use Bootstrap in this React Application, it's like a makeup kit for this girl (React App). Run this command which is given below:

npm install bootstrap

Your Bootstrap is installed into your React Application, now let's smash that Bootstrap make-up kit on your React App 🫡. Now import the Bootstrap into index.tsx file, the code is given below.

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap'

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.Fragment>
    <App />
  </React.Fragment>
);

reportWebVitals();

Implement logics

Now we're all set. She has now makeup on it and now let's implement our logic on it, The very simple and worldwide example is Count. We'll implement the counting by clicking the increment button and decrement button and we'll use the useState() hooks for this.

Change the App.tsx file again with the code given below.

import { useState } from "react"

export default function App(): JSX.Element {

  const [count, setCount] = useState<number>(0)

  const increment = () => {
    setCount(count + 1)
  }

  const decrement = () => {
    if (count > 0) {
      setCount(count - 1)
    }
  }

  return (
    <>
      <div className="d-flex w-full justify-content-around align-items-center pt-5">
        <button type="button" onClick={decrement} className="btn btn-danger w-25">-</button>
        <h1 className="display-5 fw-normal">{count}</h1>
        <button type="button" onClick={increment} className="btn btn-primary w-25">+</button>
      </div>
    </>
  )
}

As you've seen in the useState<number>(0) hook, it is a generic type in the typescript, you can also define the initial value or default value type by using generic type hooks or you can skip this generic type, it's up to you, but this will resolve our understanding of DS (Data Structure). because when we know about the DS or data then we also know their predefined functions or inbuilt functions of the datatype.
Now save the file and see the output.

Kawai 😍
That's it for this post, In the next blog we'll discuss how the parent feeds the data to his child.
Gooooooooood Byeeeeeeeeee....