.NET 8 .🚀🔥: Building a Real-Time Chat App with .NET SignalR and React A Step by Step Tutorial

Поділитися
Вставка
  • Опубліковано 5 вер 2024
  • Welcome to our in-depth tutorial where we dive into the exciting world of real-time applications! In this video, we're going to guide you step-by-step through the process of building a cutting-edge real-time chat application using .NET SignalR and React.
    What you'll learn:
    Introduction to Real-Time Web Technologies: Understand the basics of real-time web communication and the role of WebSockets.
    Setting Up the Environment: Walkthrough of setting up your development environment with .NET and Node.js.
    Creating the Backend with .NET SignalR: Learn how to build a robust and scalable backend using the powerful SignalR library in .NET.
    Designing the Frontend with React: Step-by-step guidance on creating a sleek and responsive user interface using React.
    Integrating SignalR with React: Explore how to seamlessly integrate your backend and frontend for real-time data exchange.
    Who is this for?
    This tutorial is perfect for developers who are interested in building real-time applications. Whether you're a beginner in .NET and React or looking to expand your skill set, this video will provide valuable insights and hands-on experience.
    Key Takeaways:
    Build a fully functional real-time chat application.
    Understand the integration of .NET SignalR and React.
    Gain practical knowledge in real-time web communication.
    Support me on Patreon to access the source code:
    / mohamadlawand
    Base App: • .NET 7 💥 - ASP.NET C...
    Let us connect:
    🌍 My website - mohamadlawand.com
    📸 Instagram - / mohamadlawand087
    🐦 Twitter - / moe23
    ♯ Github - github.com/moh...
    🎫 LinkedIn - / mlawand
    💥 LinkTree - linktr.ee/moha...
    Discord - / discord
    Gear I use (affiliate link): amzn.to/3EbT8Jw
    Support my work:
    / mohamadlawand
    www.buymeacoff...
    Hire Me:
    transactions.s...
    WHO AM I:
    I'm Mohamad, a Enterprise Architect working in Manchester, UK. I make videos about web, cloud, desktop and mobile development.
    GET IN TOUCH:
    If you’d like to talk, I’d love to hear from you. Tweeting @moe23 directly will be the quickest way to get a response, but if your question is very long, feel free to email me at hello@mohamadlawand.com.
    #dotnet #websocket #react

КОМЕНТАРІ • 43

  • @Evan-fi4lj
    @Evan-fi4lj 5 місяців тому +17

    I don't understand how when you join the chat room at 51:11 the message is displayed in the component. You only call setMessages inside the "ReceiveSpecificMessage" callback you defined in App.js, but we're not calling that yet, so how is the messages state getting updated?
    I had to add a setMessages call in the "JoinSpecificChatroom" callback so that it would add the join message to the messages state, it looks like you're just console logging.

  • @LauPlace
    @LauPlace 6 місяців тому +1

    Thanks for the content, really nice example, it's also nice to see the real time errors, to be able to know how to solve them

  • @mumk
    @mumk 4 місяці тому

    Tested out with Mvc front end but not React and it worked flawlessly, thanks for the tutorial!

  • @raymonkv4812
    @raymonkv4812 6 місяців тому

    Hello dear Mohammad. Thank you for the excellent training. Please deploy this project on iis or any web service that is better so that we can use the software from any device that connects to our computer in the local network. Thanks again for your wonderful tutorial

  • @CodeWithMamad
    @CodeWithMamad 4 місяці тому

    Thank you for making this video, despite having a headache. 🙏

  • @csabagyarmathy6386
    @csabagyarmathy6386 7 місяців тому

    Once again Muhamad to the rescue, it's like you're reading the assignments I need to do for my uni. You've helped me through all of them, and hopefully future students will also stumble upon your channel! Cheers 🍻

  • @lefterissakellaris9903
    @lefterissakellaris9903 Місяць тому

    newly subscribed and as it seems from the content a new fan!Great work!

  • @yashjoshi4946
    @yashjoshi4946 7 днів тому

    Hey Great work i just wanted to know what extension are you using to be able to tell if it is a method or arg1 or arg2 at 18:34

  • @DrissElMEDAGHRIElALAOUI
    @DrissElMEDAGHRIElALAOUI 2 місяці тому

    Newly subscribed, Thanks mate.

  • @prashlovessamosa
    @prashlovessamosa 2 місяці тому

    Thanks very helpful

  • @DMC3586
    @DMC3586 2 місяці тому

    Hey Mohamad. Amazing tutorial. However at 50:54 I didn't understand how you fixed the error.

  • @Evan-fi4lj
    @Evan-fi4lj 5 місяців тому +3

    Also not sure why you're creating an entire table per message. Posting the final code would be helpful so we can see what's going on without having to search back through the video

  • @cfryerdev
    @cfryerdev 5 місяців тому

    Nice work, would be great to post the github repo too.

  • @user-ky3su8oi1r
    @user-ky3su8oi1r 2 місяці тому

    Brilliant, thanks man!

  • @olimjontajiev1943
    @olimjontajiev1943 2 місяці тому

    thank you brother

  • @bartdiako1
    @bartdiako1 4 місяці тому

    Thanks buddy you are awsome!

  • @shadmansudipto7287
    @shadmansudipto7287 5 місяців тому +2

    Please provide the code as a repository next time.

  • @fierrinho
    @fierrinho Місяць тому

    thank you

  • @Jameshiri
    @Jameshiri 8 місяців тому

    Hi, thankyou for creating this video, i implemented the video. Can you create a video on Notifications? React and .NET Signalr, it would be great.

  • @mumk
    @mumk 5 місяців тому

    Do we need to install that Nuget package for SignalR? It seems like its for .NET Framework. SignalR is built in for .NET 8

  • @kritiverma2495
    @kritiverma2495 2 місяці тому

    can you please make a video on how to store these messages in the database.

  • @kailashbehera4378
    @kailashbehera4378 8 місяців тому

    Great Tutorials. Can you please make a tutorial on .NET Api with Apache Kafka !

  • @kek_1459
    @kek_1459 8 місяців тому

    Thank you very much for your work!

  • @estonvirtual7671
    @estonvirtual7671 2 місяці тому

    cool

  • @user-nh1nm7km8x
    @user-nh1nm7km8x 8 місяців тому

    thank you so much

  • @jos6115
    @jos6115 7 місяців тому

    Thank you!
    Can I find the code somewhere?

  • @kek_1459
    @kek_1459 8 місяців тому

    Will it be adding a database to this application?

  • @SajadJalilian
    @SajadJalilian 8 місяців тому

    I really like to know your opinion about HTMX

  • @alim.karim.
    @alim.karim. 7 місяців тому +1

    Where is the code?

    • @hpn1427
      @hpn1427 6 місяців тому +1

      He didn't provide it...
      Also there are parts of the video where he just cuts it off, or code is behind his camera frame, I guess we need to hope that he will provide the code next time and be careful with video editing. Amazing content tho

  • @jayjorneypua8174
    @jayjorneypua8174 3 місяці тому

    where's the source code??

  • @mahendranath2504
    @mahendranath2504 8 місяців тому

    Nice awesome thanks for sharing the amazing content 👍👌🫡👋🤩👏🏻🤝👊🎉, a happy subscriber