add tools and packages section, remove outdated references, and fix Jinja template link

Author: Archmonger

docs/examples/tutorial_tic_tac_toe/tic_tac_toe.py

@@ -34,7 +34,7 @@ def inner(event):
         f"Winner: {winner}" if winner else "Next player: " + ("X" if x_is_next else "O")
     )
 
-    return html._(
+    return html.fragment(
         html.div({"className": "status"}, status),
         html.div(
             {"className": "board-row"},

docs/mkdocs.yml

@@ -11,8 +11,7 @@ nav:
                 - Add React to an Existing Project: learn/add-react-to-an-existing-project.md
           - Setup:
                 - Editor Setup: learn/editor-setup.md
-                # - ReactPy Developer Tools 🚫: learn/react-developer-tools.md
-                - Tools, Modules, and Packages 🚧: learn/extra-tools-and-packages.md
+                - Tools, Libraries, and Packages: learn/tools-and-packages.md
           # - More Tutorials:
           #       - "Tutorial: React Bootstrap 🚫": learn/tutorial-react-bootstrap.md
           #       - "Tutorial: Material UI 🚫": learn/tutorial-material-ui.md
@@ -85,8 +84,8 @@ nav:
                 - Components and Hooks must be pure 🚧: reference/components-and-hooks-must-be-pure.md
                 - React calls Components and Hooks 🚧: reference/react-calls-components-and-hooks.md
                 - Rules of Hooks 🚧: reference/rules-of-hooks.md
-          # - Template Tags:
-          #       - Jinja 🚧: reference/jinja.md
+          - Template Tags:
+                - Jinja 🚧: reference/jinja.md
           - Protocol Structure 🚧: reference/protocol-structure.md
           - Client API 🚧: reference/client-api.md
     - About:

docs/overrides/homepage_examples/add_interactivity.py

@@ -17,7 +17,7 @@ def searchable_video_list(videos):
     search_text, set_search_text = use_state("")
     found_videos = filter_videos(videos, search_text)
 
-    return html._(
+    return html.fragment(
         search_input(
             {"onChange": lambda event: set_search_text(event["target"]["value"])},
             value=search_text,

docs/src/learn/add-react-to-an-existing-project.md

@@ -46,16 +46,16 @@ First, install ReactPy, Starlette, and your preferred ASGI webserver.
 
 Next, configure your ASGI framework to use ReactPy's Jinja2 template tag. The method for doing this will vary depending on the ASGI framework you are using. Below is an example that follow's [Starlette's documentation](https://www.starlette.io/templates/):
 
+!!! abstract "Note"
+
+    The `ReactPyJinja` extension enables a handful of [template tags](../reference/jinja.md) that allow you to render ReactPy components in your templates. The `component` tag is used to render a ReactPy SSR component, while the `pyscript_setup` and `pyscript_component` tags can be used together to render CSR components.
+
 ```python linenums="0" hl_lines="6 11 17"
 {% include "../../examples/add_react_to_an_existing_project/asgi_configure_jinja.py" %}
 ```
 
 Now you will need to wrap your existing ASGI application with ReactPy's middleware, define the dotted path to your root components, and render your components in your existing HTML templates.
 
-!!! abstract "Note"
-
-    The `ReactPyJinja` extension enables a handful of [template tags](/reference/templatetags/) that allow you to render ReactPy components in your templates. The `component` tag is used to render a ReactPy SSR component, while the `pyscript_setup` and `pyscript_component` tags can be used together to render CSR components.
-
 === "main.py"
 
     ```python hl_lines="6 22"

docs/src/learn/creating-a-react-app.md

@@ -20,7 +20,7 @@ These standalone executors are the easiest way to get started with ReactPy, as t
 
     In order to serve the initial HTML page, you will need to run a server. The ASGI examples below use [Uvicorn](https://www.uvicorn.org/), but you can use [any ASGI server](https://github.com/florimondmanca/awesome-asgi#servers).
 
-    Executors on this page can either support client-side rendering ([CSR](https://developer.mozilla.org/en-US/docs/Glossary/CSR)) or server-side rendering ([SSR](https://developer.mozilla.org/en-US/docs/Glossary/SSR))
+    Executors on this page can either support client-side rendering ([CSR](https://developer.mozilla.org/en-US/docs/Glossary/CSR)) or server-side rendering ([SSR](https://developer.mozilla.org/en-US/docs/Glossary/SSR)).
 
 ### Running via ASGI SSR
 
@@ -93,3 +93,7 @@ Support for WSGI executors is coming in a [future version](https://github.com/re
 ### Running via WSGI CSR
 
 Support for WSGI executors is coming in a [future version](https://github.com/reactive-python/reactpy/issues/1260).
+
+### Running as a native app
+
+Support for native apps (iO, Android, Windows, etc.) is coming in a [future version](https://github.com/reactive-python/reactpy/issues/570).

docs/src/learn/editor-setup.md

@@ -17,54 +17,39 @@ A properly configured editor can make code clearer to read and faster to write.
 
 Other popular text editors used in the React community include:
 
--   [WebStorm](https://www.jetbrains.com/webstorm/) is an integrated development environment designed specifically for JavaScript.
 -   [Sublime Text](https://www.sublimetext.com/) has support for [syntax highlighting](https://stackoverflow.com/a/70960574/458193) and autocomplete built in.
 -   [Vim](https://www.vim.org/) is a highly configurable text editor built to make creating and changing any kind of text very efficient. It is included as "vi" with most UNIX systems and with Apple OS X.
 
 ## Recommended text editor features
 
 Some editors come with these features built in, but others might require adding an extension. Check to see what support your editor of choice provides to be sure!
 
-### Python Linting
+### Linting
 
-Linting is the process of running a program that will analyse code for potential errors. [Flake8](https://flake8.pycqa.org/en/latest/) is a popular, open source linter for Python.
+Linting is the process of running a program that will analyse code for potential errors. [Ruff](https://docs.astral.sh/ruff/) is Reactive Python's linter of choice due to its speed and configurability. Additionally, we recommend using [Pyright](https://microsoft.github.io/pyright/) as a performant type checker for Python.
 
--   [Install Flake8](https://flake8.pycqa.org/en/latest/#installation) (be sure you have [Python installed!](https://www.python.org/downloads/))
--   [Integrate Flake8 in VSCode with the official extension](https://marketplace.visualstudio.com/items?itemName=ms-python.flake8)
--   [Install Reactpy-Flake8](https://pypi.org/project/reactpy-flake8/) to lint your ReactPy code
+Be sure you have [Python installed](https://www.python.org/downloads/) before you proceed!
 
-### JavaScript Linting
-
-You typically won't use much JavaScript alongside ReactPy, but there are still some cases where you might. For example, you might want to use JavaScript to fetch data from an API or to add some interactivity to your app.
-
-In these cases, it's helpful to have a linter that can catch common mistakes in your code as you write it. [ESLint](https://eslint.org/) is a popular, open source linter for JavaScript.
-
--   [Install ESLint with the recommended configuration for React](https://www.npmjs.com/package/eslint-config-react-app) (be sure you have [Node installed!](https://nodejs.org/en/download/current/))
--   [Integrate ESLint in VSCode with the official extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
-
-**Make sure that you've enabled all the [`eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks) rules for your project.** They are essential and catch the most severe bugs early. The recommended [`eslint-config-react-app`](https://www.npmjs.com/package/eslint-config-react-app) preset already includes them.
+-   [Install Ruff using the VSCode extension](https://marketplace.visualstudio.com/items?itemName=charliermarsh.ruff) or the [standalone package](https://docs.astral.sh/ruff/installation/).
+-   [Install Pyright using the VSCode extension](https://marketplace.visualstudio.com/items?itemName=ms-python.vscode-pylance) or the [standalone package](https://microsoft.github.io/pyright/#/installation).
 
 ### Formatting
 
-The last thing you want to do when sharing your code with another contributor is get into an discussion about [tabs vs spaces](https://www.google.com/search?q=tabs+vs+spaces)! Fortunately, [Prettier](https://prettier.io/) will clean up your code by reformatting it to conform to preset, configurable rules. Run Prettier, and all your tabs will be converted to spaces—and your indentation, quotes, etc will also all be changed to conform to the configuration. In the ideal setup, Prettier will run when you save your file, quickly making these edits for you.
+The last thing you want to do when sharing your code with another contributor is get into an discussion about [tabs vs spaces](https://www.google.com/search?q=tabs+vs+spaces)! Fortunately, [Ruff](https://docs.astral.sh/ruff/) will clean up your code by reformatting it to conform to preset, configurable rules. Run Ruff, and all your tabs will be converted to spaces—and your indentation, quotes, etc will also all be changed to conform to the configuration. In the ideal setup, Ruff will run when you save your file, quickly making these edits for you.
 
-You can install the [Prettier extension in VSCode](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) by following these steps:
+You can install the [Ruff extension in VSCode](https://marketplace.visualstudio.com/items?itemName=charliermarsh.ruff) by following these steps:
 
 1. Launch VS Code
 2. Use Quick Open, press ++ctrl+p++
-3. Paste in `ext install esbenp.prettier-vscode`
+3. Paste in `ext install charliermarsh.ruff`
 4. Press Enter
 
-#### Formatting on save
+**Formatting on save**
 
 Ideally, you should format your code on every save. VS Code has settings for this!
 
 1. In VS Code, press ++ctrl+shift+p++
-2. Type "settings"
+2. Type "workspace settings"
 3. Hit Enter
-4. In the search bar, type "format on save"
-5. Be sure the "format on save" option is ticked!
-
-!!! abstract "Note"
-
-    If your ESLint preset has formatting rules, they may conflict with Prettier. We recommend disabling all formatting rules in your ESLint preset using [`eslint-config-prettier`](https://github.com/prettier/eslint-config-prettier) so that ESLint is _only_ used for catching logical mistakes. If you want to enforce that files are formatted before a pull request is merged, use [`prettier --check`](https://prettier.io/docs/en/cli.html#--check) for your continuous integration.
+4. In the search bar, type "Format on save"
+5. Be sure the "Format on save" option is ticked!

docs/src/learn/extra-tools-and-packages.md

@@ -0,0 +1,20 @@
+<p class="intro" markdown>
+
+Use external ReactPy packages and tools to help you build your projects.
+
+</p>
+
+## First party packages
+
+The Reactive Python organization provides several packages and tools to help you build your projects.
+
+| Package                                                             | Description                                                                     |
+| ------------------------------------------------------------------- | ------------------------------------------------------------------------------- |
+| [ReactPy Router](https://reactive-python.github.io/reactpy-router/) | URL router for ReactPy to help you build single-page applications.              |
+| [ReactPy Django](https://reactive-python.github.io/reactpy-django/) | A Django integration for ReactPy. Comes with several Django-exclusive features. |
+
+## Third party packages
+
+There are also a number of third-party packages that can help you build your projects.
+
+You can find a list of these packages on the [ReactPy GitHub Discussions](https://github.com/reactive-python/reactpy/discussions/categories/third-party-packages).