Latihan berseri dari channel Net Ninja tentang pengenalan library animasi Framer Motion untum React JS

Salah satu videonya
https://youtu.be/2V1WK-3HQNk

Playlist lengkapnya
https://www.youtube.com/playlist?list=PL4cUxeGkcC9iHDnQfTHEVVceOEBsOf07i

----

Latihan dasar pengenalan Framer Motion

https://blog.logrocket.com/another-react-animation-library-heres-why-you-should-use-framer-motion/

#framer #react #animation #library

Latihan panjang membuat animasi transisi halaman dengan Framer dan ditambahkan ke Next JS React JS

https://www.freecodecamp.org/news/how-to-add-interactive-animations-and-page-transitions-to-a-next-js-web-app-with-framer-motion/

---

Latihan panjang membuat fitur pencarian file seperti di Github dengan React JS

https://www.freecodecamp.org/news/build-a-clone-of-githubs-file-search-functionality/

---

Membuat CRUD sederhana dengan MERN Stack Node JS

https://dev.to/gerwinjonathan/making-first-simple-crud-app-with-mern-stack-4o6k

---

Latihan membuat pemendek URL / URL Shortener dengan MERN Stack

https://dev.to/the_ghost_dev/mern-url-shortener-app-part-2-5hfh

---


#react #framer #motion #animation #transition #nextjs #mern #crud #nodejs #express
#file #search #github

Beberapa fitur penting dari JavaScript standar ES2019 yang perlu diketahui

https://dev.to/alexdevero/8-useful-javascript-es2019-features-to-know-about-29cm

---

Pengenalan tentang struktur data, event loop, dan callstack di JavaScript

https://levelup.gitconnected.com/stack-data-structures-the-call-stack-and-the-event-loop-in-javascript-b52468cf08ee

---

Membuat animasi scroll halaman dengan library GSAP dan Framer Motion

https://medium.com/front-end-weekly/how-to-create-amazing-scroll-based-animations-with-gsap-scrolltrigger-and-framer-motion-c17482ab3f4

---

Form Input validation dengan menggunakan HTML dan JavaScript

https://javascript.plainenglish.io/making-most-of-html-input-box-built-in-validation-methods-e87e502ba6a9

---

#es2019 #scroll #framer #gsap #validation #form #eventloop

Membuat aplikasi web dengan Next JS dan ditambahkan fungsi pre render, lalu deploy ke Vercel Hosting

https://javascript.plainenglish.io/lets-build-a-pre-render-website-with-next-js-react-js-and-api-then-deploy-on-vercel-cloud-a68e61059428

---

Latihan sederhana membuat backend Express JS untuk dipakai API nya oleh React JS

https://dev.to/pratham10/how-to-set-up-a-node-js-express-server-for-react-2fja

---

Membuat animasi di React dengan Framer Motion

https://dev.to/sreashi/react-animations-using-framer-motion-eg2


#nextjs #vercel #framer #nodejs

Menambahkan transisi antar halaman Next JS dengan Framer Motion

https://javascript.plainenglish.io/how-to-create-page-transitions-in-next-js-with-framer-motion-47642c462c62

---

Menambahkan progress bar ketika memuat halaman di router Next JS

https://javascript.plainenglish.io/how-to-add-router-progress-bar-in-next-js-with-one-line-of-code-c1bd86dc59d4

—-

Tips optimasi performa Next JS yang lebih baik

https://medium.com/weekly-webtips/10-ways-to-improve-your-next-js-app-performance-8e6f81b32dac

—-

Latihan deploy aplikasi Next JS ke Firebase Hosting

https://medium.com/nerd-for-tech/lets-deploy-a-next-js-app-with-firebase-hosting-e070b3aecd04

—-

#nextjs #framer #transition #firebaseHosting

Daftar project untuk latihan pengenalan React JS bagi pemula

https://dev.to/thenerdydev/10-react-projects-every-beginner-should-try-fk9

—-

