From 60f9c7b91fa87650af51903eb192569d7361f716 Mon Sep 17 00:00:00 2001 From: Greg Johnston Date: Wed, 12 Oct 2022 14:43:49 -0400 Subject: [PATCH] Work on book --- .../project/ch01_getting_started/Cargo.toml | 12 +++++ .../project/ch01_getting_started/index.html | 10 ++++ .../project/ch01_getting_started/src/main.rs | 5 ++ docs/book/src/SUMMARY.md | 2 + docs/book/src/getting_started.md | 50 +++++++++++++++++++ docs/book/src/introduction.md | 11 ++++ 6 files changed, 90 insertions(+) create mode 100644 docs/book/project/ch01_getting_started/Cargo.toml create mode 100644 docs/book/project/ch01_getting_started/index.html create mode 100644 docs/book/project/ch01_getting_started/src/main.rs create mode 100644 docs/book/src/getting_started.md create mode 100644 docs/book/src/introduction.md diff --git a/docs/book/project/ch01_getting_started/Cargo.toml b/docs/book/project/ch01_getting_started/Cargo.toml new file mode 100644 index 000000000..402630a18 --- /dev/null +++ b/docs/book/project/ch01_getting_started/Cargo.toml @@ -0,0 +1,12 @@ +[package] +name = "ch01_getting_started" +version = "0.1.0" +edition = "2021" + +[dependencies] +leptos = { version = "0.0", features = ["csr"] } + +[profile.release] +codegen-units = 1 +lto = true +opt-level = 'z' \ No newline at end of file diff --git a/docs/book/project/ch01_getting_started/index.html b/docs/book/project/ch01_getting_started/index.html new file mode 100644 index 000000000..2226309d4 --- /dev/null +++ b/docs/book/project/ch01_getting_started/index.html @@ -0,0 +1,10 @@ + + + + + + Leptos • Todos + + + + \ No newline at end of file diff --git a/docs/book/project/ch01_getting_started/src/main.rs b/docs/book/project/ch01_getting_started/src/main.rs new file mode 100644 index 000000000..328f8be4f --- /dev/null +++ b/docs/book/project/ch01_getting_started/src/main.rs @@ -0,0 +1,5 @@ +use leptos::*; + +fn main() { + mount_to_body(|cx| view! { cx,

"Hello, world!"

}) +} diff --git a/docs/book/src/SUMMARY.md b/docs/book/src/SUMMARY.md index c88867ffa..d06cac834 100644 --- a/docs/book/src/SUMMARY.md +++ b/docs/book/src/SUMMARY.md @@ -1,4 +1,6 @@ # Summary +- [Introduction](./introduction.md) +- [Getting Started](./getting_started.md) - [Templating: Building User Interfaces](./building_ui.md) - [Reactivity: Making Things Interactive](./reactivity.md) diff --git a/docs/book/src/getting_started.md b/docs/book/src/getting_started.md new file mode 100644 index 000000000..edb8a5ecd --- /dev/null +++ b/docs/book/src/getting_started.md @@ -0,0 +1,50 @@ +# Getting Started + +> The code for this chapter can be found [here](https://github.com/gbj/leptos/tree/main/docs/book/project/ch01_getting_started). + +The easiest way to get started using Leptos is to use [Trunk](https://trunkrs.dev/), as many of our [examples](https://github.com/gbj/leptos/tree/main/examples) do. + +If you don’t already have it installed, you can install Trunk by running + +```bash +cargo install --lock trunk +``` + +Create a basic Rust binary project + +```bash +cargo init leptos-todo +``` + +Add `leptos` as a dependency to your `Cargo.toml` with the `csr` featured enabled. (That stands for “client-side rendering.” We’ll talk more about Leptos’s support for server-side rendering and hydration later.) + +```toml +leptos = { version = "0.0", features = ["csr"] } +``` + +You’ll want to set up a basic `index.html` with the following content: + +```html + + + + + + Leptos • Todos + + + + +``` + +Let’s start with a very simple `main.rs` + +```rust +use leptos::*; + +fn main() { + mount_to_body(|cx| view! { cx,

"Hello, world!"

}) +} +``` + +Now run `trunk serve --open`. Trunk should automatically compile your app and open it in your default browser. diff --git a/docs/book/src/introduction.md b/docs/book/src/introduction.md new file mode 100644 index 000000000..6661f5ecd --- /dev/null +++ b/docs/book/src/introduction.md @@ -0,0 +1,11 @@ +# Introduction + +This book is intended as an introduction to the [Leptos](https://github.com/gbj/leptos) Web framework. Together, we’ll build a simple todo app—first as a client-side app, then as a full-stack app. + +The guide doesn’t assume you know anything about fine-grained reactivity or the details of modern Web frameworks. It does assume you are familiar with the Rust programming language, HTML, CSS, and the DOM and other Web APIs. + +Leptos is most similar to frameworks like [Solid](https://www.solidjs.com) (JavaScript) and [Sycamore](https://sycamore-rs.netlify.app/) (Rust). There are some similarities to other frameworks like React (JavaScript), Yew (Rust), and Dioxus (Rust), so knowledge of one of those frameworks may also make it easier to understand Leptos. + +You can find more detailed docs for each part of the API at [Docs.rs](https://docs.rs/leptos/latest/leptos/). + +**The guide is a work in progress.**