Community Picks·2yWhy I Won't Use Next.js
The author explains why they won't use Next.js and instead recommend and teach Remix as a better tool for creating excellent user experiences. They discuss the importance of focusing on standard web platform APIs, concerns about Next.js's deployment options, the perceived lack of collaboration between React and Next.js teams, and their preference for stability and simplicity in a framework.
DEV·3yThe Roadmap to Web Dev Mastery (Best Resources)
Learn about the complexities of today's web development landscape, including frameworks and libraries. Acquire skills for free through resources and avoid critical mistakes. Grasp the workings of a website, delve into front-end mastery with HTML, CSS, and JavaScript, optimize workflow with JavaScript frameworks, build a portfolio, and explore back-end mastery. Bright Data provides a valuable tool for accessing web data.
ITNEXT·3yFull stack WebPageForm builder, NextJs, Typescript ( React ), Dnd-Kit, PostgreSQL, Prisma
A tutorial on building a full stack PageForm builder using NextJs, TypeScript, Dnd-Kit, PostgreSQL, and Prisma. The tutorial includes features such as a drag and drop designer, various form fields, form preview, form sharing, form stats, and more.
builder.io·2yMake an Animated Menu like Stripe with React, Tailwind, and AI
Learn how to create an animated menu like Stripe using React, Tailwind, and AI. The article explores how Stripe creates the menu animation, uses AI and Tailwind to generate the markup, and provides step-by-step instructions on implementing the animation logic. It also emphasizes the benefits of using visual copilot for code generation and offers additional challenges to enhance the menu design.
habr·3yReact + Three.js. Creating your own 3D shooter. Part 1
This article explores the integration and features of React Three Fiber, a library that combines React and Three.js for creating 3D graphics on the web. It discusses the advantages of using React Three Fiber, the relevance of web game development, and performance aspects to consider. The article provides a step-by-step guide on setting up the project, customizing the Canvas display, adding a floor surface, lighting, physics, camera movement, importing 3D models, enabling shadows, and adding animation. The next part of the article will cover further improvements to the game.
freeCodeCamp·2yBuild an AI Chatbot with the MERN Stack
Learn how to build an AI chatbot with the MERN Stack in a comprehensive course on the freeCodeCamp.org YouTube channel. The course covers topics such as creating a robust user authentication system, storing user chats securely in MongoDB, and integrating OpenAI with the MERN stack app.
SD Times·2yNext.js 14 is now officially available, with addition of Server Actions and Partial Prerendering features
Next.js 14 introduces significant performance improvements, including faster local server startup and code updates. It also includes Server Actions for data mutations and Partial Prerendering for handling dynamic content. Vercel has also launched a new course on Next.js Learn.
freeCodeCamp·2yFull Stack Project Tutorial – Create a Recipe App Using React, Node.js and PostgreSQL
In this in-depth tutorial, we'll build a full stack recipe app from scratch, using React, Node.js, Postgres and the Spoonacular API. We'll cover features such as: Building an API server in Node - Integrating securely with a 3rd party API - Interacting with a Postgres database using Prisma.
freeCodeCamp·2yHow to Create a Fully Animated Sidebar in React.js using Framer Motion
Learn how to create a fully animated sidebar in React.js using Framer Motion. Framer Motion is a powerful animation library for React that allows you to add smooth and professional animations to your projects. The tutorial guides you step by step through implementing a complete animated sidebar component, enhancing it with animations using Framer Motion.
habr·3yReact Custom Hook: useStorage
Discover the potential of React custom hooks with a focus on the 'useStorage' hook. It provides convenient functions for storing and retrieving data in the browser's local or session storage. The hook handles serialization, deserialization, and automatic synchronization with the component's state. The remove function allows for easy deletion of stored values. Use the hook in various scenarios, such as persisting user preferences in a settings panel.
freeCodeCamp·3yHow to Use URLs for State Management in React
URLs are stepping up to play a pivotal role in state management in React. They can save your spot, make sharing specific views easier, and help developers troubleshoot issues faster. Implementing URL-based state management in React involves setting up the environment, clearing the clutter, fetching data and designing the UI, storing state in the URL, and reading the state stored in the URL. Real-world examples of using URLs for state management include e-commerce platforms and data tools.
ITNEXT·2ySOLID in React: the good, the bad, and the awesome
This article discusses how to apply SOLID principles in React, focusing on the Single Responsibility Principle, the Open/Closed Principle, the Liskov Substitution Principle, the Interface Segregation Principle, and the Dependency Inversion Principle. It explores the separation of components into managers and workers, the importance of extension over modification, the concept of substituting supertypes with subtypes, the principle of depending only on necessary properties, and the inversion of dependencies through component composition in React.
Community Picks·3yNeobrutalism Components
Neobrutalism Components is a package that provides a collection of React components for building user interfaces. The components include Accordion, Alert, Avatar, Badge, Button, Card, Checkbox, Drawer, Dropdown, ImageCard, Input, Marquee, Modal, Newsletter, RadioGroup, Select, Tabs, Textarea, and Tooltip.
asayer·2yReact Router for Beginners - A Complete 2023 Guide
React Router is a library that helps in handling navigation and routing in a React application. It allows you to define different routes in your app and link them to their respective components without reloading the page. React Router provides complex navigation, seamless page navigation structure, and support for dynamic URLs. To set up React Router, you need to install the react-router-dom package, wrap your app's components with the BrowserRouter component, define routes using the Route component, and use the Link or NavLink component for navigation between routes.
Community Picks·3yExploring React Server Components and Server Actions with Next.js
React Server Components (RSC) are designed to run directly on the server and dynamically generate HTML that is sent to the client. They offer benefits like direct database querying and improved performance. Next.js implements RSC by combining server and client components to optimize performance. RSC differ from server-side rendering in that they are always pre-rendered on the server and only the HTML is sent to the client.
habr·3yReact Custom Hook: useTimeout
Learn about the useTimeout hook in React, which allows for easy setting, clearing, and resetting of timeouts within a component. The hook ensures that the callback function remains up to date and optimizes performance by memoizing certain functions. It can be used in various scenarios where timed actions are required.
Hacker News·2yThe open-source React.js LLM Agent
The open-source React.js LLM Agent is an experiment to make GPT-4 more useful for web development. It generates and composes multiple React components based on user stories and atomic design principles. It uses technologies such as React, TailwindCSS, Typescript, and Radix UI, and it is completely open-sourced.
Community Picks·2yReact Performance Booster - Introduction to the useMemo hook
Learn about the useMemo hook in React, which allows you to optimize performance by memorizing expensive calculations. By using useMemo, you can ensure that the result of a computation is stored and only recalculated if necessary.