Referensi daftar Chart Library untuk React JS

https://javascript.plainenglish.io/top-5-react-chart-libraries-for-2021-969ae9840832

—-

Membuat animasi di aplikasi React JS dengan Framer Motion

https://javascript.plainenglish.io/animation-in-react-web-application-using-pure-css-and-framer-motion-cf48a4aece28

—-

Menggunakan Parcel JS untuk module bundler aplikasi Electron JS dengan React

https://medium.com/weekly-webtips/how-to-bundle-your-react-electron-app-by-parcel-d038a171a5a7

—-

#react #learning #electron #parcel #framer

Latihan dari Fireship tentang membuat animasi React dengan Framer Motion

https://youtu.be/SuqU904ZHA4

---

Beberapa referensi ide project untuk React JS

https://javascript.plainenglish.io/9-react-projects-ideas-for-beginners-e0f889c69ab0

---

#react #fireship #framer #idea

Latihan sederhana dari Dev Ed dalam membuar slider Carousel sederhana pada React dan dengan Framer Motion

https://youtu.be/W0bEL93tt4k

#react #framer #devEd

Memuat gambar secara bertahap atau Progressive image loading di React JS

https://blog.logrocket.com/progressive-image-loading-react-tutorial/

---

Membuat multistep form dengan useState React JS

https://blog.logrocket.com/build-multi-step-form-usestate-hook/

---

Membuat animasi scroll halaman dengan bantuan Framer Motion

https://blog.logrocket.com/react-scroll-animations-framer-motion/

---

Komparasi antara lit element dengan React JS

https://blog.logrocket.com/lit-vs-react-comparison-guide/

#react #image #loading #progressive #scroll #framer #multistep #hooks

Latihan menggunakan Framer untuk membuat animasi dengan React JS

https://levelup.gitconnected.com/an-easier-way-to-create-scroll-triggered-animations-with-framer-react-bcc16e26005f

---

Menggunakan Vite JS bundler untuk project berbasis React dan Tailwind CSS

https://blog.logrocket.com/setting-up-dev-environment-react-vite-tailwind/

---

#react #framer #vite #tailwind

Menambahkan animasi filter data pada React JS dengan Framer Motion bersama Cand Dev

https://www.youtube.com/watch?v=f4f7vwL4TcQ

—-

Pengenalan Material UI component untuk React JS

https://blog.bitsrc.io/the-last-component-library-youll-ever-need-an-intro-to-material-ui-c5495735ae05

—-

#react #framer #candDev #material

Membuat animasi di dalam cursor dengan Framer motion di React JS

https://blog.bitsrc.io/create-cursor-animation-in-react-with-framer-motion-deb05adcdc08


#react #framer #motion

Latihan panjang dari JavaScript Mastery tentang pengenalan Next JS 13 dan membuat web sederhana dengan Tailwind CSS dan Framer Motion

https://www.youtube.com/watch?v=ugCN_gynFYw

#javascriptMastery #nextjs #tailwind #framer #react

Menambahkan transisi halaman di Next JS dengan library Framer Motion

https://blog.logrocket.com/advanced-page-transitions-nextjs-framer-motion/

---

Cara deploy aplikasi React JS ke layanan cloud Cloudflare Pages, Vercel, and Netlify

https://www.freecodecamp.org/news/deploy-react-app/

---

Membuat halaman preview gambar dari fungsi upload dengan React JS

https://javascript.plainenglish.io/how-to-upload-and-preview-image-in-react-js-ece15b63f5c0

---

Melihat beberapa layanan Backend as Service untuk React JS

https://www.freecodecamp.org/news/best-backend-service-react/

#nextjs #react #preview #framer #upload #baas

Beberapa referensi penting dalam belajar React JS di tahun 2023

https://www.freecodecamp.org/news/how-to-learn-react-in-2023/

—-

Menggunakan state management Redux Toolkit di Next JS

https://blog.openreplay.com/state-management-in-next-js-with-redux-toolkit/

