Skip to content
Framework Guides
React Guidelines
Introduction
React is a JavaScript libraray for rendering user interfaces (UI). UI ias built from small units like buttons, text, and images. React lets you combine them into reusable, nestable components. From web sites to phone apps, everything on the screen can be broken down into components. ()
General Guidelines
Deep Dive - React Development
Component Driven Development (CDD)
Components enable interchangeability by isolating state from application business logic. That way, you can decompose complex screens into simple components. Each component has a well-defined API and fixed series of states that are mocked. This allows components to be taken apart and recomposed to build different UIs. ()
CDD links and resources
Developing Components in Isolation
Modern UIs are more complicated than ever. It is critical that you have confidence in your code. Developing and testing your UI components in isolation allows you to accomplish that.
REACT Components
React component libraries are becoming increasingly popular, and for good reason. They are great tools that guarantee consistency and reusability of UI elements both within and across digital products, all while having the potential to significantly reduce development time and effort.
When you started your last software project, did you write your own programming language first? Did you build your computer from scratch? Of course not. That would be ludicrous. It would be a waste of time (and in sustainable business that means money). It's not your core competency. It's not your value proposition. You'd run out of money before you finished.
Recommended Components
Javascript Libraries
Articles
Miscellaneous
Code Examples
TBD
Foundations
If you need more information about the guidelines or you're not comfortable with subject matter, you can browse the following resources
When you work with large projects, it's important that you remain consistent throughout the codebase and follow the best practices.
Headless component libraries:
These component libraries come with their components un-styled. If you have a specific design system to implement, it might be easier and better solution to go with headless components that come unstyled than to adapt a styled components library such as Material UI to your needs. Some good options are:
As your application grows, it helps to be more intentional about how your state is organized and how the data flows between your components. Redundant or duplicate state is a common source of bugs. UNderstand how to structure your state well, how to keep your state update logic maintainable, and how to share state between distant components.
Routing
Routing is a way of organizing and managing application states. A routing framework in JavaScript helps you to change the state of the application--perhaps moving from one admin panel section to another--while maintaining application persistence.
Want to print your doc?
This is not the way.
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.