Learning Base Web

We understand that learning new libraries have their own set of challenges. To help you get started, we are here to help! First, you'll learn the concepts of Base Web, then you'll build your first Base Web application.

Concepts

Styletron

Styletron is an universal toolkit for component-oriented styling. It uses a CSS in JS approach.

Base Web uses Styletron to apply styles to components. In addition to using Base Web components you'll probably be adding some components of your own. Since Styletron is already loaded in your project, we recommend you use Styletron to style these new components too:

import {useStyletron} from 'baseui';
export default () => {
const [css, theme] = useStyletron();
return (
<a
href="/my-link"
className={css({
fontSize: '20px',
color: theme.colors.primary,
})}
>
Custom Link
</a>
);
};

Want to learn more about Styletron? Go to styletron.org.

Do you prefer other approaches when styling your components? CSS Modules? Styled-components? You can use them in parallel to Base Web and Styletron. Styletron adds only 8kB to your bundle and works in an isolation.

Check out the documentation on useStyletron to learn more.

Overrides

You can customize Base Web components by means of overrides. Each Base Web component consists of multiple subcomponents (for example list can have list container and list items). Overrides gives you a full access to all those subcomponents and lets you customize:

  • the styles of the subcomponent
  • the props of the subcomponent
  • or replace it completely

Every Base Web component has a top-level prop called overrides. It accepts a map of subcomponents and desired overrides.

To learn more, check out the Overrides guide.

Controlled and Uncontrolled components

Most code examples you'll find on the documentation site feature controlled components.

In HTML, form elements such as <input>, <textarea>, and <select> typically maintain their own state and update it based on user input. In React, mutable state is typically kept in the state property of components, and only updated with setState().

We can combine the two by making the React state be the “single source of truth”.

Most Base Web components are released with both options:

  • Stateful components, to support uncontrolled usage,
  • and the default component, that supports controlled usage.

To learn more about these, check out the official React docs on Controlled components and Uncontrolled components.

Building a password generator using Base Web

Check out the Getting started with Base Web blogpost to learn how to build a simple password generator using Base Web.

Next steps

It's time for you to build something on your own! If you got stuck, or if you've built something using Base Web, please let us know. We're happy to help or feature your application on this website!

You can reach us in our Slack channel or through GitHub issues.

Base Web with Data Fetching

A more complex application using Base Web can be found here. You can also check how it works on CodeSandbox. It helps you build an application on top of Base Web, step by step.

Base Web Themes

Once you have a better understanding of Base Web, we recommend diving into more advanced topics like: