-
B.E.M
-
Mobile-First Approach
-
SASS incl. 3-1 CSS Architecture
-
ESLint & Stylelint
-
Test Suite
- Full-Stack React Articles
- Pure React
- Full-Stack React - The Complete Guide to ReactJS and Friends
- Alligator.io - React
- Testing React-Redux App using Jest and Enzyme
- React Composition Patterns
- React, Inline Functions, and Performance
- React Router DOM v4 Tutorial
- Stateful vs Stateless Functional Components in React
- When to use Component or PureComponent
- React — Composing Higher-Order Components (HOC)
- React Internals - How React Works (Used React 15, a bit outdated but good grasp is what you need)
- Using Destructure and Spread in React Components
- Our Best Practices for Writing React Components
- React Components – Props and States in ReactJS with Examples
- React Lifecycle Methods- how and when to use them
- ReactJs component lifecycle methods - A deep dive
- How to Benchmark React Components: The Quick and Dirty Guide
- Build a NavBar & Side Drawer
- React.js Forms: Controlled Components
- Building forms using React — everything you need to know
- Extracting Logic from React Components
- What Does Redux Do? (and when should you use it?)
- How Redux Works: A Counter-Example
- What is Redux: A Designer's Guide
- My take on Redux Architecture
- Async Operations in React Redux Applications
- Understanding compose functions in redux
- Understanding how redux-thunk works
- Building CRUD App with React + Redux
- React + Redux Architecture : Separation of Concerns
- 10 Tips for Better Redux Architecture
- Using Redux DevTools in Production
- React + Redux Architecture
- React + Redux : Architecture Overview
- Getting Started with React, Redux and Immutable: a Test-Driven Tutorial (Part 1)
- Redux Step by Step: A Simple and Robust Workflow for Real Life Apps
If you use Redux correctly, you’re going to get major benefits:
- Eliminate timing dependency bugs (No race of Async Request & Render sequence)
- Enable deterministic view renders (Isolated from network I/O and state updates)
- Enable deterministic state reproduction (Transactional)
- Enable easy undo/redo features
- Simplify debugging
- Become a time traveler
But for any of that to work, you have to remember some rules:
- Reducers must be pure functions
- Reducers must be the single source of truth for their state
- Reducer state should always be Serializable
- Reducer state should not contain functions
Also keep in mind:
- Some Apps don’t need Redux
- Use constants for action types
- Use action creators to decouple action logic from dispatch callers
- Use ES6 parameter defaults for self-describing signatures
- Use selectors for calculated state and decoupling
- Always use TDD!
- How to Structure Your React Project
- Presentational and Container Components
- Structuring projects and naming components in React
- Tips on Creating Reusable Components
- Atomic Design With React and Bit: Simplify a Complex UI
"snapshotSerializers": ["enzyme-to-json/serializer"] // fix enzyme snapshot overloaded with infos
/* Add this to jest config to avoid some issues in testing environment */
"setupFiles": [
"raf/polyfill",
],
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome",
"url": "http://localhost:5000",
"webRoot": "${workspaceRoot}/src",
"userDataDir": "${workspaceRoot}/.vscode/chrome",
"sourceMaps": true,
"sourceMapPathOverrides": {
"webpack:///./src/*": "${webRoot}/*"
},
"runtimeArgs": ["--disable-session-crashed-bubble", "--disable-infobars"]
}
- Webpack Production Build Tips
- Webpack 4 Code Splitting using SplitChunksPlugin
- Two Quick Ways to reduce react app size in Production
- StackOverflow - GZIP
- StackOverflow - Express + GZIP
- Optimize React Build for Production with Webpack
- Webpack 4 Mode and Optimization
- Prettier + ESLint + Facebook Code Quality Tutorial
- My VSCode Setup Prettier + ESLint + StyleLint for React
- Linting SCSS with Stylelint
- Stylelint SASS Guidelines
- Stylelint Config rules
- react/prefer-stateless-function
- 6 ways to declare Javascript functions - For Clean Code
- Pros-Cons of Using Redux-Saga with ES6 Generators vs Redux-Thunk with ES2017 Async/Await
- A quick explanation of Redux Observable.
- Async actions in Redux with RxJS and Redux Observable
- State appears as empty object in "react" dev tools
- What's the difference between “super()” and “super(props)” in React when using es6 classes?
- Web App Routing with fallback
- Adds Unnecessary Brackets in JSX arrow function
- Access Property of an Object in JS using Object.keys