** If you're familiare with React, head over to your browser and visit: codesandbox for react
Objective: Build a Counter component that displays a count. The component should have a button to increment the count. Additionally, use useEffect to update the document title with the current count value whenever it changes.
Requirements:
- Use the
useState
hook to manage the count state. - Use the
useEffect
hook to update the document title with the current count whenever it changes. - Accept an initial count value as a prop and use it to initialize the state.
- Render the current count and a button to increment the count.
Starter Code:
import React, { useState, useEffect } from 'react';
function Counter({ initialCount }) {
// Your code here
}
export default Counter;
Instructions:
- Start by initializing the count state using the useState hook and the initialCount prop.
- Implement the useEffect hook to update the document title with the current count. Remember to include count in the dependency array.
- Render the count and a button that, when clicked, increments the count.
- Ensure your component is correctly exported.
** If you're familiare with Vue, head over to your browser and visit: codesandbox for vue
Objective: Build a Counter component that displays a count. The component should have a button to increment the count. Additionally, use a Vue.js lifecycle hook to console.log a message every time the component is mounted.
Requirements:
- Use the
ref
function from Vue's Composition API to manage the count state. - Use the
onMounted
lifecycle hook from Vue's Composition API to log a message to the console when the component is mounted. - Render the current count and a button to increment the count.
Starter Code:
<template>
<!-- Your code here -->
</template>
<script>
import { ref, onMounted } from 'vue';
export default {
name: 'Counter',
setup() {
// Your code here
},
};
</script>
Instructions:
- Begin by creating a reactive state variable count using the ref function. Initialize it with a value of 0.
- Implement the increment function that increases the count value by 1 when called.
- Use the onMounted lifecycle hook to log a message to the console indicating that the component has been mounted.
- In the template, bind the count to display the current count and create a button that calls the increment function when clicked.
- Ensure your component is correctly set up to be used in a Vue.js application.
Good luck!