update react-playlist

_new_helloworld.sh

@@ -2,22 +2,32 @@
 
 set -ex
 
-TEST_DIR=/tmp/_del/_llaw_del/react-flip-toolkit-tryout
-HELLOWORLD_DIR=react-helloworld-tryout
+rm -rf react18-helloworld
+npx create-react-app react18-helloworld
 
-rm -rf $TEST_DIR || true
+pushd react18-helloworld
+  npm i -D
+  npm run build
+  # npm run start
+  npx http-serve build
+popd
 
-pushd $HELLOWORLD_DIR
-  rm -rf **/*.log &
-  rm -rf build node_modules &
-  rm -rf build &
+# TEST_DIR=/tmp/_del/_llaw_del/react-flip-toolkit-tryout
+# HELLOWORLD_DIR=react-helloworld-tryout
 
-  wait
-popd
+# rm -rf $TEST_DIR || true
+
+# pushd $HELLOWORLD_DIR
+#   rm -rf **/*.log &
+#   rm -rf build node_modules &
+#   rm -rf build &
+
+#   wait
+# popd
 
-cp -r $HELLOWORLD_DIR $TEST_DIR
+# cp -r $HELLOWORLD_DIR $TEST_DIR
 
-pushd $TEST_DIR
-  rm -rf **/*.log
-  rm -rf build node_modules
-  yarn --dev
+# pushd $TEST_DIR
+#   rm -rf **/*.log
+#   rm -rf build node_modules
+#   yarn --dev

react-node-websockets-tryout/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 codezri
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

react-node-websockets-tryout/README.md

@@ -0,0 +1,37 @@
+# react-node-websockets-demo
+A simple collaborative document editing app built with React and Node
+
+![](./media/preview.gif)
+
+## How to run the app?
+
+```bash
+#-- Setup and start the server
+cd server
+npm install # or yarn install
+npm start # or yarn start
+
+#-- Setup and start the client
+cd client
+npm install # or yarn install
+npm start # or yarn start
+```
+
+## License
+[MIT](LICENSE)
+
+## Credits
+This project was initially forked from the [`AvanthikaMeenakshi/node-websockets`](https://github.com/AvanthikaMeenakshi/node-websockets) repository and implemented according to [this LogRocket blog post](https://blog.logrocket.com/websockets-tutorial-how-to-go-real-time-with-node-and-react-8e4693fbf843/).
+
+Credit goes to the original author [Avanthika Meenakshi](https://blog.logrocket.com/author/avanthikameenakshi/) who developed the original version.
+
+## Changelog
+
+This project has the following changes compared to the original project.
+
+- Upgraded the React version to 18
+- Refactored the client app using multiple functional components
+- Refactored the server app using multiple functions and handlers
+- Used better dependencies and implementations (i.e., `ws` instead of `websocket`, `uuid` instead of `Math.random`, etc.)
+- Used the `react-use-websocket` hook/library instead of directly using the inbuilt WebSockets browser API.
+- Fixed several bugs

react-node-websockets-tryout/client/.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*