Vue for React Developers JS / TS Guild Event

Hi and welcome! This repository contains a chat application created with the Vue 3 Composition API.

Workshop slides 16.1.2024

Original workshop slides

• Get started
  • IDE Setup
• Project Structure
  • Components
• Exercise
  • Complete the Chat App
  • Extend the Chat App
• Resources

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 dev

The 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.md

Get 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-1

The 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:

1. Making clicks on the button call the send() function.
2. Making the send() function emit a send event 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-2

Basic 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.