Very good ! For some reason tutorials showing the integration between functional programming React and Express have been rare to find. Kazakhstan can be proud of this education effort.
Amazing tutorial, thank you so much. I can't believe I found the solution on such a small channel, nobody explained it as well as you. Kazakhs are the best, привет от русского из Чехии :)
Ok. I can just say that how u made this tutorial is exactly how I am looking for them to be. Not long, like for an hour and more and very simple to understand. Good job!! keep up your work. Subscribed, looking for more and very pleasant voice to listen to.
I went through your video and it literally worked. I had gone through so many videos of connecting the frontend with the backend and the problem was my backend server was not launching. Thankyou a lot. And you are very pretty your brownie points love from India.
Good to see the React / front end was implemented in the functional style with useState and useEffect. The others I looked at used classes to communicate with the API.
I've been going in circles for about 3 days trying to figure out why I couldn't connect to mongodb with my react app, and now I understand it's because i'm supposed to have a backend server app running also. thanks for the help!
Hi Marina, Thank you for the tutorial. It's so helpful to me. But may i ask something that i still confused about : 1. in the userRoute.js (06.22) -> why you use route.get('/') ? why it's refer to home route? 2. in the server.js (07.20) -> why you use app.use() instead of app.get() ? are there any differences between these too for routing like this? Hope you can answer this question to help me understand about connection react and node.js. Thank you so much.
Hello) thanks so much 🙃app.get is an API route, while app.use is a middleware (function that is executed before going through API). ‘/‘ is simple the url of your express server - it is short from ‘localhost:port/‘ - it should be the same when you configure route in server and proxy in react 🙂 you can do app.get(‘/another-route’) in the server but in your React app you will also use this url to use the api
Good tutorial, but I dont know if this is the standard way of connecting express and react. Is it really necessary to have them in two different servers?
I was wondering how to deal both with front-end and back-end, and seems like this video helped me, thanks! I also wanted to ask. This is a regular way to build apps, like creating front-end and back-end folders, and inside them initialising their own npm projects?
In my app my front end directly corresponds with the database sending post and get requests to my google firebase. Is it a smart move? Or should I maybe keep my database URL away from potential hackers and do everything through the backend api?
Hello, I have a frontend built with React and a backend built with Node JS and Express. I am hosting the site with cPanel. How can I do this? Please help me.
this here is a holy grail for new developers I say, like that one hot Discrete Maths teacher you may never understand but her voice will always ring on your head to remind you about it so you have imposter syndrome of howd in the F you know the answer and suddenly you subscribe to her channel
Thank you for thinking about mobile phone watchers by zooming your vscode screen.. cant say how many vids I have seen where they are typing stuff zoomed out and expect you to be able to read anything!!
Your tutorials are awesome Marina ! as you too ! Thanks a lot !. Can you explain me how to deploy the app within the express connections all together please !!
Hi) i think I cover it in this video, there are few steps to connect, first to specify proxy backend address in client package.json file, then you configure api routes, fetching data, posting through axios. But at the end react and node are running separately
@@marinakim2929 okk...i thought we need to connect react file to node , but if they are running seperately then do we req to create a server for react or just upload the react build file as it is
Hello, it depends if you specified a proxy in client package.json file. If you specified then you can just write users otherwise you should write full localhost etc
Nice video! But I see you statically set your express port number to 3001, what happends when its deployed to e.g. heroku and its port number is dynamically set?
Yeah I used static port for simplicity :) thank you for the comment!! If you deploy to heroku you should install dotenv so you can store your port in .env file and set it to process.env.PORT || 3000
Hi there) it’s one of express.router methods, here’s a nice article on routes and controllers developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/routes
Марина, слышу что вы русскоязычная и это хорошо, спрошу. Зачем вы фетчите дату в useEffect? Он же срабатывает при каждом ререндере дома или вообще в изменении его структуры. Или я не прав? Пожалуйста, помогите разобраться, потому что я привык фетчить дату при событиях типо клика или сабмита, но вижу как некоторые делают это в хуке useEffect. Реакт изучаю совсем недавно из-за надобности по работе, обычно писал только бэкенд. И меня ставит в тупик этот хук. Почитав офф документацию написано, что отрабатывает в зависимости от установленных зависимостей, и изменении состояния этих зависимостей. В общем путаница
Здравствуйте) спасибо! Я использую useEffect потому что у меня не привязаны фетчи к кнопкам, а сразу с базы данных подтягиваются :) в юзэффект можно настроить когда именно он рендерится и обычно я пишу в скобках чтоб он срабатывал каждый раз когда в базе данных изменения происходят. Но я попробую сегодня сделать просто фетч) готовлю новое видео 😃😃
@@marinakim2929 то есть выходит без указания второго аргумента он не выполняет ререндере, а смотрит, каково состояние переменной, которая хранит в себе ответ с сервера? Хм, интересно, буду пробовать, думаю полезно если нужно сразу отобразить данные. Надеюсь я все так понял) Спасибо! Вы супер!
@@oliverreviews8496 в общем если вы привязываете к кнопке, то рендер происходит каждый раз при нажатии кнопки, а при использовании useEffect при указании второго аргумента рендер происходит только если происходят изменения в этом аргументе
Hi Marina, i hope your doing well.. your video i watched second video for react + node js connect but still i am getting error like this... if you don't min please help i will you my git repo link if you ok ??????????????????
i thought programmers has no life.. i have been wrong after watching this video.. lol you should add your cam on the corner side of the video when explaining the code :D
![Todo приложение на React для самых маленьких // Твое первое приложение [React, JavaScript, Tailwind]](/img/n.gif)
What would you like me to explain in the next videos?
How to build ?
@@guirocha6788 please check my latest video on building and deploying MERN app
@@guirocha6788 hi! I have a latest video on build and deploy ☺️
@@marinakim2929 ok , thanks Kim 😉
How you got into web dev and how'd you learn it:) Basically your journey hehe
Very good ! For some reason tutorials showing the integration between functional programming React and Express have been rare to find. Kazakhstan can be proud of this education effort.
I usually don't like videos, BUT this is exceptional! bravo lady!
Oh thank you so much 😃😃
Amazing tutorial, thank you so much. I can't believe I found the solution on such a small channel, nobody explained it as well as you. Kazakhs are the best, привет от русского из Чехии :)
Thank you for such short tutorial. You covered the topic under 15 mins... This is what I was looking for
And thank you for feedback 🥰
Thank you a lot! I was having a huge amount of problems with CORS. You have saved my life! :D
Thank you Albertoooo :))
Ok. I can just say that how u made this tutorial is exactly how I am looking for them to be. Not long, like for an hour and more and very simple to understand. Good job!! keep up your work. Subscribed, looking for more and very pleasant voice to listen to.
I went through your video and it literally worked. I had gone through so many videos of connecting the frontend with the backend and the problem was my backend server was not launching. Thankyou a lot. And you are very pretty your brownie points love from India.
Thank you so much Abhishek, it means a looot to me 😃☺️
Absolutely phenomenal tutorial, best one I've watched - easily explained, straight to the point.Thank you so much
🥰
Just amazing , u have just explain the things short and sweet and also very important thing for beginners.....
Good to see the React / front end was implemented in the functional style with useState and useEffect. The others I looked at used classes to communicate with the API.
You make it so simple and easy to follow. Short video to the points that we need.
Yahi Video Chaheko Thiyo mli.. thank You...❤❤
thank you! Made it sound so simple, I'll be following along.
I've been going in circles for about 3 days trying to figure out why I couldn't connect to mongodb with my react app, and now I understand it's because i'm supposed to have a backend server app running also. thanks for the help!
For what is this good for now?
I somehow try to learn coding but understand nothing
You were took those topics where most developers confused.. You are awesome, amazing work!
Thanks a lot for covering so quickly without beating around the bush😁👍🏼
and thank you for the feedback =)
Hi Marina, Thank you for the tutorial. It's so helpful to me. But may i ask something that i still confused about :
1. in the userRoute.js (06.22) -> why you use route.get('/') ? why it's refer to home route?
2. in the server.js (07.20) -> why you use app.use() instead of app.get() ? are there any differences between these too for routing like this?
Hope you can answer this question to help me understand about connection react and node.js. Thank you so much.
Hello) thanks so much 🙃app.get is an API route, while app.use is a middleware (function that is executed before going through API). ‘/‘ is simple the url of your express server - it is short from ‘localhost:port/‘ - it should be the same when you configure route in server and proxy in react 🙂 you can do app.get(‘/another-route’) in the server but in your React app you will also use this url to use the api
@@marinakim2929 Thank you for the explanation. I get it now :)
oh my god. This is what i needed! exactly! thank you for the lesson, god bless you!
Good tutorial, but I dont know if this is the standard way of connecting express and react. Is it really necessary to have them in two different servers?
I was wondering how to deal both with front-end and back-end, and seems like this video helped me, thanks!
I also wanted to ask. This is a regular way to build apps, like creating front-end and back-end folders, and inside them initialising their own npm projects?
u can simplify it and have them both start with one line by using a library called "concurrently"
This is awesome, made it look so simple. Thanks.
thank you for the feedback :)
I know nothing about express bu I start love it 🙂
not only your makeup is beautiful 😍, but also your have handful skills
Amazing to see beauty teaching programming
In my app my front end directly corresponds with the database sending post and get requests to my google firebase. Is it a smart move? Or should I maybe keep my database URL away from potential hackers and do everything through the backend api?
Once again with simple explanations you saved my day!
Thank you so much 😃😃
Hello, I have a frontend built with React and a backend built with Node JS and Express. I am hosting the site with cPanel. How can I do this? Please help me.
Hallo Marina Kim
Ich habe ein Frontend und ein Backend
Ich möchte sie verbinden
Kann man helfen?
vielen Dank
Hello :) after copying this my user will not render onto my web browser page - any guidance?
Hi there) what error do you get?
is that a mechanical keyboard? what is that? i like the sound of it..not so heavy sound like a mechanical one. Great video
In this case, what actually solved CORS issue ? that 'proxy' you injected to npm ?
Much helpful for newbie's, Great)) Keep it up.
Thank you Ashish ☺️
Thanks for this video Marina. It was done very well
This is really a great tutorial. Thank you for sharing this with us.....✌️✌️✌️👍👍
this here is a holy grail for new developers I say, like that one hot Discrete Maths teacher you may never understand but her voice will always ring on your head to remind you about it so you have imposter syndrome of howd in the F you know the answer and suddenly you subscribe to her channel
Which keyboard do you use? Probably one of the best sounding ones I've heard in a while! Nice tutorial btw...
Mac
@@fahisrahman I think that won't make any sound... Membrane keyboards generally don't!!
Great video, keep it up! 👍 Teaching is the best way of learning. Subscribed!
Wow thank you So much 😃🥰
Excelent. Nice work. Thanks a lot
thank u so much for this3.. keep up the good work
when i don't add "proxy" in package.json, why it still work ?
Where do you learn this from??
Your explanation is great , it is easy to follow!!!!
Thank you so much !
Thank you so much, I’m happy you like)) I read blogs, watch other less clear and updated videos and then try myself the easiest and simplest way)
@@marinakim2929 Which website do you recommend for reading these blog?
Your explanation was extraordinary 👍👍
Thank you so much 😃
Thank you for thinking about mobile phone watchers by zooming your vscode screen.. cant say how many vids I have seen where they are typing stuff zoomed out and expect you to be able to read anything!!
Thanks a lot for this tutorial.. it's very helpful for me..
Your tutorials are awesome Marina ! as you too ! Thanks a lot !. Can you explain me how to deploy the app within the express connections all together please !!
Hi)) thank you so much.. please check out some later videos for this🥰
Hey Marina this is a good video. Make more please
U have controller and route specified but u didn't tell about the models ... , Is that requires or not ??
i get an error: TypeError: res.json is not a function
i copied one by one of your text..
what should i do?
Sorry I need to see your code for this) would you share git repo?
hi i want to ask one thing,
as u explain react app and node server is running on different field then how we connect that
Hi) i think I cover it in this video, there are few steps to connect, first to specify proxy backend address in client package.json file, then you configure api routes, fetching data, posting through axios. But at the end react and node are running separately
@@marinakim2929 okk...i thought we need to connect react file to node , but if they are running seperately then do we req to create a server for react or just upload the react build file as it is
@@monisansari2663 react server is already there.. you just run npm start if I understood your question correctly 😊
while fetching it should be localhost:3001/users/ or only users/ I am confused??
Hello, it depends if you specified a proxy in client package.json file. If you specified then you can just write users otherwise you should write full localhost etc
Ok thanks marina .
wow...nice video ..it helped me a lot
Damn girl you are so good I wish my teachers can explain and simplify things like you.
Would you please make a nodeJs with front end course?
Excellent one👍❤️
Thank you Marina!
Nice video! But I see you statically set your express port number to 3001, what happends when its deployed to e.g. heroku and its port number is dynamically set?
Yeah I used static port for simplicity :) thank you for the comment!! If you deploy to heroku you should install dotenv so you can store your port in .env file and set it to process.env.PORT || 3000
I don't know what's going on
but I really like the sound of the keyboard
How would this work in production env?
Greatly helpful 👍
at 6:14 I don't understand line 5 .. what means usersRoute.usersController ?
Hi there) it’s one of express.router methods, here’s a nice article on routes and controllers developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/routes
Im your New fan 👍👍👍👍
Ngl the sound from the keyboard hits different.
سلام خیلی ممنون هستم بابت آموزش
Марина, слышу что вы русскоязычная и это хорошо, спрошу. Зачем вы фетчите дату в useEffect? Он же срабатывает при каждом ререндере дома или вообще в изменении его структуры. Или я не прав? Пожалуйста, помогите разобраться, потому что я привык фетчить дату при событиях типо клика или сабмита, но вижу как некоторые делают это в хуке useEffect. Реакт изучаю совсем недавно из-за надобности по работе, обычно писал только бэкенд. И меня ставит в тупик этот хук. Почитав офф документацию написано, что отрабатывает в зависимости от установленных зависимостей, и изменении состояния этих зависимостей. В общем путаница
Здравствуйте) спасибо! Я использую useEffect потому что у меня не привязаны фетчи к кнопкам, а сразу с базы данных подтягиваются :) в юзэффект можно настроить когда именно он рендерится и обычно я пишу в скобках чтоб он срабатывал каждый раз когда в базе данных изменения происходят. Но я попробую сегодня сделать просто фетч) готовлю новое видео 😃😃
@@marinakim2929 то есть выходит без указания второго аргумента он не выполняет ререндере, а смотрит, каково состояние переменной, которая хранит в себе ответ с сервера? Хм, интересно, буду пробовать, думаю полезно если нужно сразу отобразить данные. Надеюсь я все так понял)
Спасибо! Вы супер!
@@oliverreviews8496 нет, вы правы, надо второй аргумент указывать)) иначе постоянно рендерится. Я потестирую ещё насчёт юзэффект, спасибо ☺️
@@oliverreviews8496 в общем если вы привязываете к кнопке, то рендер происходит каждый раз при нажатии кнопки, а при использовании useEffect при указании второго аргумента рендер происходит только если происходят изменения в этом аргументе
@@marinakim2929 вау, приятно, что получается двусторонний диалог)
Сейчас пишу как раз по ТЗ и использую в юзэффекте запрос😌😉
Hi Marina, i hope your doing well.. your video i watched second video for react + node js connect
but still i am getting error like this...
if you don't min please help i will you my git repo link if you ok ??????????????????
Hey i fixed my issues
Awesome. Thank you
Thank you too)
you are cool, thanks for sharing
what if the frontend and the backend are on different folders?
Awesome !!!!!!
Mam make a video on full form validation in mern stack
Please make a video on the same topic but use next js app instead of react app. Because the "proxy" property do not work on next apps.
thanks very much :)
You’re welcome ☺️
Thank you
I have one suggestion for you just improve quality of video, use hd screen recorders pls!
first time when i can learn this :`v, with a cute girl, thanks :)
tutorial on reactjs with formik will be helpful , if you could post
Can you please leave the name of the intro song 🙏🏻🙏🏻🙏🏻 I've been looking for it for more than a year now pleeeease 🙏🏻🙏🏻🙏🏻
😊phantogram - when I’m small
@@marinakim2929 thanks love ❤🙏🏻🙏🏻
You are beautiful and very good and easy exploration to understand code
could you make a GitHub repository of the source code
Yeah I will))
@@marinakim2929 thank you :)
@@marinakim2929 did this source code ever get uploaded?
Such a bebeautyfull software engineer. Wooh.
Спасибо!
you have a mistake in your code when using a router you need to write router(/users) not only / .........THank
😂kamuna.. i was a novice back then lol
Loks like you just woke up in the intro
i thought programmers has no life.. i have been wrong after watching this video.. lol you should add your cam on the corner side of the video when explaining the code :D
love you
cool
CAn you please share the source code?
your useEffect causes an infinite loop in browser
Yep.. perhaps you need to add a second argument like so useEffect(() => {},[argument])
а почему не на русском?)российские или украинские же не говорят по-английски в видеоуроках))
Может и на русском начну 😅
@@marinakim2929 желаю больше подписчиков,крепкого здоровья и успеха🤗🌺
So pretty and smart
Thank you )
I love you
you are very pretty and a programmer too! I want to move to Kazakhstan, please marry me!!!
ком поддержки))
Спасибо 😄
Is this Russian accent ?
Yes))
I love u
Милашка с:
ой бой
You are so beautiful... i love you
You are too beautiful 🔥