Тёмный

Build a Browser Code Editor in React (Monaco React Editor) 

Nikita Dev
Подписаться 8 тыс.
Просмотров 33 тыс.
50% 1

Опубликовано:

 

25 окт 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 73   
@ajaykris7
@ajaykris7 8 месяцев назад
I have been looking for this the longest time.. great tuttorial!
@ejirothankgod6585
@ejirothankgod6585 7 месяцев назад
This is Nice...I'd try it soon. Great Work Nikita!
@nprn_x
@nprn_x 4 месяца назад
Really appreciated this! Keep up the great effort.
@real23lions
@real23lions 6 месяцев назад
3:00 start of Monaco code editor 5:47 Language selector 15:28 Output box
@abhaykanwasi881
@abhaykanwasi881 8 месяцев назад
Great content keep it bro... it's something totally new
@AmanKumar-mz3oc
@AmanKumar-mz3oc Месяц назад
Thanks man you helped me a lot!
@harryshuman9637
@harryshuman9637 7 месяцев назад
Can you also do a video explaining how to setup a basic project, what tools you use, what difference is between all the Angulars, JNodes, Reacts and whatchamacallits, etc. I'm an embedded systems developer, and web-development is like a whole different planet.
@anasstber7584
@anasstber7584 8 месяцев назад
Hey Nikita! Thanks so much for the videos, they are AMAZING literally! by the way, excuse that i will ask something outside of the scope of this video, and the reason is i wanna make sure you can see my comment, i just watched your custom Hook useQuery video (wonderful explanation), however what you did is very similar to the TansTack useQUery library, if you are familiar with it, and so that's why I'm confused, why would you build it instead of just doing Tanstack, there is definitely something you know that we may not. Please explain, thank so much in advance!!!
@mahrus.rohisyam
@mahrus.rohisyam 4 месяца назад
Great video, Nikita, may I ask you? How do we enable the snippet when we are typing?
@nikita-dev
@nikita-dev 4 месяца назад
What do you mean by that? Are you talking about my VSCode editor, or the in-browser editor?
@harryshuman9637
@harryshuman9637 7 месяцев назад
Very nice, thanks
@myke6972
@myke6972 5 месяцев назад
is it possible to put like a file explorer? just like vscode? where you can drag and drop images, files, etc. also, is it also possible for monaco to run HTML CSS JAVASCRIPT and see the preview of the output?
@JaiminPatel-q8o
@JaiminPatel-q8o Месяц назад
great tutorial, but why the api is not working?
@frustratedsid2312
@frustratedsid2312 7 месяцев назад
This tutorial is the best. Can you please make another video where we can change the highlighting of the code?
@aakashchaudhary2609
@aakashchaudhary2609 Месяц назад
Can we add this project to our resume? This seems preety good project
@ayushrajpanda8950
@ayushrajpanda8950 7 месяцев назад
what are language versions for c and c++ sir
@deepakjoshi3347
@deepakjoshi3347 8 месяцев назад
Hey bro really appreciate your content but can you tell me how to add c/c++ as they have not specified versions like other langugaes???😅😅
@AvikNayak_
@AvikNayak_ 5 месяцев назад
Please tell me if you get a solution
@kunalpal3287
@kunalpal3287 2 месяца назад
@@AvikNayak_ add cpp version 10.2.0 with below snippet cpp: ` #include using namespace std; int main() { cout
@shwetanshu13
@shwetanshu13 5 месяцев назад
Thank you so much for the tutorial bruv
@ParthaSutradhar
@ParthaSutradhar 6 месяцев назад
Can we do Javascript Debugging here within Manaco Editor?
@aayushpatidar27
@aayushpatidar27 6 месяцев назад
How can I get keyword suggestion of the selected language?
@dnyaneshwarmuley
@dnyaneshwarmuley 4 месяца назад
Great work, How to add code auto complete feature just like java script for other languages ?
@nikita-dev
@nikita-dev 4 месяца назад
there are only a few languages that have intellisense supported out of the box, so there’s not an easy way to add it for other languages
@keshvi1699
@keshvi1699 2 месяца назад
Can python be included in language options?
@hwapyongedouard
@hwapyongedouard 5 месяцев назад
nice nice, can we store the code as Jason or plain text ?
@nikita-dev
@nikita-dev 5 месяцев назад
yes you can store it as plain text
@gamithuarunod4026
@gamithuarunod4026 Месяц назад
please can you tell me if the code editor can get user inputs after executing the code. like using a Scanner in java to get keyboard inputs. can we do that with your code
@BullishMaze
@BullishMaze Месяц назад
no
@vienong2772
@vienong2772 5 месяцев назад
How to enter data from the keyboard?
@mystories878
@mystories878 5 месяцев назад
take love bro
@aakashrajbhar25
@aakashrajbhar25 7 месяцев назад
How to take input and run the output
@sumitsinha995
@sumitsinha995 6 месяцев назад
Great man😊
@tokaa6762
@tokaa6762 6 месяцев назад
When you import "editor" at 3:30, what do you do to show the little popup for import ?
@nikita-dev
@nikita-dev 6 месяцев назад
ctrl + space
@frustratedsid2312
@frustratedsid2312 7 месяцев назад
Heyy... Are there any limitations for the number of API requests that we can make ?
@nikita-dev
@nikita-dev 7 месяцев назад
There probably is, I would check the documentation
@rishisingh1034
@rishisingh1034 6 месяцев назад
how can i include c++ language options??
@vannakvy9109
@vannakvy9109 4 месяца назад
How do we handle input? for example: name = input("Enter the name: ")
@nikita-dev
@nikita-dev 3 месяца назад
Not sure I understand what you mean by this, can you explain more? Are you trying to prompt the user for input through the code written in the editor?
@vannakvy9109
@vannakvy9109 3 месяца назад
@@nikita-dev Thanks for the reply. I found the solution. I found they use xtermjs for making terminal on the browser and use websocket protocol.
@RahulKumar-jo1yq
@RahulKumar-jo1yq 3 месяца назад
@@nikita-dev Yes, How can we take input from user?
@abhaytiwari6411
@abhaytiwari6411 8 месяцев назад
hello broo can you make one video on how to make video transcoder using ffmpeg and nodejs. btw thanks for making great tutorial.
@Shy_Dev
@Shy_Dev 14 дней назад
hey can we add AI in this code editor and if poosible how can i add he AI in this code editor. If that was possible just imagine how cool will it be
@sajalmondal2057
@sajalmondal2057 4 месяца назад
Thanks ❤
@PawanSingh-i5e5g
@PawanSingh-i5e5g 6 месяцев назад
How to give input in this ?
@Omega23-mv9hx
@Omega23-mv9hx 6 месяцев назад
bro but how we can take user input
@PRISM600
@PRISM600 5 месяцев назад
How can i add C++ here? I tried with cpp different version but couldnt able to execute it for cpp,,it would be helpfull if you guide me with this..Thank you..
@sanvisingh9512
@sanvisingh9512 2 месяца назад
Found method to do this??
@PRISM600
@PRISM600 2 месяца назад
@@sanvisingh9512 i didn't implemented, But u have to create your own api for that, Create an api where all those languages are available snd loop through it just like the tutorial. Btw i added input section.
@sanvisingh9512
@sanvisingh9512 2 месяца назад
Use version 10.2.0 for cpp and it'll work const getRuntimes = async () => { const response = await API.get("/runtimes"); console.log(response.data); }; and you cn run this to find all other available languages and their versions. Thank You!
@sanvisingh9512
@sanvisingh9512 2 месяца назад
@@PRISM600 Yepp Ithink so there is a feature in the API itself and it takes input using stdin in the API post call
@JohnsonThieu
@JohnsonThieu 7 месяцев назад
Can this be done without using an API?
@sihamharimech1232
@sihamharimech1232 5 месяцев назад
well I think you can do it but you will have to hardcode the execution and the compilation process for every langages and also you will have to implement security functions to prevent any injections
@francopoffo
@francopoffo 8 месяцев назад
does it work on next.js pages router?
@nikita-dev
@nikita-dev 8 месяцев назад
yes, you’ll just need to add “use client” to the top of the file that uses the Editor component
@aleksey6151
@aleksey6151 8 месяцев назад
W tutorial
@sihamharimech1232
@sihamharimech1232 5 месяцев назад
Thank u
@BishalLama-fh8bx
@BishalLama-fh8bx 5 месяцев назад
How to add HTML and CSS??
@AvikNayak_
@AvikNayak_ 4 месяца назад
Did you figure it out?
@BishalLama-fh8bx
@BishalLama-fh8bx 4 месяца назад
@@AvikNayak_ no can you help me
@misbahfatma5420
@misbahfatma5420 5 месяцев назад
The Piston Api wont expire ever?
@Zina-ox2dm
@Zina-ox2dm 4 месяца назад
the endpoint is alrdy unavailable for me wbu?
@misbahfatma5420
@misbahfatma5420 4 месяца назад
@@Zina-ox2dm Nah its working for me.
@RahulJha-jv7gt
@RahulJha-jv7gt Месяц назад
till 16:00
@RahulJha-jv7gt
@RahulJha-jv7gt Месяц назад
4:55
@whizzie3367
@whizzie3367 4 месяца назад
Wow
@parthjadhav3418
@parthjadhav3418 6 месяцев назад
Is this API free or paid??
@nikita-dev
@nikita-dev 6 месяцев назад
free
@abyan-majid
@abyan-majid 4 месяца назад
16:42
@arupde6320
@arupde6320 5 месяцев назад
be regular man .
Далее
Create a Modal With React Portals
13:11
Просмотров 6 тыс.
Build a Code Editor in React
10:11
Просмотров 9 тыс.
новое испытание
00:40
Просмотров 149 тыс.
How To Build CodePen With React
30:26
Просмотров 158 тыс.
How to Crop Images in React (react-image-crop)
38:25
Просмотров 21 тыс.
Build Your Own Cloud Web IDE | Repl.it Clone
1:21:53
Просмотров 24 тыс.
How to Dockerize a MERN App | Docker Compose
44:00
Просмотров 2,7 тыс.
новое испытание
00:40
Просмотров 149 тыс.