Build a Chat App - React Tutorial Course

[@iHavo]

Unbelievably well-done tutorial. I love this

[@cafeleche]

LOVE SCRIMBA SO MUTCH!!!!! :-) :-) :-)

[@anjanasinha8035]

You explained this chat app really welll, thanks

[@DuyTran-ss4lu]

Incredible! This is a gift for God for sure

[@rajatsharma6137]

this guy knows how to teach..

[@quicktuts1259]

It would be nice to see the same course but with React hooks and an alternative to Pusher's Chat-api

[@AP-no6uc]

you can do a practice by yourself and transform this app into one that uses hooks, for example instead of lifecycle try useEffect and for the class component use functional components with useState hook, it will be a good practice to see how much they simplify things.

[@ljiljanmaksimovic1400]

It seems that Pusher doesn't support Chatkit anymore. Is there any similar replacement for it, so one could follow the course? thx

[@ShubhamKumar-sq2pg]

You could use socket.io

[@rohandeysarkar8443]

the messages are not showing on the mini browser of scrimba. But they can be seen on the chatkit console rooms, on the chatkit website.

[@rosep5044]

Hi Per) Thanks a lot - really cute and clear explanation!

[@greenarrow6689]

Great work !!!!! carry one

[@CodeGoblin]

Out of curiosity, why is this not using ES2015 in places like getting rid of the constructor and super in the class? To my knowledge it is no longer required to bind "this" to the class.

[@darknevin]

good question, i hope he replies

[@stiforr8714]

Classes were created in ES2015(ES6). I'm still learning this but, at least in React, the constructor is required when using "this". This isn't something specific to Javascript or React. Although, "this" is slightly different in Javascript. In the scope of React, constructor is used to initialize "state", fields (this.state or this.variable) and calling the parent constructor (super()) because we are extending React.Component and we need it's constructor as well. Check out a the official docs for a much better explanation :D reactjs.org/docs/state-and-lifecycle.html

[@CodeGoblin]

I was watching this tut where he mentioned that constructor(super) was deprecated, and he showed use of state along with "this" without it kzbin.info/www/bejne/aGGXdGyvg8qCj6s I am by no means an expert in react tho, just find it all odd lol.

[@stiforr8714]

It is odd. Using a constructor is certainly not deprecated. I'll take a look at the video though.

[@stiforr8714]

Ok so I watched the video and I think I found the part where you were referring to. He actually isn't saying having a constructor is deprecated. He's saying that binding "this" is not required as of React v16. Now you can use arrow functions which implicitly allow use of the "this" keyword instead of binding it in the constructor. There are situations where you would still bind "this" but they are rare.

[@jalasem]

Amazing! awesome

[@vampirejs758]

Can you build the same app using vuejs or svelte

[@Justin_Min_001]

I had to install @pusher/chatkit-client instead of @pusher/chatkit to make this work.

[@AbhishekKumar-mq1tt]

Thank u for this awesome video

[@pitchblackc0d314]

I cant even link the SDK, this tutorial is incomplete, ur missing so many steps, you cant expect is to know what ur doing already, my brain is stressed out now :(

[@betulmervekenan9553]

Heeeiiyyyy! Thank you.

[@serkanakman9945]

Sorry but i am new in React I did everything but see no solution :Failed to load resource: the server responded with a status of 404 (Not Found)

[@serkanakman9945]

index.pack.js not found

[@salmanali-mv6xe]

Im also facing the same issue 404 not found

[@ishitakumar2206]

I'm getting a "Cannot read property "CreateRoom" of Undefined. Can anyone tell me why this could be happening?

[@arpit39agarwal]

Does video explains the basics of react , JS and all ?

[@abodmedia]

any replacement for pusher ?

[@tomatomov9061]

In the beggining you are explaining like we are totaly new in React and suddenly we start from already built code ???

[@mightymarlin]

Followed the whole thing and it's not working. What IDE is this? I used imports and there are no errors but I don't have a dedicated "Dependencies" tab in code composer studio and since it's not working I'm wondering if that's why. Could anyone help please?

[@ivanfrances8913]

I can't get through "'Chatkit' is not defined no-undef" error...

[@boi11197]

Could you expand on the choice of using the spread operator when updating the state after a new message is emitted? You noted that you should limit state changes to the setState() method, but this.messages.push(message) would be occurring within that method. I'm not super experienced with React, or even JS for that matter, but intuitively it would seem like .push() would be somewhat more efficient than copying over the array of messages (again, I know that the scale here is super small, so efficiency isn't necessarily a huge concern). I just feel like I don't fully understand your reasoning in choosing one over the other. Thanks for the great tutorial by the way! I liked your presentation of the philosophies that go into designing an app like this through React.

