In this video we are going to add styles to our react application. I've pre-made the panel.css so you have to just copy that file and apply classes to the react elements.
This video is outdated, you can find an updated version here https://youtu.be/4UCwA2n4gsA
In this react tutorial i'm showing how to use the React Query library to fetch the data in your React application. You can forget about the useEffect hook for data fetching with this library.
The API looks is similar to React-Apollo but for REST APIs instead of GraphQL.
? Twitter: https://twitter.com/ivanov_dev
I write about React and TypeScript there
Repo: https://github.com/satansdeer/react-query-tutorial
Discord: https://discord.gg/KPh8Vvb
...
https://www.youtube.com/watch?v=GE-waX4jmdA
In this video we will test a react component that uses fetch to get the data on mount
Code: https://github.com/satansdeer/test-fetch-effect-components
Discord: https://discord.gg/KPh8Vvb
Free React Testing Checklist: http://eepurl.com/c_8tzP
...
https://www.youtube.com/watch?v=yTZ-txdrHdY
Games from this video:
https://codepip.com/games/flexbox-froggy/
http://www.flexboxdefense.com/
https://codepip.com/games/grid-garden/
https://flukeout.github.io/
https://cssbattle.dev/
Where to find me:
Discord: https://discord.gg/KPh8Vvb
Twitter: https://twitter.com/SatansDeer
...
https://www.youtube.com/watch?v=iYFx4Iy0hWk
Here I show how to test your Javascript code. We will test pure functions (they are the easiest to test, because they don't have side effects). Then we test a function with side effects and we mock a global function using Jest. And finally we test an object method. We also talk about AAA (Arrange Act Assert) pattern here.
Code: https://github.com/satansdeer/test-example
DIscord Server: https://discord.gg/KPh8Vvb
Free React Testing Checklist: http://eepurl.com/c_8tzP
#testing #javascript #jest #satansdeer
...
https://www.youtube.com/watch?v=_6xgbpOaLxA
I show how to use React with Typescript.
- How to define a component.
- How to specify props using types and interfaces
- How to define state
- How to handle events
Code: https://github.com/satansdeer/react-typescript-example
Discord: https://discord.gg/KPh8Vvb
Mailing List: http://eepurl.com/c_8tzP
...
https://www.youtube.com/watch?v=e5c_RfYqIhU
We use index access types (indexable types) and lookup types to "extract" the type of the interface field in Typescipt.
Code: https://gist.github.com/satansdeer/af21f5641515f968c34952589d95c25c
Discord Server: https://discord.gg/KPh8Vvb
...
https://www.youtube.com/watch?v=M_ca8iUOZFM
How to use React hook form with Material UI. Material UI provides the inputRef prop that makes it super easy to integrate with react-hook-form. If a component does not expose the inputRef property - we can use the Controller from react-hook-form with control from useForm hook call.
? Twitter: https://twitter.com/ivanov_dev
I write about React and TypeScript there
Code: https://github.com/satansdeer/react-hook-form-material-ui
Discord: https://discord.gg/KPh8Vvb
Free React Testing Checklist: http://eepurl.com/c_8tzP
#reactjs #react-hook-form #material-ui #materialui #reacthookform #satansdeer
...
https://www.youtube.com/watch?v=PquWexbGcVc
How to persist logged in state in your React Firebase application.
React Firebase Login Video: https://www.youtube.com/watch?v=unr4s3jd9qA
Example Repo: https://github.com/satansdeer/react-firebase-auth
My Discord Server: https://discord.gg/KPh8Vvb
...
https://www.youtube.com/watch?v=2Oz-OLB8FQQ