—-

Membuat animasi di React JS dengan Framer motion

https://blog.openreplay.com/doing-animations-in-react-with-framer-motion/

—-

Perbedaan antara framework berbasis React seperti Next JS dengan Redwood JS

https://blog.openreplay.com/nextjs-vs-redwoodjs--which-is-better/

—-

Penggunaan MERN Stack untuk Web Development

https://awstip.com/mern-stack-for-web-development-72ff226f45ec

—-

Tips dan trik dalam pemrograman framework React JS

https://initjs.org/react-js-best-practices-fbd180e665b2


#react #nextjs #learning #tips #state #framer #redwood

Membuat Sidebar dengan tambahan animasi menggunakan Framer dan React JS

https://www.freecodecamp.org/news/create-a-fully-animated-sidebar/

#react #framer #sidebar

javaScript Mastery - Build Modern Next 14 Server Side App with Server Actions, Infinite Scroll & Framer Motion Animations

https://www.youtube.com/watch?v=FKZAXFjxlJI

#react #nextjs #framer #javascriptMastery

Comparing Next.js testing tools and strategies

https://blog.logrocket.com/comparing-next-js-testing-tools-strategies/

---

Full Stack Project Tutorial – Create A Notes App Using React and Node.js

https://www.freecodecamp.org/news/full-stack-project-tutorial-create-a-notes-app-using-react-and-node-js/

---

How to manage user authentication With React JS

https://dev.to/miracool/how-to-manage-user-authentication-with-react-js-3ic5

---

Optimizing React Performance with useDebounce.

https://dev.to/alwaz/optimizing-react-performance-with-usedebounce-37ah

---

Developing Next.js microservices with Nx

https://blog.logrocket.com/developing-next-js-microservices-nx/

---

Advanced page transitions with Next.js and Framer Motion

https://blog.logrocket.com/advanced-page-transitions-next-js-framer-motion/

---

Diving into Server Actions in Next.js 14

https://blog.logrocket.com/diving-into-server-actions-next-js-14/

---

#react #nextjs #testing #animation #framer #auth #nx

Lama Dev - Next.js Animated Portfolio Website with Framer Motion & Tailwind CSS | Next.js Beginner Project
https://www.youtube.com/watch?v=DJaZUFK8Kv4

—-

Build 25 React Projects – Tutorial
https://www.youtube.com/watch?v=5ZdHfJVAY-s

—-

State Management in React – When and Where to use State
https://www.freecodecamp.org/news/react-state-management/

—-

How to Install React – A Step-by-Step Guide
https://www.freecodecamp.org/news/how-to-install-react-a-step-by-step-guide/

—-

React Libraries to Use in Your Projects in 2024
https://www.freecodecamp.org/news/react-libraries-to-use-in-your-projects/

—-

Mastering Multilingual Websites: Internationalization In Next.Js 14
https://blog.openreplay.com/i18n-in-next-14/

—-

Securing React Apps: A Guide To Preventing Cross-Site Scripting With DOMPurify
https://blog.openreplay.com/securing-react-with-dompurify/

—-

#nextjs #react #framer #tailwind #dom #state

How to Add Tailwind CSS to Your React Native Expo App

https://www.freecodecamp.org/news/tailwindcss-in-react-native-expo/

---

How to Render an Array of Components in React

https://www.freecodecamp.org/news/how-to-render-array-of-components-in-react/

---

How to Build Reusable React Components

https://www.freecodecamp.org/news/how-to-build-reusable-react-components/

---

Mastering Custom Hooks in React: A Comprehensive Guide

https://dev.to/hasancse/mastering-custom-hooks-in-react-a-comprehensive-guide-1bfb

---

How to Create Multi-Page Animations Using Framer Motion & React-Router-Dom

https://www.freecodecamp.org/news/how-to-create-multi-page-animations-using-framer-motion-and-react-router-dom/

---

#react #tailwind #framer #hooks