ReactJs with typescript (Beginner)
Tags: react, typescript, javascript, frontend
Published: 2023-09-17 10:53:23

**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](https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html) and [cheat code](https://www.typescriptlang.org/cheatsheets) like GTA game has.
Want ReactJs Cheat Code in Typescript? [Here it is](https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html)

## 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

```typescript
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 😁.

![React App](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qkjzrnvdivl8eex7s1ij.png)

## 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.

```typescript
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.

```typescript
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.

![output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jdmdd1tfwl1okdtm87q2.png)

**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....