Vue for React Developers JS / TS Guild Event
Hi and welcome! This repository contains a chat application created with the Vue 3 Composition API.
Ensure your Node.js version is >=12.2.0 with node --version. If not, it's time to upgrade for which I recommend nvm.
Run these commands in your command line to get a local development version of this project up and running on your machine.
# Clone the repository
git clone https://github.com/knowit-finland-javascript-guild/vue-for-react-developers.git
# Install dependencies
cd vue-for-react-developers
npm install
# Start the app
npm run devThe app should now be running at localhost:5173
The recommended IDE setup is VSCode and the Volar extension.
This should allow for precise auto-formatting and most of the good stuff you want when developing.
This application is written in Javascript. Vue 3 supports TypeScript but it has not been used here.
This project's structure is roughly the following:
.
├── node_modules/
├── public/
├── src/
│ ├── assets/
│ ├── components/
│ ├── compositionFunctions/
│ └── App.vue # Start here
├── package.json
└── README.mdGet started by exploring App.vue.
The src/compositionFunctions directory contains functions that are very similar to React hooks. A direct parallel between the two can't really be made, but a convention is to name both with a use prefix.
Components have been written as single file components using the <script setup> syntax. This means that a component's template, script and style are all contained within a single file. The <script setup> syntax replaces Vue's setup() function, making the entire component less verbose. Understanding what this means is not required in the scope of this workshop and exercise, but you can read more about it in the Vue docs.
To flesh out your Vue skills, an exercise has been prepared. The first part will task you with wiring the pieces of an existing application together. The second part will have you create a new component for the same application.
If you get stuck at any point, search the project for the string "Hint:". These point to critical points where functionality could be added.
To start, switch to the correct branch:
git switch exercise-1The application mostly works but we can't send any messages. Let's fix that by doing the following things.
The Compose.vue component has a button that should send the typed message, but it doesn't. This is because the <Button /> component doesn't have any functionality attached to it. Fix this by:
- Making clicks on the button call the
send()function. - Making the
send()function emit asendevent with the text input's value as an argument.
With the Compose component fixed, the Chat component should now be receiving send events from it. However, nothing is registered to handle these events.
Create a function that mutates the reactive messages variable. It should append new messages to the existing array of messages (open messages.js to find out what format messages are stored in). Make sure to attach this function to the Compose component's send event.
You should now have a working, albeit very one-sided, chat app!
Bonus: See if you could send messages simply by pressing the enter key in the text input field.
The second part of the exercise is to extend the chat app with an "emoji picker".
To start, switch to the correct branch:
git switch exercise-2Basic messaging functionality has already been implemented in this branch. Your job is to accomplish the following three goals.
Reminder: If you get stuck at any point, search the project for the string "Hint:". These point to critical points where functionality could be added.
Create a set of buttons that can be clicked to send the respective emoji to the chat.
To start, take a look at the Button.vue component. You can use its icon prop to pass in the name of an emoji you want to display. useIcons.js will provide a list of available emojis.
Figure out how to send messages from your emoji picker to the message list in Chat.vue. Give these messages a different type value so you can render them in a different way than normal text messages in the following step.
Start from the Compose.vue component and see how it does things, though you're probably already familiar with it from the last exercise.
Finally, render emoji messages in the chat. They should now have a different type value than regular chat messages.
Head to ChatMessage.vue and look into conditional rendering. Don't worry if things don't look perfect - the main point of this exercise isn't CSS.
You'll find the workshop slides here.
The following resources are pretty handy:
- Composition API Docs
- Start here for documentation.
- Directives
v-for,v-if,v-model, etc.
- Comparing React Hooks with Vue Composition API
- This is a good read that goes into a fair amount of detail.