One of the keys with React is understanding everything can be composed within components
Focused on functionality
Right now we have been extremely focused on how to power your websites
We have not sat down to learn much of the skills needed to enhance the look and feel of the website
We are heavily relying on the original "stylesheet" of browsers to provide our look at feel...
And it looks pretty
terrible
Building Components from Scratch
From a design perspective, right now we are building components "from scratch"
Our components return pure HTML, CSS, and JavaScript
Note: our CSS is being imported in our Javascript like another JavaScript file
Note: you can import CSS into components directly
Building Components from Scratch
In order to build beautiful components, you would need to understand HTML and CSS on a deeper level
Remember from the beginning of the course on how there is a need to separate presentation from content
HTML is used for the content, CSS for the presentation
Building Components from Scratch
In React, both HTML and CSS, along with the JavaScript that powers the component are all packaged inside each component
This requires you, the developer to not only understand how to build components, but also how to write appropriate HTML and CSS to ensure that the component will look the same no matter where you put it
This is beyond the scope of this class
Introducing UI Component Libraries
Another way to help divide the work is to use/implement what is called a UI Component Library
What a UI Component Library does is that it takes a "design language" and implements a set of typical controls that you would need on a website (e.g. Input box, Button) and ensures that the look and field of that control abides by the design language
What is a design language?
" ...used to describe the overall visual design of a digital product"
"an amalgamation of component designs with a consistent visual aesthetic and brand, typically accompanied by usage guidelines in the form of online documentation."
What is atomic design?
"Atomic design is a methodology composed of five distinct stages working together to create interface design systems in a more deliberate and hierarchical manner. The five stages of atomic design are:
UI component libraries provide the "atoms" and sometimes the "molecules" as components so that you can rapidly build organisms, pages, and your application
If you follow the documentation, you can be assured that your site will look consistent since you are using standardized tools
Gestalt - a Pinterest UI Component Library
We'll be going over Gestalt - Pinterest's UI component library
You will notice the "atoms" look like Pinterest widgets