-
Day 7: Final Touches and Create tests for some components
For testing the Vue component, we can utilize the Vue Test Utils and Jest. Vue Test Utils allows for mounting Vue components in isolation and simulating user interactions, while Jest can be used for assertions to ensure everything is working as expected. Firstly, set up your Vue project to use Jest (assuming you’re using Vue…
-
NVM for Windows – How to Download and Install Node Version Manager in Windows 10
If dont know how you can have different versions of node in you windows please take a look this tutorial from https://www.freecodecamp.org/ >> view tutorial
-
Day 6: Completing the CRUD Functionality
1. Preparing Vue.js app for Production: In your Vue.js project directory: This will create a dist folder with the production-ready build. 2. Deploying Node.js apps: Heroku: web: node yourServerFile.js Vercel: Vercel mainly suits frontend apps or serverless functions. For a Node.js backend like yours, Heroku, DigitalOcean, or AWS EC2 might be more suitable. Note: Deployment…
-
Day 5: Integrating Frontend with Backend
Create axiosConfig.js Modify api-be.js Create vue file ItemsCallFromAxios.vue Modify router with previous file Add this line on App.vue if you have checkout exercise complete https://github.com/LeoReyesDev/vue-tutorial/tree/day05-sample
-
Day 4: Introduction to Backend with Node.js
Morning: 1. What is Node.js? Node.js is a runtime environment that lets you execute JavaScript on the server-side. It is built on Chrome’s V8 JavaScript engine and provides an asynchronous, event-driven architecture. 2. Event Loop and Non-blocking I/O The event loop is the heart of Node.js’s non-blocking I/O. It allows Node.js to perform non-blocking operations…
-
Top 10 questions CSS3
Here are ten commonly asked questions about CSS3: 2. What are the differences between CSS and CSS3? 3. How do you create rounded corners in CSS3? 4. What are CSS3 transitions and how are they different from animations? 5. What is the CSS3 box-shadow property? 6. How can you apply multiple background images in CSS3?…
-
Day 3: Fast Track VUE3.js State Management with Vuex:
1. Set Up: In your terminal, within your Vue 3 project: 2. Create a Vuex Store: Create a directory named store in your src directory, and within the store directory, create a file named index.js. src/store/index.js: 3. Set Up Vuex in main.js: src/main.js: 4. Shopping Cart Component: src/components/ShoppingCart.vue: 5. Using the Store: For this sample,…
-
React Hooks
React hooks are a powerful feature introduced in React 16.8, enabling developers to use state and other React features without writing a class. Here’s a list of some of the built-in React hooks with simple examples for each: 2. useEffect 3. useContext 4. useReducer 5. useCallback 6. useMemo 7. useRef 8. useLayoutEffect 9. useImperativeHandle 10.…
-
Day 2: Diving Deeper into Vue.js
Components and Props: Components are one of the most powerful features of Vue. They help you extend basic HTML elements to encapsulate reusable code. 1. Create a new component: src/components/UserCard.vue: When prompted, select Vue 3. Navigate into your project: 2. Install Vue Router: 3. Set up Vue Router: src/router/index.js: 4. Create views: src/views/Home.vue: src/views/Profile.vue: 5.…
-
Day 1: Introduction to Vue.js and Basic Setup
Morning: 1. Introduction to Vue.js 2. Setting up the Development Environment: Afternoon: 1. Vue Component Basics: In your HTML Data, Methods, and Computed Properties: In your HTML 2. Data Binding and Directives: v-model: Two-way data binding for form input. v-for: Rendering a list by iterating over an array. FULL CODE 2. Implement the sample: App.vue:…
Copyright © 2024 FrontDevBlog.
