How to build a Pixel Art Drawing App in React | React Tutorial
React tutorial on how to build a Pixel Art Drawing App. We go over how to dynamically generate pixel grid based on users input for width and height, how to set up a color picker (with many different options for it), how to set up hover states for individual pixels, how to actually color them, and how to export the finished artwork into a PNG sprite.
See the full project in action on SandBox: https://codesandbox.io/s/pixel-art-dr...
Find code from this video on my Github profile page: https://github.com/alekspopovic/pixel...
Find text version of this tutorial on my website: http://aleksandarpopovic.com/How-to-b...
Music in the video is from StreamBeats collection by Harris Heller.
Blog: https://aleksandarpopovic.com/blog/
Github: https://github.com/alekspopovic/
Twitter: / alekswritescode
Instagram: / aleks.popovic
Chapters:
0:00 Intro
0:46 Initial project file setup
4:22 App component
4:50 Editor component
7:50 Editor useState
13:13 Color picker
16:31 Drawing panel
18:05 Generating rows
20:16 Row component
20:30 Generating pixels per row
21:40 Pixel component
22:15 Pixel useState
24:37 Changing pixel color with onMouse and click events
28:36 Exporting as PNG
31:46 Outro