Changelog·5yA list of 70+ open source clones of popular sites
100+ open-source clones and alternatives of popular sites like Airbnb, Amazon, Instagram, Netflix, Tiktok, Spotify, Whatsapp, Youtube, etc. List contains source code, tutorials, demo links, tech stack, and GitHub stars count. Great for learning purpose!
DEV·5y5 Awesome React Hooks ⚛️
React use lazy load image uses the Intersection Observer API to provide a performant solution to lazy loading images. UseOnClickOutside is one of the bests, with this hook, you can easily capture outside clicks from an element, very useful for a modal for example. UseDocumentTitle allows you to set the page title simple calling it from a component and passing the title string.
freeCodeCamp·5yReact Tutorial – Learn React and JavaScript Programming Basics with Example Code
TAPAS ADHIKARY. React Tutorial – Learn React and JavaScript Programming Basics with Example Code. TAPAS. Adhikary. React tutorial – learn React andJavaScript Programming basics with Example code. T APAS. ADHikary, React Tutorial. React tutorials – Learnreact and JavaScript programming basics with example code.
Hashnode·5yUltimate React Resources
React.js resources include blog posts, free e-books, Github Repos with curated lists, practical implementation of React.js in the real world with working code. I have also included recommended free and paid courses by the React team and a React community you can join.
Hashnode·5y35+ free React templates and themes you should use in 2021
React templates enable developers to get their websites up and running without coding everything from scratch. They reduce the number of hours spent coding up websites, speed up the development process, and save money. These templates range from admin dashboards to landing pages, portfolios, and more. One would say there's a React template or theme for any section of the webpage you want to build.
JavaScript in Plain English·5yBuild Better React apps with Next.js
Next.js is an open-source React front-end framework that adds additional optimization capabilities like server-side rendering (SSR) and static-site generation. SSR allows webpages to load in a fraction of the time and increases user experience with added responsiveness. Using SSR gives you an edge on SEO, which helps your site show up higher on search engine results pages.
Hashnode·5yReact Clean Code for Beginners
React developers often use code patterns that are commonly used by Front-End developers, especially React developers. In this post, I will share with all of you 4 tips to write a clean (and better) code.ESLint and Prettier are two tools that can help you write React best practices.
Product Hunt·5yTailwind UI Kit — 600+ components, 30 templates, React, Angular, & Vue support
Tailwind UI Kit is a one-of-a-kind collection of 600+ ready-to-drop-in components. It includes 30 templates with react, angular, and vue support. It's available for iOS, Android, and web apps. For more information, visit Tailwind's website.
DEV·5yWhat a React developer needs to know in 2021
React is built on the basis of JavaScript. People who want to learn React need to understand how well they know JavaScript itself. Hooks are just another way to describe the logic of your components. With experience, you can understand the technology more deeply and write new features on them.
DevDojo·5yUse Local Storage in React - The fastest way! 🚀
Use local storage in your React app. The data you have entered as user will stay persistent forever till you edit. The input will store and edit the localstorage data. The <h1> will display the data. Here are some advanced demo's of local storage. Enjoy!
Kent C. Dodds·5yHow to use React Context effectively
In Application State Management with React, I talk about how using a mix of local state and React Context can help you manage state well in any React application. I want to show you how you can create React context consumers effectively so you avoid some problems and improve the developer experience and maintainability.
Kent C. Dodds·5yHow to write a React Component in TypeScript
A common method to typing a React component is to use one of the generics that are built-into @types/react (I mean, it's built-in right? So what could go wrong?). Interestingly, you cannot type a function declaration this way, so we'll have to use a function expression. For functions, you need to consider the types coming in and the types going out.
Hashnode·5ySpeed up your coding in React by making these changes in Visual Studio Code
The emmet plugin provides autocompletion for HTML and CSS code by reducing the need for extra typing. We need to do some extra configuration to enable it for React. In this article, we will see some of the settings you can do in Visual studio code to improve your productivity a lot when working with React.
Hashnode·5yJavaScript for React
This blog will show you all the JavaScript syntax you'll deal with when you start learning and coding with React. If you haven't made the switch to latest JavaScript syntax yet, now would be a good time to get started. We'll look at how to declare variables, create functions and destructuring objects and arrays.
Hashnode·5yTop 10 Animation Libraries For React
Animation is an aspect of web design that has developed to an impressive level. React is an awesome library that gives both developer and the users of the site an amazing experience. If you are wondering what kind of animation and effect to use in your React project for better visual feedback, user consumption and utilization, I have a list of animation libraries.
JavaScript in Plain English·5yReact Context — Simplified
React can store a set of observable properties called states. React can decide how to render itself based on the state values. Sometimes it is important to share the state between multiple components by passing the state down through the component tree. React Context aims to solve this issue and stores all states in a central place.
daily.dev·5yMy Tailwind CSS utility function for creating reusable React components (TypeScript support)
Tailwind CSS is a PostCSS plugin for React. All you need to do to use it is to add it to your postcss.config.js file. The single feature that I like the most about styled-components is the styled function. Tailwind CSS comes with TypeScript support, and it also supports Preact.
Hashnode·5yLearn Next.js For Free with These Resources
Next.js is a full-stack framework for modern apps created by Vercel (formerly Zeit) It enables functionality such as server-side rendering(SSR) and static site generation(SSG) Next.js allows the first-page load to be rendered by the server, which is great for SEO & performance.
daily.dev·5yCreate powerful and flexible forms with React Hook Form
React Form Hook is a React library that is used to make performant, flexible, and extensible forms with easy-to-use validation support. In this article, we will get to know how to use this with a suitable example. Use the following command to install the library. Then execute the following commands which makes a new React project.
JavaScript in Plain English·5yCreating a simple REST API using Express.js + MongoDB
This tutorial will show you how to develop a simple REST API using Express.js and MongoDB. At the end, the REST API will be used in React Application from my previous article: Basic React Components and Props using API for showing lots of cats. The API can be used to retrieve cat data from a database.
freeCodeCamp·5yReact Testing Library – Tutorial with JavaScript Code Examples
Nathan Sebhastian is the author of the React Testing Library. He is also the co-founder of the company that developed the React API. Nathan's blog is called Nathan's World of React and his Twitter is called @NathanSebastian. He also runs a blog called The React Testing Laboratory.
LogRocket·5yComparing the best new JavaScript frameworks to React
React is an open-source JavaScript library that was created to help developers build user interfaces and UI components specifically for single page applications. In this article, we’ll look at newer frontend JavaScript frameworks, including Aurelia, hyperHTML, Svelte, and Preact. We will discuss what each framework is, how it can be used, and its similarities and differences when compared to React.
JavaScript in Plain English·5yCreating your first Portfolio Website
Alyssa E Easterly shares her tips on creating your first portfolio website. Follow the Yellow Brick React Road to get started with your own website. Use Next.js, Netlify or Tailwind to create your own single page app or SPA. For more information on how to build your own portfolio website, visit Alyssa’s blog.
daily.dev·5yCreate smoking hot toast notifications in React with React Hot Toast
React Hot Toast is a library that aims to include toast notifications in your React applications easily and intuitively. Here are three steps to add the simplest of all notifications to your app. We will modify the entry-level app.js file so that we have a basic interface to kick things off.