[@rooky102]

pushing onto the state wouldn't cause the component to re-render, so it wouldn't show up on the DOM when you send, only after you refresh. setState is one of the few actions that trigger a re-render.

[@patheally]

Chatkit has shut down. What would you suggest as an alternative?

[@rishavkumar7537]

Which ide they are using

[@fr4781]

Is this a stencil for an app or the actual code?

[@dayanr.5950]

I don't understand, how do I build this project from scratch, should I use create-react-app, I am learning react and I do not understand this pretty well

[@chicomigrania822]

Yup, for getting started, do use create-react-app

[@abdulahad4934]

after using create-react-app, make folders and files like him manually.

[@serkanakman9945]

@@abdulahad4934 how can i give npm run start no package.json around no scripts part

[@nishmamaskey1093]

@@serkanakman9945 do 'cd/(your folder name- create-react-app "_yourfoldername__") first before npm start

[@ratnabhrai2117]

have you uploaded the css file anywhere?

[@nabloler]

nice tut! Thank you. I have a question, what if we would like to add a token to every user so we could identify them, without the need to login or sign up?

[@dennienguyenUX]

I'm trying to develop this app locally using create-react-app and the css file is not rendering at all . The file structure of create-react-app is totally different to scrimba. Does anyone have a solution to this?

[@nishmamaskey1093]

Replace all of your files from 'create-react-app' with the ones in here under new folder 'components'. Drag the components folder under 'src'. Create new 'style.css' and connect it under App.js. Works fine.

[@ShankyBady]

How do you get it to be interactive? I'm using Ubuntu 18.04 and I don't understand how it's interactive. :/

[@yudisthirahadigustianda489]

Is it possible to implement this app with Redux? If possible how to do it? thanks in advance

[@saudalbalooshi2828]

hey bro please tell me hoe to set this error "TypeError: this.addEntry is not a function (/node_modules/@pusher/chatkit/dist/web/chatkit.js:1)" Or any body else who know how to correct this error tell me please...../..

[@nademmahmodreyal4192]

Unbelievable, well

[@danialarshad92]

I heard that chatkit is no longer available. What should I do in that case?

[@adityapathania2443]

Try Talkjs its very similar.

[@danialarshad92]

@@adityapathania2443 Thanks bruh👍

[@galaxic_]

I want the source code, can you give them?

[@vincebartle]

look up scrimba great chat kit

[@windbreezetv]

Can someone explain to me how did he run the chat in the terminal? I know how to do with express but not with just the react command lines. Thanks

[@serkanakman9945]

I have the same problem Help pls

[@ashleyadrias]

pusher is discontinuing chatkit, what else can we use?

[@adityapathania2443]

Try Talkjs its very similar.

[@murtujakavantwala5135]

whre i can find the code of this tutorial ?

[@sourabhdubey2668]

Can i use Chatkit Free of Cost. Their is no any limitations???????

[@rachelmatthew6771]

CSS doesnt work locally. Someone please help.

[@nishmamaskey1093]

check the path

[@azizrakhim5647]

Why not include GitHub link?

[@mahabubelahi7390]

Hello, I want to know more about the IDE.

[@SF-yd9cl]

thanks

[@kirubelgizaw3672]

where do i get the css's that u used

[@DataDevWorld]

Hello. Thanks for the video but could you try to be more explanatory, you are moving so fast I can hardly comprehend how you set up the chat manager

[@sarcaastech]

cant find chatkit anywhere!

[@lagiator]

helpful :)

[@arpitkesharwani6851]

Chatkit isn't working

[@junedkhatri9342]

I've downloaded the zip file from the course, Can anyone tell me what is the next step? How do I run the app?

[@amirmohamadbashiri]

In your app folder run npm install and then npm start to start the app

[@phamthao5421]

How i can download html + css version of this course ? Thanks!

[@AaronC009]

Hi ! Im just a bit confused. I can add users to a room through chatkit and have that username post a message. But how do i do this through the app without going through the chatkit website? Should there be a signup screen before you enter the app or is there a way to type in your username through the app itself ?

[@AaronC009]

right now once deployed i cant use a different username on a second client

[@shivammaheshwari6388]

