react fc typescript 1

react fc typescript

const PrintName: React.FC

Here is what the above code is Doing:
1. We’re importing the `React` library from `react`.
2. We’re creating a `Props` interface that defines the shape of the props that our component will receive.
3. We’re creating a `PrintName` component that takes in a `Props` object and returns a `ReactElement`.

Now, let’s create a `PrintName` component that takes in a `name` prop and prints it out.

“`tsx
import React from ‘react’

interface Props {
name: string
}

const PrintName: React.FC = ({ name }) => {
return

{name}

}

export default PrintName
“`

Here’s what the above code is doing:
1. We’re importing the `React` library from `react`.
2. We’re creating a `Props` interface that defines the shape of the props that our component will receive.
3. We’re creating a `PrintName` component that takes in a `Props` object and returns a `ReactElement`.
4. We’re exporting the `PrintName` component so that it can be used in other files.

Now, let’s use the `PrintName` component in our `App` component.

“`tsx
import React from ‘react’
import PrintName from ‘./PrintName’

const App: React.FC = () => {
return (

)
}

export default App
“`

Here’s what the above code is doing:
1. We’re importing the `React` library from `react`.
2. We’re importing the `PrintName` component from `./PrintName`.
3. We’re creating an `App` component that takes in no props and returns a `ReactElement`.
4. We’re exporting the `App` component so that it can be used in other files.
5. We’re using the `PrintName` component inside the `App` component.

Now, let’s run the app and see what happens.

“`bash
$ yarn start
“`

You should see the following output in your browser:

![PrintName](./images/print-name.png)

## State

Now, let’s create a `Counter` component that takes in a `count` prop and prints it out.

“`tsx
import React from ‘react’

interface Props {
count: number
}

const Counter: React.FC = ({ count }) => {
return

{count}

}

export default Counter
“`

Here’s what the above code is doing:
1. We’re importing the `React` library from `react`.
2. We’re creating a `Props` interface that defines the shape of the props that our component will receive.
3. We’re creating a `Counter` component that takes in a `Props` object and returns a `ReactElement`.
4. We’re exporting the `Counter` component so that it can be used in other files.

Now, let’s use the `Counter` component in our `App` component.

“`tsx
import React from ‘react’
import Counter from ‘./Counter’

const App: React.FC = () => {
return (

)
}

export default

Similar Posts