more in progress warnings

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

@@ -2,6 +2,12 @@
 title: Add React to an Existing Project 🚫
 ---
 
+!!! warning "In Progress"
+
+    This feature is planned, but not yet developed.
+
+    See [this issue](https://github.com/reactive-python/reactpy/issues/653) for more details.
+
 ## Overview
 
 <p class="intro" markdown>
@@ -10,12 +16,6 @@ If you want to add some interactivity to your existing project, you don't have t
 
 </p>
 
-!!! warning "In Progress"
-
-    This feature is planned, but not yet developed.
-
-    See [this issue](https://github.com/reactive-python/reactpy/issues/653) for more details.
-
 <!--
 <Note>
 

docs/src/learn/python-in-psx-with-curly-braces.md

@@ -1,7 +1,13 @@
 ---
-title: Python in PSX with Curly Braces 🚧
+title: Python in PSX with Curly Braces 🚫
 ---
 
+!!! warning "In Progress"
+
+    This feature is planned, but not yet developed.
+
+    See [this issue](https://github.com/reactive-python/reactpy/issues/918) for more details.
+
 ## Overview
 
 <p class="intro" markdown>
@@ -17,6 +23,7 @@ JSX lets you write HTML-like markup inside a JavaScript file, keeping rendering
     -   How to call a JavaScript function inside JSX with curly braces
     -   How to use a JavaScript object inside JSX with curly braces
 
+<!--
 ## Passing strings with quotes
 
 When you want to pass a string attribute to JSX, you put it in single or double quotes:
@@ -588,4 +595,4 @@ Variables and functions can help you keep the markup simple!
 
 </Solution>
 
-</Challenges>
+</Challenges> -->

docs/src/learn/react-developer-tools.md

@@ -2,6 +2,12 @@
 title: React Developer Tools 🚫
 ---
 
+!!! warning "In Progress"
+
+    This feature is planned, but not yet developed.
+
+    See [this issue](https://github.com/reactive-python/reactpy/issues/1072) for more details.
+
 ## Overview
 
 <p class="intro" markdown>
@@ -14,13 +20,6 @@ Use React Developer Tools to inspect React [components](../learn/your-first-comp
 
     -   How to install ReactPy Developer Tools
 
-
-!!! warning "In Progress"
-
-	This feature is planned, but not yet developed.
-
-	See [this issue](https://github.com/reactive-python/reactpy/issues/1072) for more details.
-
 <!--
 ## Browser extension
 

docs/src/learn/writing-markup-with-psx.md

@@ -1,42 +1,46 @@
 ---
-title: Writing Markup with PSX 🚧
+title: Writing Markup with PSX 🚫
 ---
 
+!!! warning "In Progress"
+
+    This feature is planned, but not yet developed.
+
+    See [this issue](https://github.com/reactive-python/reactpy/issues/918) for more details.
+
 ## Overview
 
 <p class="intro" markdown>
 
-_JSX_ is a syntax extension for JavaScript that lets you write HTML-like markup inside a JavaScript file. Although there are other ways to write components, most React developers prefer the conciseness of JSX, and most codebases use it.
+_PSX_ is a syntax extension for JavaScript that lets you write HTML-like markup inside a JavaScript file. Although there are other ways to write components, most React developers prefer the conciseness of PSX, and most codebases use it.
 
 </p>
 
 !!! summary "You Will Learn"
 
     -   Why React mixes markup with rendering logic
-    -   How JSX is different from HTML
-    -   How to display information with JSX
+    -   How PSX is different from HTML
+    -   How to display information with PSX
 
-## JSX: Putting markup into JavaScript
+## PSX: Putting markup into Python
 
 The Web has been built on HTML, CSS, and JavaScript. For many years, web developers kept content in HTML, design in CSS, and logic in JavaScript—often in separate files! Content was marked up inside HTML while the page's logic lived separately in JavaScript:
 
 <!-- TODO: Diagram -->
 
-But as the Web became more interactive, logic increasingly determined content. JavaScript was in charge of the HTML! This is why **in React, rendering logic and markup live together in the same place—components.**
+But as the Web became more interactive, logic increasingly determined content. Scripting languages are now in charge of the HTML! This is why **in React, rendering logic and markup live together in the same place—components.**
 
 <!-- TODO: Diagram -->
 
 Keeping a button's rendering logic and markup together ensures that they stay in sync with each other on every edit. Conversely, details that are unrelated, such as the button's markup and a sidebar's markup, are isolated from each other, making it safer to change either of them on their own.
 
-Each React component is a JavaScript function that may contain some markup that React renders into the browser. React components use a syntax extension called JSX to represent that markup. JSX looks a lot like HTML, but it is a bit stricter and can display dynamic information. The best way to understand this is to convert some HTML markup to JSX markup.
+Each React component is a JavaScript function that may contain some markup that React renders into the browser. React components use a syntax extension called PSX to represent that markup. PSX looks a lot like HTML, but it is a bit stricter and can display dynamic information. The best way to understand this is to convert some HTML markup to PSX markup.
 
-<Note>
-
-JSX and React are two separate things. They're often used together, but you _can_ [use them independently](https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html#whats-a-jsx-transform) of each other. JSX is a syntax extension, while React is a JavaScript library.
+!!! note
 
-</Note>
+    PSX and ReactPy are two separate things. They're often used together, but you _can_ use them independently of each other. PSX is a syntax extension, while ReactPy is a Python library.
 
-## Converting HTML to JSX
+<!-- ## Converting HTML to PSX
 
 Suppose that you have some (perfectly valid) HTML:
 
@@ -87,15 +91,15 @@ img {
 }
 ```
 
-This is because JSX is stricter and has a few more rules than HTML! If you read the error messages above, they'll guide you to fix the markup, or you can follow the guide below.
+This is because PSX is stricter and has a few more rules than HTML! If you read the error messages above, they'll guide you to fix the markup, or you can follow the guide below.
 
 <Note>
 
 Most of the time, React's on-screen error messages will help you find where the problem is. Give them a read if you get stuck!
 
 </Note>
 
-## The Rules of JSX
+## The Rules of PSX
 
 ### 1. Return a single root element
 
@@ -137,15 +141,15 @@ This empty tag is called a _[Fragment.](/reference/react/Fragment)_ Fragments le
 
 <DeepDive>
 
-#### Why do multiple JSX tags need to be wrapped?
+#### Why do multiple PSX tags need to be wrapped?
 
-JSX looks like HTML, but under the hood it is transformed into plain JavaScript objects. You can't return two objects from a function without wrapping them into an array. This explains why you also can't return two JSX tags without wrapping them into another tag or a Fragment.
+PSX looks like HTML, but under the hood it is transformed into plain JavaScript objects. You can't return two objects from a function without wrapping them into an array. This explains why you also can't return two PSX tags without wrapping them into another tag or a Fragment.
 
 </DeepDive>
 
 ### 2. Close all the tags
 
-JSX requires tags to be explicitly closed: self-closing tags like `<img>` must become `<img />`, and wrapping tags like `<li>oranges` must be written as `<li>oranges</li>`.
+PSX requires tags to be explicitly closed: self-closing tags like `<img>` must become `<img />`, and wrapping tags like `<li>oranges` must be written as `<li>oranges</li>`.
 
 This is how Hedy Lamarr's image and list items look closed:
 
@@ -166,7 +170,7 @@ This is how Hedy Lamarr's image and list items look closed:
 
 ### 3. camelCase <s>all</s> most of the things!
 
-JSX turns into JavaScript and attributes written in JSX become keys of JavaScript objects. In your own components, you will often want to read those attributes into variables. But JavaScript has limitations on variable names. For example, their names can't contain dashes or be reserved words like `class`.
+PSX turns into JavaScript and attributes written in PSX become keys of JavaScript objects. In your own components, you will often want to read those attributes into variables. But JavaScript has limitations on variable names. For example, their names can't contain dashes or be reserved words like `class`.
 
 This is why, in React, many HTML and SVG attributes are written in camelCase. For example, instead of `stroke-width` you use `strokeWidth`. Since `class` is a reserved word, in React you write `className` instead, named after the [corresponding DOM property](https://developer.mozilla.org/en-US/docs/Web/API/Element/className):
 
@@ -186,9 +190,9 @@ For historical reasons, [`aria-*`](https://developer.mozilla.org/docs/Web/Access
 
 </Pitfall>
 
-### Pro-tip: Use a JSX Converter
+### Pro-tip: Use a PSX Converter
 
-Converting all these attributes in existing markup can be tedious! We recommend using a [converter](https://transform.tools/html-to-jsx) to translate your existing HTML and SVG to JSX. Converters are very useful in practice, but it's still worth understanding what is going on so that you can comfortably write JSX on your own.
+Converting all these attributes in existing markup can be tedious! We recommend using a [converter](https://transform.tools/html-to-psx) to translate your existing HTML and SVG to PSX. Converters are very useful in practice, but it's still worth understanding what is going on so that you can comfortably write PSX on your own.
 
 Here is your final result:
 
@@ -220,19 +224,19 @@ img {
 
 <Recap>
 
-Now you know why JSX exists and how to use it in components:
+Now you know why PSX exists and how to use it in components:
 
 -   React components group rendering logic together with markup because they are related.
--   JSX is similar to HTML, with a few differences. You can use a [converter](https://transform.tools/html-to-jsx) if you need to.
+-   PSX is similar to HTML, with a few differences. You can use a [converter](https://transform.tools/html-to-psx) if you need to.
 -   Error messages will often point you in the right direction to fixing your markup.
 
 </Recap>
 
 <Challenges>
 
-#### Convert some HTML to JSX
+#### Convert some HTML to PSX
 
-This HTML was pasted into a component, but it's not valid JSX. Fix it:
+This HTML was pasted into a component, but it's not valid PSX. Fix it:
 
 ```js
 export default function Bio() {
@@ -323,4 +327,4 @@ export default function Bio() {
 
 </Solution>
 
-</Challenges>
+</Challenges> -->