gitconnected·5yCreate distortion effect in images using ThreeJS + React + GSAP
ThreeJS + React + GSAP create distortion effect in images using ThreeJS. André Marques walks you through every step of this project. The project is based on an existing project in Codepen where I integrate into a React application. The Landing component will receive the parent element that will hold the canvas element generated by ThreeJS and an array of images.
Medium·5yFlutter vs React Native: Which is the Best Choice for 2021?
Cross-platform applications are faster to develop as it uses the same codebase for creating applications that can seamlessly run on multiple platforms. Different cross-platform app development frameworks offer a different set of features and benefits. Both of these frameworks are made and backed by the biggest tech giants of the industry Google and Facebook respectively.
freeCodeCamp·5yFull Stack Ethereum Development – a Complete Guide
Nader Dabit is the founder and CEO of Dabit, a company that develops software for the Bitcoin protocol. Dabit has written a guide on how to build a full-stack version of the protocol. The guide is called The Complete Guide to Full Stack Ethereum Development.
JavaScript in Plain English·5yuseQuery Instead of Fetch While Calling an API
React doesn’t come with its own fetching library, so developers came with their own implementation to fetch the data from the server. The problem is, it is very hard to code the caching based fetching system to effectively avoid network call duplication. useQuery Instead of Fetch While Calling an API.
Medium·5yFront-end web apps and automatic architecture decisions
A lot of good work has been done through building front-end apps with frameworks like Angular, Vue, React. Deliberately choosing to build a front- end app means weighing the benefits you expect to see against its cost. Every line of code you write, every component you add to your architecture, every tool or dependency you introduce into your project is a liability.
freeCodeCamp·5yHow to Use React-Hook-Form to Build Beautiful Forms with Chakra UI
Georgey V B. Chakra UI and React-Hook-Form –How to Build Beautiful Forms with Chakra. Georgey V V B – How to build Beautiful Forms using Chakra, React and React Hook-Form. How to make beautiful forms with React, Chakra and Chakra Hook-form.
JavaScript in Plain English·5yTop 10 Mistakes to Avoid When Using React
React has quickly become the most popular front-end framework in the tech world. It’s used by big tech companies such as Facebook, Netflix, Airbnb, and many more. React developers are in high demand, and the demand continues to grow. We’ll explore the top 10 mistakes React developers make — and how to fix them.
JavaScript in Plain English·5yBuild a Music Streaming App Like Spotify with React Native
Build a Music Streaming App like Spotify: Cost, Features, Business Model, Process. Hoe Much Does it Cost To Create a Music streaming App Like Spotify? How much does it cost to turn a profit from this music streaming application? Why have we chosen React Native to create a music streaming app like Spotify?
Medium·5yYou have to know closures to be a (good) React developer
Why you need to know closures to become a better-than-average React developer. You Have to Know Closures to be a (Good) React Developer. Nitsan Cohen explains how understanding closures improve your React skills. He also explains how closures work in React.
JavaScript in Plain English·5y7 Steps to Modernize and Optimize Your React App
Mucahit Gurbuz shares 7 steps to Modernize and Optimize Your React App. He explains how to convert classful components to functional ones. He also shares his experiences upgrading to webpack 5 and v5 in a separate blog post. The blog is in Turkish, but you can read it and apply it to your projects.
freeCodeCamp·5yReact for Beginners: Complete React Cheatsheet for 2021
React for Beginners: Complete React Cheatsheet for 2021 is now available. React is an open-source, cloud-based programming framework. It was created by Reed Barger and is used by Facebook, Twitter, Google, and others. For more information on React, visit www.react.com.
JavaScript in Plain English·5yReact Hook: UseCallback
React's useState and useEffect hooks are used to manage state in functional components. The useEffect hook is used to mimic the componentDidMount() function. When a value within the dependency array changes, the useEffect will be called again. This can lead to a repetitive re-render cycle. The fix is surprisingly simple.
JavaScript in Plain English·5yMaterial UI — Styling Has Never Been So Easy
In React, you may find that you want to give style to your React components in a fast and easy manner. Material-UI comes from Google’s Material Design. With this library, your website will look like you were a designer for your whole life but maybe you never did it before.
Bits and Pieces·5yIntroduction to Framer Motion for React
Framer Motion is a production-ready motion library to create animations using React. It comes with various animation types like spring animations, keyframes, gestures, and you can easily use these basic syntaxes to create complex animations. Manusha Chethiyawardhana explains how to use Framer Motion with React, React Hooks, and Styled Components.
Medium·5yImage Gallery with React and Tailwind CSS
In this post we will build a Image Gallery with ReactJS app with Tailwind CSS. We are also going to use Pixabay API to get the images. So, open your terminal and create a new ReactJS application by using the command below. Now, as per the instructions, change to the newly created folder.
JavaScript in Plain English·5yClient-Side Rendering VS Server-Side Rendering
An Intro Guide to Understanding Client-Side VS. Server-Side Rendering. Alyssa E Easterly explains the pros and cons of both approaches. The pros of client-side Rendering include fast website rendering after the initial load. The negatives include frequent server requests that can cause bottlenecking.
Hashnode·5yBuild a Todo app in React with Supabase - The Open-Source Firebase alternative
Supabase is a Backend-as-a-Service provider. It provides a Postgres Database, Authentication, instant APIs, real-time subscriptions, and Storage. It is built using a combination of open-source tools. You can self-host your project if you ever need it.
JavaScript in Plain English·5yNew alternative of Redux for React
Preact is a state management library for React, weighing only 4.8 Kb. The library is still under development, but you can already try it. Source code on Github. A New Alternative to Redux for React — For Faster & Lighter Web Development Ruru Maash Follow us on Twitter @RuruMaash.
freeCodeCamp·5yHTML vs JSX – What's the Difference?
Kolade Chris is the author of the popular blog Kolade Chris. He is also the co-founder of the website KoladeChris.com. His most recent work is a book about the history of the web, called The Story of the Web. His latest book is The Story Of The Web, which is published by Simon & Schuster.
Product Hunt·5yReact Bootstrap 5 — 700+ UI components & templates for Bootstrap 5 & React 17
React UI Kit speeds up development with a huge collection of beautiful & robust elements. Open source & MIT License - Bootstrap 5 - Material Design 2.0 - updated guidelines! - Super simple installation. PRO version discount for PH community Embed Collect for PH users.
JavaScript in Plain English·5yWhy You Should Use useSWR Instead of useState When Calling APIs
SWR (State While Revalidate) is a React hook used to fetch data from the server. It provides plenty of features for performance, correctness and stability. The SWR is built by the Next.JS team with high performance in mind. It has build caching system and deduplication systems.
JavaScript in Plain English·5yMicro Frontends with Podium
How to build micro frontends in React, Vue.js, and Web Components using Podium. Podium is a framework for composing micro frontend on the server-side. It is implemented in JavaScript and runs on Node.js. The goal is creating something suitable for an organisation with multiple autonomous teams, both vertical and horizontal.
JavaScript in Plain English·5yManaging Loading Status for React is Much Easier with Loadio
The loadio package is a simple to use tool that allows you to manage status information with Promises. It also generates a percentage of information according to the number of tasks. By wrapping Promise methods or else by adding them directly, we have made it easy to show the loading status with percentage information.
