Isolated React Js components
0 likes•374 views
The document outlines best practices and tools for developing React components, emphasizing the importance of consistency across teams and the use of modern JavaScript technologies. It advocates for modular design principles, responsive features, and effective testing strategies. Key tools mentioned include React Bootstrap, Material UI, and various testing frameworks, while encouraging iterative learning and improvement.
1 of 12
Download to read offline
More Related Content
What's hot (20)
Ad
Similar to Isolated React Js components (20)
Ad
Recently uploaded (20)
PPTX
How to Build a Scalable Micro-Investing Platform in 2025 - A Founder’s Guide ...Third Rock TechknoIsolated React Js components
- 1. React components at Experiment, fail, learn, rewrite.
- 2. Why React? Same tools between teams, new js tech stack, isolated components, cool kids
- 3. Inspiration • React Bootstrap • Material UI with React • Google Material Components
- 4. Isolated Components Inline Styles • No Media Queries • No Overwrite • No CSS Animations • No CSS States Extra markup (wrapper) Feed only data Style as prop when needed
- 5. Start small then build bigger components by joining components Atomic Design
- 6. • React Styleguidist • Eslint - airbnb • React Grid System • ReactTransitionGroup • Greensock js • React Motion • Zeplin • Mobile detect • React AB Tools
- 7. Style Guide • Use version tags • Use bad examples not happy ones • Put it live • Happy designers • Enjoy
- 8. • Your friend and enemy • Don’t be too strict • Sometimes DOM is needed • Interactive elements • Same code style everywhere Linting
- 9. Get Responsive • Make it configurable • React Grid System • Use Js events with moderation • Debounce, throttle • Responsive Typography • Responsive Images
- 11. • Don’t test the obvious • Make sure that you at least render something • Higher level testing, page functionality • BDD with Cucumber js • Browserstack • React ID & classes • Selenium Testing