diff --git a/examples/mobile_demo/README.md b/examples/mobile_demo/README.md index 178b2f733..bf0ec5166 100644 --- a/examples/mobile_demo/README.md +++ b/examples/mobile_demo/README.md @@ -6,41 +6,6 @@ Right now, Dioxus supports mobile targets including iOS and Android. However, ou This project was generated using [cargo-mobile2](https://github.com/tauri-apps/cargo-mobile2). We have yet to integrate this generation into the Dioxus-CLI. The open issue for this is [#1157](https://github.com/DioxusLabs/dioxus/issues/1157). -## Running on iOS - -First, you'll want to make sure you have the appropriate iOS targets installed. - -The two targets you'll use the most are: - -- `aarch64-apple-ios-sim` -- `aarch64-apple-ios` - -These can be added using -- `rustup target add aarch64-apple-ios-sim` -- `rustup target add aarch64-apple-ios` - -From there, you'll want to get a build of the crate using whichever platform you're targeting (simulator or actual hardware). For now, we'll just stick with the simulator: -- `cargo build --target aarch64-apple-ios-sim` - -Then, you'll want to open XCode. This might take awhile if you've never opened XCode before. The command you want to use is: -- `cargo apple open` - -This will open XCode with this particular project. - -From there, just click the "play" button with the right target and the app should be running! - - - -Note that clicking play doesn't cause a new build, so you'll need to keep rebuilding the app between changes. The tooling here is very young, so please be patient. If you want to contribute to make things easier, please do! We'll be happy to help. - - -## Running on Android - -Again, we want to make sure we have the right targets installed. - -The common targets here are -- aarch64-linux-android -- armv7-linux-androideabi -- i686-linux-android -- x86_64-linux-android +## Running this project +Because the tooling and ecosystem is still young, Dioxus mobile can be difficult to setup and run. We have [detailed guides](https://dioxuslabs.com/learn/0.5/getting_started/mobile) for creating, building, and running on both iOS and Android. diff --git a/examples/tailwind/README.md b/examples/tailwind/README.md index 95d01f408..6dca4b775 100644 --- a/examples/tailwind/README.md +++ b/examples/tailwind/README.md @@ -2,135 +2,6 @@ Example: Basic Tailwind usage This example shows how an app might be styled with TailwindCSS. -# Setup +## Running -1. Install the Dioxus CLI: - -```bash -cargo install dioxus-cli -``` - -2. Install npm: https://docs.npmjs.com/downloading-and-installing-node-js-and-npm -3. Install the tailwind css cli: https://tailwindcss.com/docs/installation -4. Initialize the tailwind css project: - -```bash -npx tailwindcss init -``` - -This should create a `tailwind.config.js` file in the root of the project. - -5. Edit the `tailwind.config.js` file to include rust files: - -```json -module.exports = { - mode: "all", - content: [ - // include all rust, html and css files in the src directory - "./src/**/*.{rs,html,css}", - // include all html files in the output (dist) directory - "./dist/**/*.html", - ], - theme: { - extend: {}, - }, - plugins: [], -} -``` - -6. Create a `input.css` file with the following content: - -```css -@tailwind base; -@tailwind components; -@tailwind utilities; -``` - -7. Create a `Dioxus.toml` file with the following content that links to the `tailwind.css` file: - -```toml -[application] - -# App (Project) Name -name = "Tailwind CSS + Dioxus" - -# Dioxus App Default Platform -# desktop, web, mobile, ssr -default_platform = "web" - -# `build` & `serve` dist path -out_dir = "dist" - -# resource (public) file folder -asset_dir = "public" - -[web.app] - -# HTML title tag content -title = "dioxus | ⛺" - -[web.watcher] - -# when watcher trigger, regenerate the `index.html` -reload_html = true - -# which files or dirs will be watcher monitoring -watch_path = ["src", "public"] - -# include `assets` in web platform -[web.resource] - -# CSS style file -style = ["/tailwind.css"] - -# Javascript code file -script = [] - -[web.resource.dev] - -# serve: [dev-server] only - -# CSS style file -style = [] - -# Javascript code file -script = [] -``` - -## Bonus Steps - -8. Install the tailwind css vs code extension -9. Go to the settings for the extension and find the experimental regex support section. Edit the setting.json file to look like this: - -```json -"tailwindCSS.experimental.classRegex": ["class: \"(.*)\""], -"tailwindCSS.includeLanguages": { - "rust": "html" -}, -``` - -# Development - -1. Run the following command in the root of the project to start the tailwind css compiler: - -```bash -npx tailwindcss -i ./input.css -o ./public/tailwind.css --watch -``` - -## Web - -- Run the following command in the root of the project to start the dioxus dev server: - -```bash -dx serve --hot-reload -``` - -- Open the browser to http://localhost:8080 - -## Desktop - -- Launch the dioxus desktop app - -```bash -cargo run -``` +Our [Tailwind](https://dioxuslabs.com/learn/0.5/cookbook/tailwind) guide explains how to setup and run Dioxus-Tailwind projects. \ No newline at end of file diff --git a/packages/autofmt/README.md b/packages/autofmt/README.md index 0b13dc7a9..0de084d03 100644 --- a/packages/autofmt/README.md +++ b/packages/autofmt/README.md @@ -15,7 +15,7 @@ [discord-url]: https://discord.gg/XgGxMSkvUM [Website](https://dioxuslabs.com) | -[Guides](https://dioxuslabs.com/learn/0.4/) | +[Guides](https://dioxuslabs.com/learn/0.5) | [API Docs](https://docs.rs/dioxus-autofmt/latest/dioxus_autofmt) | [Chat](https://discord.gg/XgGxMSkvUM) diff --git a/packages/check/README.md b/packages/check/README.md index 6375a8316..08257a896 100644 --- a/packages/check/README.md +++ b/packages/check/README.md @@ -15,13 +15,13 @@ [discord-url]: https://discord.gg/XgGxMSkvUM [Website](https://dioxuslabs.com) | -[Guides](https://dioxuslabs.com/learn/0.4/) | +[Guides](https://dioxuslabs.com/learn/0.5) | [API Docs](https://docs.rs/dioxus-check) | [Chat](https://discord.gg/XgGxMSkvUM) ## Overview -`dioxus-check` analyzes Dioxus source code and reports errors and warnings. Primarily, it enforces the [Rules of Hooks](https://dioxuslabs.com/learn/0.4/reference/hooks#rules-of-hooks). +`dioxus-check` analyzes Dioxus source code and reports errors and warnings. Primarily, it enforces the [Rules of Hooks](https://dioxuslabs.com/learn/0.5/reference/hooks#rules-of-hooks). ## Contributing diff --git a/packages/cli-config/README.md b/packages/cli-config/README.md index ef2435713..8cad990e3 100644 --- a/packages/cli-config/README.md +++ b/packages/cli-config/README.md @@ -1,4 +1,4 @@ -
Tooling to supercharge Dioxus projects
A concurrent, functional, virtual DOM for Rust
@@ -9,8 +9,8 @@
This overview provides a brief introduction to Dioxus. For a more in-depth guide, make sure to check out:
-- [Getting Started](https://dioxuslabs.com/learn/0.4/getting_started)
-- [Book (0.4)](https://dioxuslabs.com/learn/0.4/)
+- [Getting Started](https://dioxuslabs.com/learn/0.5/getting_started)
+- [Book (0.5)](https://dioxuslabs.com/learn/0.5)
- [Examples](https://github.com/DioxusLabs/example-projects)
# Overview and Goals
@@ -34,23 +34,22 @@ Remember: Dioxus is a library for declaring interactive user interfaces—it is
## Brief Overview
-All Dioxus apps are built by composing functions that take in a `Scope` which is generic over some `Properties` and return an `Element`.
-A `Scope` holds relevant state data for the currently rendered component.
+All Dioxus apps are built by composing functions that return an `Element`.
-To launch an app, we use the `launch` method for the specific renderer we want to use. In the launch function, we pass the app's `Component`.
+To launch an app, we use the `launch` method and use features in ``Cargo.toml`` to specify which renderer we want to use. In the launch function, we pass the app's root `Component`.
```rust, ignore
use dioxus::prelude::*;
fn main() {
- dioxus_desktop::launch(App);
+ launch(App);
}
// The #[component] attribute streamlines component creation.
// It's not required, but highly recommended. For example, UpperCamelCase components will not generate a warning.
#[component]
fn App() -> Element {
- rsx!("hello world!"))
+ rsx!("hello world!")
}
```
@@ -71,7 +70,7 @@ let value = "123";
rsx!(
div {
class: "my-class {value}", // <--- attribute
- onclick: move |_| log::info!("clicked!"), // <--- listener
+ onclick: move |_| info!("clicked!"), // <--- listener
h1 { "hello world" }, // <--- child
}
)
@@ -89,21 +88,12 @@ rsx!(
)
```
-Used within components, the `rsx!` macro must be rendered into an `Element` with
-the `render` function on Scope.
-
-If we want to omit the boilerplate of `cx.render`, we can simply pass in
-`cx` as the first argument of rsx. This is sometimes useful when we need to
-render nodes in match statements.
+The `rsx!` macro is what generates the `Element` that our components return.
```rust, ignore
-#[component[
+#[component]
fn Example() -> Element {
-
- // both of these are equivalent
- rsx!("hello world"))
-
- rsx!("hello world!")
+ rsx!("hello world")
}
```
@@ -127,7 +117,7 @@ fn App() -> Element {
))
}
- ))
+ )
}
```
@@ -147,7 +137,7 @@ fn App() -> Element {
title: "My App",
color: "red",
}
- ))
+ )
}
```
@@ -163,13 +153,13 @@ struct HeaderProps {
}
#[component]
-fn Header(cx: Scope
A concurrent, functional, virtual DOM for Rust
@@ -9,8 +9,8 @@
This overview provides a brief introduction to Dioxus. For a more in-depth guide, make sure to check out:
-- [Getting Started](https://dioxuslabs.com/learn/0.4/getting_started)
-- [Book (0.4)](https://dioxuslabs.com/learn/0.4/)
+- [Getting Started](https://dioxuslabs.com/learn/0.5/getting_started)
+- [Book (0.5)](https://dioxuslabs.com/learn/0.5)
- [Examples](https://github.com/DioxusLabs/example-projects)
# Overview and Goals
@@ -34,16 +34,15 @@ Remember: Dioxus is a library for declaring interactive user interfaces—it is
## Brief Overview
-All Dioxus apps are built by composing functions that take in a `Scope` which is generic over some `Properties` and return an `Element`.
-A `Scope` holds relevant state data for the currently rendered component.
+All Dioxus apps are built by composing functions that return an `Element`.
-To launch an app, we use the `launch` method for the specific renderer we want to use. In the launch function, we pass the app's `Component`.
+To launch an app, we use the `launch` method and use features in ``Cargo.toml`` to specify which renderer we want to use. In the launch function, we pass the app's root `Component`.
```rust, ignore
use dioxus::prelude::*;
fn main() {
- dioxus_desktop::launch(App);
+ launch(App);
}
// The #[component] attribute streamlines component creation.
@@ -71,7 +70,7 @@ let value = "123";
rsx!(
div {
class: "my-class {value}", // <--- attribute
- onclick: move |_| log::info!("clicked!"), // <--- listener
+ onclick: move |_| info!("clicked!"), // <--- listener
h1 { "hello world" }, // <--- child
}
)
@@ -89,20 +88,12 @@ rsx!(
)
```
-Used within components, the `rsx!` macro must be rendered into an `Element` with
-the `render` function on Scope.
-
-If we want to omit the boilerplate of `cx.render`, we can simply pass in
-`cx` as the first argument of rsx. This is sometimes useful when we need to
-render nodes in match statements.
+The `rsx!` macro is what generates the `Element` that our components return.
```rust, ignore
#[component]
fn Example() -> Element {
- // both of these are equivalent
- rsx!("hello world");
-
- rsx!("hello world!");
+ rsx!("hello world")
}
```
@@ -162,11 +153,11 @@ struct HeaderProps {
}
#[component]
-fn Header(cx: Scope🌗🚀 Dioxus