You have to use Chatkit API for creating users. Send the post request to /users with name and id (required) using axios or fetch whatever you like. Read more at docs.pusher.com/chatkit/reference/api#users. I personally find easier to communicate with API rather than Client sdk.

[@SudoNitro]

too any peoplehaving issues i spent 3 hours searchingforums to get this up too date follow these steps step one update your room id with "roomidnumber", example code subscribeToRoom(roomId) { this.setState({ messages: [] }) this.currentUser.subscribeToRoom({ roomId: "your code here", this is found on line 57 change dependacy from @pusher/chatkit too @pusher/chatkit-client click settings wheel near project name and >add dependacy remove old one @pusher/chatkit change line 2 of app.js too import Chatkit from '@pusher/chatkit-client' also right click and upgrade react dependencys download zip after u do this and cd too the directory in cmd and run npx react-codemod rename-unsafe-lifecycles to clean up old source lines this will solve your errors

[@mightymarlin]

Thank you for this, what IDE is it?

[@declineed5798]

Can you put the script in the description

[@Bluespoose]

Hey great video but I need help please! I locally created a react app and copied the files from the fourth video on scrimba and I got the four items to render. But it isn't in the nice format that it is on scrimba. It is just a list, thank you so much for any help!

[@rachelmatthew6771]

Hey, I am encountering same situation. CSS is not really working and I cant get it to work. Everything else is pretty good but design is a problem. Have you figured it out?

[@abdulahad4934]

@@rachelmatthew6771 Copy his style.css data to your css file and also introduce normalize.css file. After that include both of them to index.html file in public directory and the game begins!

[@rachelmatthew6771]

@@abdulahad4934 thanks for the reply. I tried that beforehand and got it. Thank you for the help! 😀

[@zamokuhlethwala9815]

@@rachelmatthew6771 I also encountered the same problem, please can you elaborate how can I do what's written above.

[@zamokuhlethwala9815]

@@abdulahad4934 I also encountered the same problem, please can you elaborate on what you are saying.

[@mikelees18]

Can we use .bind

[@mafineeek]

Go for beer with me, big thanks

[@coffee_n_art]

You should write the code without just explaining the already written code. BDW Nice video.

[@focusonthebeat6888]

When I go into instances on chatkit there is no scrimba-chatkit-course. Is there a way to fix that?

[@nicolasazoidis9064]

I believe you've already found the solution but if not, you need to create your own instance and name it however you like.

[@AustinChabaud]

Play the video at 1.25 sounds much better

[@freestyle8886]

is everything in the video still up to date?

[@AustinChabaud]

@@freestyle8886 yea it works fine

[@franciscatv2512]

i don't understand how to find codemix

[@greenarrow6689]

Scrimba is very promising..

[@Gold_Stone]

can you share CSS file?

[@audiohub2]

where can i get this project file to learn?

[@freecodecamp]

All the code is here: scrimba.com/g/greactchatkit

[@rishavkumar7537]

@@freecodecamp yes please provide the code and tell me the platform you are using for coding

[@manumohanan8226]

What's the alternative to ChatKit? It seems ChatKit has come to end of life.

[@davidsabillon7380]

I just know thaht :( And i´ll go to make this app. It´s a shame!

[@adityapathania2443]

Try Talkjs its very similar.

[@Typical_Abc]

Its worked But its kinda Hard To Use it Take 15 Hours To do this... I Called it Disk Off

[@Damjan25]

1080p finally :)

[@rohitrai4215]

Hey, I followed the whole tutorial and built my chat app, used bootstrap instead of CSS grid. Github screenshot link to my application github.com/rovit/chat-app/blob/master/screeshot/React%20App.png please have a look if you find the time. and let me know your feedback. I appreciate your work. Thank you so much and will check out more of Scrimba

[@LucasHenrique-ne7go]

Chatkit is dead :'(

[@adityapathania2443]

Try Talkjs

[@Rhaalis]

@@adityapathania2443 Sorry. I guess it's been a long time since you commented but isn't TalkJS chargeable? I mean the version I can release not the demo?

[@tyreelindsey2012]

can i pay someone to make a functioning chat app for me?

[@ProSimples]

THIS TUTORIAL DONT TEACH YOU HOW TO INSTALL THE ENVIRONMENT!!!!!!!!!!!!!!!!!

[@aliasgar.burhani1099]

just type 'npx create-react-app chatapp' in your command line and it will create a react app for you

[@nishmamaskey1093]

I do not see Scrimba chat kit instance what do I do?