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 falls into the CSS in JS category.

Base Web always needs Styletron to function. You probably will not be able to build the whole application only with Base Web components and you will be creating some new components as well. Since Styletron is already loaded in your project, we recommend you using Styletron to style any new components:

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

Do you 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

Looking to customize Base Web components? There is a concept call 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 to customize:

• styles of the subcomponent
• 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:

• How Theming works