1. fabiobiondi.io
REACTTYPESCRIPT
for Beginners

2. fabiobiondi.io
Google Developer Expert
Microsoft MVP
FE Training
Community Founder

3. fabiobiondi.io
Software developer
( Talentium )
Microsoft 365 React
ü Computer science lover
ü Sviluppatore focalizzato sul mondo Microsoft
ü In continuo movimento e crescita insieme alle
nuove tecnologie
ü Alla ricerca di nuove community / persone con
cui scambiare idee e best practice
Eduard Andrei Capanu

4. fabiobiondi.io
• Node / NVM / NPM
• Create React Apps
• React 16.13.x + & React Hooks
• Typescript 3.9+
• JS Deps: Bootstrap & Axios
• Azure Cognitive Service
TECHNOLOGIES

5. fabiobiondi.io
• CodeSandbox.io
• PostMan
• json2ts.com
TOOLS

6. fabiobiondi.io

7. fabiobiondi.io
DOWNLOAD & INSTALL
Node LTS version
NODE JS
Website

8. fabiobiondi.io
nvm
Available local
Node JS versions
Current Node JS version

9. fabiobiondi.io
NVM Windows
Repository
(available for Mac/Linux too)

10. fabiobiondi.io
Create React App

11. fabiobiondi.io
ENABLE TYPESCRIPT
SUPPORT
PROJECT NAMECREATE REACT APP
(CLI TOOL)

12. fabiobiondi.io
Install
Project’s DependenciesProject Folder

13. fabiobiondi.io
Render <App> into DOM #root element

14. fabiobiondi.io
This is JSX
( neither a string nor HTML) 😱
“className” is the main
difference with standard HTML
Expressions {…}

15. fabiobiondi.io
DEMO TIME :)

16. fabiobiondi.io
<SentimentBar>
(Azure Text Analytics Service)
Translation TextArea (not editable)
(Azure Translator Service)
TextArea
(text to translate)

17. fabiobiondi.io
codesandbox.io

18. fabiobiondi.io
useStateHOOK

19. fabiobiondi.io
1. Requires React 16.8
2. Available in functional components
3. Handle local component state
4. Provide state &
a setState function to update it
5. When state is updated,
the component is rendered
useState

20. fabiobiondi.io
STATE
SET STATE
function
REACT Hook
STATE TYPE
INITIAL VALUE
COMPONENT IS
RENDERED

21. fabiobiondi.io
CONTROLLEDFORMS

22. fabiobiondi.io
3. ALWAYS IN SYNC
WITH INPUT value
1. FORM STATE
2. COMPONENT IS
RENDERED
Binding

23. fabiobiondi.io
DO SOMETHING with
‘value’ state
AVOID DEFAULT
FORM BEHAVIOR

24. fabiobiondi.io
COMPONENTS

25. fabiobiondi.io
React Import
Component Props

26. fabiobiondi.io
useEffectHOOK

27. fabiobiondi.io
Function is invoked
when “props.text”
changes
REACT HOOK

28. fabiobiondi.io
@capanu2
Eduard Capanu
Eduard Capanu (eduardcapanu2)
Eduard Capanufabiobiondi.io

29. fabiobiondi.io
FACEBOOKGROUPS