Awesome
chat-app-fcc-react-redux
Just one of the things I'm learning. https://github.com/hchiam/learning
Learning to build a chat app with React and Redux, using a Free Code Camp tutorial.
For reference, here's Beau Carnes' repo: https://github.com/beaucarnes/fcc-project-tutorials/tree/master/chat
(Another related repo: https://github.com/hchiam/learning-redux)
Table of Contents
Major Pieces
- server: Node.js
- client: React
- client-server communication: WebSockets
- to manage data: Redux
- to manage side-effects: Redux-Saga
Client entry point file is chat/src/index.js. There is more than one index.js depending on folder context, so make sure you're using the right one.
Server entry point file is chat/server/app.js. That's app.js, not App.js.
Major Steps
1) Install quick React web app setup
npm install -g create-react-app
2) Use quick React web app setup
Make sure you're inside the right folder. For me, chat-app-fcc-react-redux is the name of my parent folder. The following bash command will create a folder named chat, with a the actual project inside it:
create-react-app chat
cd chat
npm start
http://localhost:3000/ should open up.
The key files to start editing first are chat/src/App.css and chat/src/App.js.
3) Install Redux
Inside the chat folder:
npm install redux react-redux --save
Edit src/index.js to initialize Redux.
Redux has "reducers", "store", and "actions".
Redux uses "actions" to indirectly change state, since the "store" is read-only. "Actions" get dispatched, and "reducers" actually create the new state.
Inside src folder, create:
src
--actions
----index.js
--constants
----ActionTypes.js
--reducers
----index.js
----messages.js
----users.js
4) Create React Components and Containers
We need to implement the custom components used in the file src/App.js.
Inside src folder, create components:
src
--components
----AddMessage.js
----Message.js
----MessagesList.js
----SideBar.js
Inside src folder, create containers:
src
--containers
----AddMessage.js
----Message.js
----MessagesList.js
----SideBar.js
We'll connect the components and containers with React-Redux.
App.js will import the containers to use them in the main app.
i.e.: components -> containers -> App.js
Containers also connect components to redux state/actions.
5) WebSocket Server to Communicate with Network
Inside the chat folder:
npm install ws --save
Inside chat folder, create server:
chat
--server
----app.js
Inside src folder, create sockets info:
src
--sockets
----index.js
6) Install Redux-Saga
Inside the chat folder:
npm install redux-saga --save
Redux-Sage handles side-effects for Redux-React. It is a Redux middleware.
Side effects happen because we're using a server that deals with things outside of our functions. We need to handle creating a websocket event to broadcast new message to all clients.
Inside src folder, create sagas:
src
--sagas
----index.js
7) Use Chance as Username Generator
Inside the chat folder:
npm install chance --save
Inside src folder, create utility:
src
--utils
----name.js
8) Run Backend Server at the Same Time
Inside the chat folder: (run JUST ONCE, and ONLY FOR TESTING LOCALLY)
sudo chmod 0777 ./server/app.js
(Aside: chmod 0777 means everyone can read, write, and execute.)
Now to actually run the server:
cd server
node app.js
Quick Review
To get all dependencies, run npm install inside the chat folder.
Run client (chat/src folder):
npm start
Run server (chat/server folder) in another CLI tab:
node app.js
Hit control+C to exit.