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.
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.
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!
Honeypot·4yFlutter vs React Native: The Battle of the Cross-platform Arena
Flutter is a cross-platform software development kit (SDK) used to build natively compiled applications. React Native was introduced back in 2015 by facebook to develop native Android and iOS applications. Flutter ships with native components by default and compiles to X86 and ARM out of the box.
asayer·4yRematch - a better Redux?
Rematch is a state management library based on Redux. It builds upon a strong foundation that is Redux core while limiting the boilerplate, following Redux best practices, and providing a great development experience. Let’s take a closer look and see how it compares to Redux.
DevDojo·4y100+ Free front-end resources, learn and earn (repost)
This post covers everything about front-end development. The roadmap makes sure that gaps in the plan are identified and can be closed as needed in the future. It also serves as a guide for the developers during their journey, allowing them to recognize and act on events that require a change of direction.
DEV·4yHow to Create Modern Cards using React and Tailwind
In today's example we will make a simple card, but in my opinion it has a very different design when compared to many libraries and frameworks. The framework we are going to use today is Tailwind CSS and along with this framework we will use other tools such as classnames and react-icons.
DEV·4yYou (probably) don't need that useState + useEffect
React's useState and useEffect hooks were a godsend for the React community. However, like any tool, these can easily be abused. The problem with the above use case is that we are keeping track of some redundant state, specifically items and itemsLength. These pieces of data can instead be derived functionally from data.
Bits and Pieces·4yIntroduction to React Location
React Location is a client-side library which allows you to implement routing. It was introduced as a wrapper for the react Router v6 beta release. It provides unique features like; Synchronous route elements.Data loaders. Nested routing. Code splitting and async data loading.
Bits and Pieces·4yCommon React Hooks Mistakes You Should Avoid
React Hook feature was first introduced on React 16.8 update and became immensely popular among developers. It allows you to hook into React state and lifecycle features. In this article, I’ll discuss 5 common React Hooks mistakes every developer should avoid when building robust React applications.
Hashnode·4yIs Next.js 12 really a Beast?
Next.js 12 is the most impressive version of Next.js. It is built on top of Node.js to improve React-based web and app development faster. It even includes server-side rendering and generating static websites. The Rust compiler takes advantage of native compilation and is now a 3x faster refresh.
DEV·4yThe #1 Best Design Pattern for Managing Forms in React
React-Hook-Form is the best way to manage forms in React. Form libraries usually have a relatively small bundle size and make a world of difference for code organization. The 3 Layer Approach is the basic approach to split a complicated form into three parts. Using RHF with RHF is the official way to get started with form management.
JavaScript in Plain English·4yReal-Life Use-Cases for useCallback and useMemo React Hooks
Bytecode Pandit explains when and how to use useCallback and useMemo in React. He also solves some real-life use-cases in a very simplified way. Let’s play with some hooks and see how they work in the real world. You can find the source code for this post here.
Hashnode·4yReact Router - Navigate the Users after Login/Logout like a Pro
React Router is a fully-featured client and server-side routing library for React, a JavaScript library for building user interfaces. The idea is to simply attach the Location(URL) of the Current Page to the <NavLink/> 's Location Object. As the Location Object of the Login/Logout Page, we can navigate the users back to the Previous Location after Successful Login.
Hacker Noon·4yTop 3 Coding Challenges for Expert-Level React Developers
React is one of the most popular web frameworks in the world. Every React project requires expert-level React developers to know React-related concepts. Reusing code is an important skill that React experts should have. In this article, we will list the top three coding challenges for React experts.
DEV·4y"bulletproof-react" is a hidden treasure of React best practices!
The GitHub repository "bulletproof-react" is published as an example of React application architecture. The directory structure tends to vary from project to project. The root of a real project will have a mix of markdown documentation, CI settings, and Docker settings. The source code of the application and the non-components will be mixed in the same hierarchy.
LogRocket·4yBuild a sitemap generator in Next.js
Next.js is an efficient tool for optimizing React applications in production. To implement effective SEO, we first need to understand how Next.js handles page rendering. A popular way to handle SEO is with a sitemap, which is a collection of all the visible URLs in your web application.
DEV·4yTypescript generics for React developers
Typescript documentation is hard to read. I want to re-write it in a way that is actually understandable by a casual reader. Let’s start with a component without generics, and introduce them only when we need them. We’re going to implement a page with a bunch of identical-looking selects for multiple categories.
DEV·4yWeb-push Notification using React and Node js
The React app uses a service worker to serve content to users. This lets the app load faster on subsequent visits in production, and gives it offline capabilities. It also means that developers (and users) will only see deployed updates onsequent visits to a page, after all the existing tabs open on the page have been closed.
React Native Example·4yThe Next-Gen Crypto Wallet built using React Native
The Coingrig Core Library is licensed under the License. The code is built using React-Native. The library has adopted a Code of Conduct that we expect project participants to adhere to. Please read the full text so that you can understand what actions will and will not be tolerated.
React Native Example·4yA web3 chat app built with react native
Web3 Etherium Mobile Chat App using MoralisChat Screen Wallet. Shows how you can easily create your own Web3 mobile app with Moralis. Can be used to build any Etherium app with the Moralis app. Can also be used as a way to build a web app for the Bitcoin network.
Medium·4yBreak Stuff Until it Works — Optimizing performance in NextJS
Performance optimizing isn’t easy, but with these steps you will be guaranteed to be much closer to a fast solution. The strategy is a method of “Breaking Stuff Until It Works’ Understanding NextJS’es lifecycle is the first step to optimizing your app.
React Native Example·4yAnimated checkbox built with Reanimated v2
Animated checkbox built with Reanimated v2. This component has been created for the React Native tutorial here. It is part of React Native's React Native SVG and React Native Native 2.0. It can be easily added to any of your existing applications.