No BS TS #20 - Typescript/React - Setup and Properties

Let's check out how Typescript works in React by setting up a Create React App (CRA) project with a Typescript template and then investigate how to do properties in Typescript.

00:00 Introduction
00:27 Creating the React App
02:17 Creating the Heading component
04:22 Components with children
06:01 Complex properties
07:42 Event handlers
09:07 useCallback
10:07 Outroduction

👉 What's my theme? Night Wolf [dark blue]
👉 What's that font? MonoLisa

💢 Watch our other videos:

Thank you for watching this video, click the "SUBSCRIBE" button to stay connected with this channel.

#typescript #NoBSTS #react

[denisosullivan]

fyi, using react v18 I was getting error about children in Box: React.FunctionComponent, one solution was to define an interface for BoxProps like so:
interface BoxProps {
children?: React.ReactNode;
}

and use like:
const Box: = ({ children }) => (

[ManeelxAkosAdor]

I love too see you are diving into react+typesceipt again!!

[abubakar-emumba]

Thanks JHerr, Need more lessons on Typescript, React, Redux and Hooks.

[thehaptiK]

your celebrations always make me happy

[iuliancarnaru]

If you are using React 18 and TS is complaining about Box children props ... one fix will be to do:

const Box: = ({ children }) => (
<div>{children}</div>
);

[bensonmwaura]

Amazing series! Wonder what insights you have for svelte/typescript?

[berkaygurcan]

Even though the code part is the same in the minute 5.53, I get an error. It was fixed when I reverted the Functional component to its original state.

[seahindeniz]

Great episode! Thanks for taking the time for making videos.
But, sometimes when I watch your videos, I just can't get rid of the thought about the layout of your webcam stream. May I ask, have you ever think about changing the canvas from a square layout to other layouts? Like, transparent bg by removing the bg of your webcam stream to gain more space for showing codes, etc., or using a circle layout (which is more elegant than others IMO) for reducing the space consumption and also keeping a portion of your background? Might give it a shot if you haven't already done it before 🤔🙂

[yaserghananwi]

Hi, Jack, thank you for this episode item very nice for start react with typescript, I have question why you are use useCallback and not use function like this
const handler = (item: string) => alert(item)
best regards,

[sebastianchaca]

Hey jack ! how can I use ts with vite ? im having type errors in some functions, but the vite app still running and its not showing any errors in the console/terminal. Im using the vite react ts template. this

[hillcountrydev]

when I read the ts cheat sheet React.FC is frowned upon. is it all subjective? your thoughts ? thanks for the awesome ts/react content!

[falconq]

interface BoxProps {
children?: React.ReactNode;
}

const Box: = ({ children }) => (
<div
style={{
padding: '1rem',
fontWeight: 'bold',
}}>
{children}
</div>
);