Getting Started with KB
Welcome to the official documentation for KB. This section will guide you through the fundamental concepts and features to help you get up and running quickly.
What is KB?
KB is a powerful, lightweight framework designed for building modern web applications. It emphasizes simplicity, developer experience, and performance. Whether you're building a small utility or a large-scale enterprise application, KB provides the tools you need.
Core Concepts
Understanding these core concepts is crucial for effective use of KB:
Components
KB is component-based. You'll build your UI by composing reusable components, making your code modular and maintainable.
Reactivity
KB features a highly efficient reactivity system that automatically updates the UI when your data changes, so you don't have to.
Routing
Built-in routing allows you to create single-page applications with ease, managing navigation between different views.
Installation
Getting started is as easy as a few commands. We recommend using our CLI for project setup.
npm create kb-app my-kb-project
cd my-kb-project
npm install
npm startYour First Component
Let's create a simple "Hello World" component:
<!-- src/components/HelloWorld.kb -->
<template>
<div>
<h1>{{ message }}</h1>
<button @click="changeMessage">Change Message</button>
</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello, KB!'
};
},
methods: {
changeMessage() {
this.message = 'KB is awesome!';
}
}
};
</script>
<style scoped>
h1 {
color: var(--primary-color);
}
button {
background-color: var(--primary-color);
color: var(--white);
padding: 10px 20px;
border: none;
border-radius: var(--border-radius);
cursor: pointer;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #0056b3;
}
</style>This component displays a message and a button. Clicking the button updates the message thanks to KB's reactivity.
Next Steps
- Explore the Advanced Topics for deeper insights.
- Check out the API Reference for detailed information on all available features.
- Learn from practical examples in the Examples section.