본문 바로가기

React4

[React] Get Keyboard Input (TypeScript) Recently, I wanted to get keyboard input on the React application. I thought there is maybe someone like me. So let's figure out this. Create a Test Project $ npx create-react-app react-test --template typescript Implement I tried many things to implement this. Like onKeyDown, onKeyPress in div tag or, addEventListener to window or document in useEffect. Finally, I found the key point !! import .. 2020. 12. 28.
Getting Started with React + Typescript + TailwindCSS In this posting, we will figure out to create a project with CRA(Create-React-App) with Typescript and TailwindCSS. CRA with Typescript Let's create a project first. $ npx create-react-app --template typescript Move on to the project folder. $ cd Let's run our app as a test. $ yarn start Add TailwindCSS Now, let's install TailwindCSS. $ yarn add tailwindcss postcss If you successfully installed .. 2020. 12. 10.
[React] useState Hooks Overview useState Hooks is used when managing a state value of React component. State value can be understood as something like a local variable of React component. Therefore, even if the same component is used, the internal state value is managed separately for each component. const [value, setValue] = useState(initialValue); The syntax is like the above code. The useState Hooks returns state v.. 2020. 9. 2.
[React] prop-types prop-types is the official react tool, runtime type checking for React props and similar objects. But, I think if you need this feature, TypeScript is a better choice. Installation You can install prop-types through yarn or npm. $ yarn add -D prop-types $ npm i -D prop-types Usage Example prop-types helps to improve readability and ease maintenance by clearly setting the information of type as t.. 2020. 9. 2.