5 steps to React app folder structure

дата:

#183 — April 8, 2020

Read on the Web
React Status
Your weekly React news digest, every Wednesday

React Folder Structure in 5 Steps — A walkthrough of how to structure large React apps into folders and files so you can manage them for the long term. There's no single right way to do it, but Robin shares his approach here.

Robin Wieruch

React GridList: A Virtual Scrolling GridList Component Based on CSS Grids — Works with anything (not just images) with known dimensions, items can vary in height, and the scroll behaviour is smooth. Here's an example.

Jamie Kyle

Let's Build a Financial Dashboard App with React (Webinar) — In his crisp and easy-to-follow style, Developer Advocate TJ VanToll will walk you through the different steps in building a responsive Bootstrap-themed Stocks Portfolio application with React. Sign up today for this live webinar - it's free.

Progress KendoReact sponsor

Styled-Components 5.1: Faster CSS Styling for React Components — Styled Components is a popular way to bring CSS and JavaScript together for styling components. 5.1 adds a new shouldForwardProp API (like Emotion's) and an API for 'transient props'.

Evan Jacobs

Converting CSS in React to Styled Components — Useful and extensive tutorial that shows how to convert a site using React with regular CSS to one using styled-components. Also includes a 22-min screencast.

James Quick

💻 Jobs

React Developer at X-Team (Remote) — Join X-Team and work on projects for companies like Riot Games, FOX, Coinbase, and more. Work from anywhere.

X-Team

Find a Job Through Vettery — Vettery specializes in tech roles and is completely free for job seekers. Create a profile to get started.

Vettery

📘 Tutorials and Stories

How and Why to Convert a Redux App to Recollect — Recollect is a state management library for React, and happens to be created by the author of this tutorial too so it goes into a lot of depth and really tries to sell the approach.

David Gilbertson

Theming React Components with CSS Variables — Two ways to theme React components using CSS custom properties.

Eden Ella

Using Tailwind CSS with Create React App — Demonstrates a basic example with minimal setup along with another one for a more optimized workflow for production.

dave ceddia

Building Chat With React? Stream Chat Has You Covered — Have a look at our interactive chat tutorial in React and learn how to build with Stream Chat.

Stream sponsor

Animating Route Transitions Using React Router — An in-depth look at using react-route-transition, a tiny library that makes it easier to animate between routes.

Eldad Bercovici

How to Build Custom Forms with React Hooks — This allows for low-level custom forms logic, which can be reused in other places with minimal third-party dependencies.

Leonardo Maldonado

▶  Building Maps with Impact on React and the JAMstack — An easily accessible 30 minute presentation on just what's possible with maps and getting them working on frontend apps.

Colby Fayock

▶  Getting Closure on React Hooks — One of those talks that tries to help you build a better mental model of concepts you're already using by recreating them from scratch. This talk takes you right inside the depths of both closures and hooks and will leave you feeling like an expert in each.

Shawn Wang

🔧 Code and Tools

hamburger-react: Animated Hamburger Menu Icons for React — The icons use CSS-driven transitions optimized for performance, with each one coming in at about 1.5k.

Luuk de Vlieger

React Admin 3.4: An Admin Panel for B2B Applications — A framework for building browser-based 'admin' apps on the backend of your choice (REST, GraphQL, etc. or you can write your own adapter). There's a demo if you want to see it live.

Marmelab

React 'Trello': A Trello-Like Kanban Board for Your App — Despite the name, this project has nothing to do with Trello. We linked it several months ago and it's still going strong though.. CodeSandbox demo here.

RC

React Autosuggest: A WAI-ARIA Compliant Autosuggest Component — Live demos on the homepage. GitHub repo here.

Misha Moroshko

NAB 2020 May Be Canceled, but the Full Bitmovin Experience Is Not

Bitmovin Inc. sponsor

use-local-storage-state: Like useState() But for Local Storage — A hook that persists data in localStorage while having the same API as useState().

Antonio Stoilkov

firestore-fp: Functional Helpers for Working with Firestore — Helps you build up queries for working with Firebase's Cloud Firestore in a functional way.

Marcin Dziewulski

Clack: A Modern Keyboard Shortcut Library Written in TypeScript — Looks like a fairly intuitive and simple API and also has a React version.

ReasonInk

Комментарии

Отправить комментарий