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
Смотрите видео How to Code a Vim Tutor with React and CodeMirror онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Suboptimal Engineer 25 Сентябрь 2021, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 5,486 раз и оно понравилось 77 людям.