How to Code a Vim Tutor with React and CodeMirror
In this video, we go over how to build a Vim tutor with React and CodeMirror in under 60 lines of code. We start off by setting up the React and Tailwind CSS frontend with CodeMirror to allow the user to run Vim commands on an editor. Then we create a challenge to teach the user about Vim keybindings. Finally, we add a React hook counter to display the number of times the programmer completed the Vim challenge.
📖 Code - https://github.com/SuboptimalEng/codi...
🎥 YouTube - / suboptimaleng
💻 GitHub - https://github.com/SuboptimalEng
🐦 Twitter - / suboptimaleng
🧵 Threads - https://www.threads.net/@suboptimaleng
📸 Instagram - / suboptimaleng
== [ Resources ] ==
Project Inspiration: https://www.vim.so
GitHub Code: https://github.com/SuboptimalEng/codi...
Tailwind CSS: https://tailwindcss.com/docs/guides/c...
CodeMirror: https://www.npmjs.com/package/@uiw/re...
== [ Timestamps ] ==
00:00 What is Vim?
01:06 Vim Tutor Demo
01:58 Set up React with Tailwind
04:03 Set up React with CodeMirror
07:38 Build Simple Vim Editor
11:43 Create Realistic Vim Game
15:12 Update Vim Test Automatically
17:00 Create Vim Tutor Rules
== [ Tags ] ==
#suboptimal #reactjs #vim
Watch video How to Code a Vim Tutor with React and CodeMirror online without registration, duration hours minute second in high quality. This video was added by user Suboptimal Engineer 25 September 2021, don't forget to share it with your friends and acquaintances, it has been viewed on our site 5,486 once and liked it 77 people.