Tutorial

Welcome to the Costro tutorial. You'll learn a quick start guide and the most important concepts to easily start building quick web apps. You can also view the Docs and the Playground.

Downloading Costro

First, make sure you've installed Node.js. When you're ready, in a terminal, run:

npm install costro

info

Other installation methods are available: CDN, self host

Choose the template syntax

Costro's component templates can be written in native Template String or with JSX.

Template String

src/components/home.js

class Home extends Component {
  render() {
    return `<h2>Home</h2>`;
  }
}

JSX

src/components/home.js

import { h } from 'costro/jsx';

class Home extends Component {
  render() {
    return <h2>Home</h2>;
  }
}

Read the Template syntax guide for more details.

Fundamentals

Create components

Create components so that we can later associate them with routes.

src/components/home.js

import { Component } from 'costro';
import { h } from 'costro/jsx';

// Shared component
function Navigation() {
  return (
    <div>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
    </div>
  );
}

class Home extends Component {
  render() {
    return (
      <div>
        <Navigation />
        <h2>Home</h2>
      </div>
    );
  }
}

class About extends Component {
  render() {
    return (
      <div>
        <Navigation />
        <h2>About</h2>
      </div>
    );
  }
}

Read the Component guide for more details.

Defines routes

Define routes and associate them with your components.

const routes = [
  {
    path: '/',
    component: Home
  },
  {
    path: '/about',
    component: About
  }
];

Read the Router guide for more details.

Create the application instance

Create the application instance and pass the routes configuration.

const app = new App({
  target: document.querySelector('#app'),
  routes
});

Read the Application guide for more details.

Use store

Read the Store guide for more details.