import Layout from "../../components/layout";

export default Layout;

# Learning Base Web

We understand that learning new libraries has its own set of challenges. To help you get started, we’ll first go over the concepts of Base Web,
then you'll build your first Base Web application.

## Concepts

### Styletron

Styletron is a universal toolkit for component-oriented styling. It uses a [CSS-in-JS](https://github.com/tuchk4/awesome-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**:

```js
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](https://www.styletron.org)._

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

_Check out the documentation on [useStyletron](/components/use-styletron/) 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 full access to all those subcomponents and lets you:

- Customize the styles of the subcomponent
- Customize the props of the subcomponent
- 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](/guides/understanding-overrides/)._

### 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 2 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
- The default component, which supports controlled usage

_To learn more about these, check out the official React docs on
[Controlled components](https://reactjs.org/docs/forms.html#controlled-components)
and [Uncontrolled components](https://reactjs.org/docs/uncontrolled-components.html)._

## Building a password generator using Base Web

First check out [this blog post](/blog/getting-started-with-base-web/)
to learn how to build a simple password generator using Base Web.
Then It's time for you to build a password generator on your own! If you get 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](https://join.slack.com/t/baseui/shared_invite/zt-5f1s4d10-1D2uywAECAG50m64PTH9cw)
or through [GitHub issues](https://github.com/uber/baseweb/issues).

### Base Web with data fetching

You can find a more complex application using Base Web [here](https://github.com/tajo/fusion-baseui). 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](/guides/theming)