Next.js·4yBlog - Next.js 12
Next.js 12 includes a brand new Rust compiler that takes advantage of native compilation. We've optimized bundling and compiling with ~3x faster refresh locally and ~5x faster builds for production. Native Next.js APIs are now supported, as well as Suspense <Image /> AVIF Support.
asayer·4yReact Architecture Patterns for Your Projects
React is an un-opinionated framework in the front-end ecosystem. Its versatile nature does not provide a way to organize and structure a web application. An organized codebase is how a team of developers gets productive within the given structure. In this article, let’s look at some of the ways to keep the lifecycle of a React application healthy and well organized.
DEV·5yNo More ../../../ Import in React
Absolute imports make the component more readable and clean. Steps to configure absolute Import in Create React App without any third-party packages. For JET Brains IDEs like WebStorm, PhpStorm, RubyMine and etc, we need to add some additional configurations as below.
Product Hunt·5yAtropos - Touch-friendly 3D parallax hover effects
Atropos is a lightweight, free and open-source JavaScript library. It can be used to create stunning touch-friendly 3D parallax hover effects. Available for JavaScript, React and Vue.js Embed this post on your site. For more information, visit Atropos.
JavaScript in Plain English·5y25 Hand-Picked React Libraries You Probably Didn’t Know Existed
React is a JavaScript library built on top of Facebook’s React library. It aims to bring a native desktop experience to the web, featuring many macOS Sierra and Windows 10 components. Here are some libraries you can use in 2021 to level up your web application.
DevDojo·4yFree 100+ MERN / MEAN Stack resources
I have gathered all the resources that you will require to become a MERN or MEAN stack developer. All these resources will include Articles, Videos, Course, Websites, Tutorials, Books etc. And everything is FREE. You should know the basics of HTML, CSS AND JS.
Hashnode·4yFakeflix, a Netflix Clone built with React, Redux
Fakeflix is a clone of Netflix's splash animation. The project has been selected and inserted inside the trending repositories for five days in a row. It's a project to learn how to structure a Web App of a mid-level complexity integrating Redux logic and experiment with things like Redux Thunk.
Hacker News·4yReact Docs Beta
Learn how to think in React with step-by-step explanations and interactive examples. All explanations are written using Hooks rather than classes. We’ve added interactive examples and visual diagrams. Guides include challenges (with solutions!) to check your understanding. This is a beta website. There will be bugs, performance issues, and missing content.
DEV·4yBest VS code Extensions for Web Development
VSCode Extension helps you to boost your Productivity in Web Development. This post is for everyone including beginners including frontend and backend developers. We will show you how to use VSCode to improve your productivity on the front end and backend of your website.
DEV·4yHow I structure my React.js projects
Structuring React applications into files and folders is an opinionated topic, because there is no right or wrong way to do it. I decided to share how I have structured my projects lately.Warning: Highly opinionated! Let's get started.Single file. React projects usually start with an src/ folder and one src/App.tsx file with an App component. At some point, your app has more features, more lines, and you will need to make smaller standalone components.
Honeypot·5yBest React Developer Tools 2021
Europe's IT worker shortage is projected to grow, meaning job openings for React developers are on the up and up. It's always important to stay up to date with the latest in the world of React to be a competitive player in the job market. Let's talk about what React developer tools are being used in 2021 and why you should include them in your stack.
JavaScript in Plain English·5yThe Greatest React Developer I Ever Met
Mohammad Faisal shares the story of one of the greatest engineers he has seen in his life. He was not the fastest but he cared about best practices. His code was so beautiful that a junior developer had absolutely no problem understanding what was going on there. He left the company due to conflict with management.
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!
React Native Example·4yLiquid swipe effect in React Native
CNN.com will feature iReporter photos in a weekly Travel Snapshots gallery. Please submit your best shots for next week. Visit CNN.com/Travel each week for a new gallery of snapshots. Visit www.dailymail.co.uk/travel next Wednesday for our next gallery.
JavaScript in Plain English·5yEverything New in React 18
React 18 Alpha is here and includes many new features and improvements. The new root API allows you to use all of the react 18 improvements including concurrent features. Suspense lets you suspend something until it’s ready to be rendered. The startTransition API helps in keeping the current webpage responsive and being able to do heavy non-blocking UI updates.
freeCodeCamp·5yLearn Next.js and Make React Development Simpler
Learn Next.js and Make React Development Simpler with our React Development guide. Visit Nextjs.com to learn more about React development. For more information on Nextjs, visit the Nextjs website. For information on React Development, visit React Development.com. for more information about the React development guide, click here.
DEV·5yEvery React Developer should know these libraries
React component libraries are popular among developers for their usability and accessibility. These component libraries save us ample time and effort. Although there are multiple other React libraries that developers find helpful, I have mentioned only best ones here. Have any suggestions? Reach out to me on Twitter.
ITNEXT·5yReact Project Architecture
Context shouldn’t be considered like ‘all the wrapper around entire project’ When complexity of project increase; structures which has connection with logic are increase in number too. Context takes the role of communication between these parts. For example; if you need communication in components and pages on the messaging module; you can create MessagesContext structure and create independent work logic.
Web Tools Weekly·4yVS Code Tips, Frameworks, JS Utils, React Native
This week we look at why VS Code is so popular with developers and programmers. We also share some productivity tips and hacks to help you get the most out of the tool. And we ask you to share your favourite VS Code tips in the discussion below. Now on to this week's tools!
Bits and Pieces·5y5 Methods to Reduce JavaScript Bundle Size
5 techniques to reduce the JavaScript bundle size to avoid any performance bottlenecks. Code splitting with Webpack allows you to separate your code into bundles and load them on-demand. Tree shaking is a technique used to eliminate dead codes, and Webpack provides several plugins to implement it. Using Alternative Libraries and Removing Duplicates helps to address performance issues easily.
LogRocket·5y5 React performance optimization techniques
React uses the concept of a virtual DOM to minimize the performance cost of rerendering a webpage because the actual DOM is expensive to manipulate. This concept can also slow down a complex app if it’s not managed very well. We will discuss five important ways to optimize the performance of a React application. These include:Keeping component state local where necessary to prevent unnecessary rerenders.Code-splitting in React using dynamic import().Windowing or list virtualization in React.Lazy loading images in React
DEV·5yMicrofrontends With React
Micro Frontends allows you to develop, deploy and maintain applications individually. Like Uber where booking and payment services are individually developed and deployed. It means, your application is divided into various individual applications and easy to maintain. We will see a React Website using Micro Frontends where we create three applications, Blogs App, Header App and Container App.Please download full source code from our GitHub.