You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/src/learn/add-react-to-an-existing-project.md
+1-1Lines changed: 1 addition & 1 deletion
Original file line number
Diff line number
Diff line change
@@ -4,6 +4,7 @@
4
4
5
5
See [this issue](https://github.com/reactive-python/reactpy/issues/653) for more details.
6
6
7
+
<!--
7
8
## Overview
8
9
9
10
<p class="intro" markdown>
@@ -12,7 +13,6 @@ If you want to add some interactivity to your existing project, you don't have t
12
13
13
14
</p>
14
15
15
-
<!--
16
16
<Note>
17
17
18
18
**You need to install [Node.js](https://nodejs.org/en/) for local development.** Although you can [try React](/learn/installation#try-react) online or with a simple HTML page, realistically most JavaScript tooling you'll want to use for development requires Node.js.
Copy file name to clipboardExpand all lines: docs/src/learn/react-developer-tools.md
+2-1Lines changed: 2 additions & 1 deletion
Original file line number
Diff line number
Diff line change
@@ -4,6 +4,7 @@
4
4
5
5
See [this issue](https://github.com/reactive-python/reactpy/issues/1072) for more details.
6
6
7
+
<!--
7
8
## Overview
8
9
9
10
<p class="intro" markdown>
@@ -16,7 +17,7 @@ Use React Developer Tools to inspect React [components](../learn/your-first-comp
16
17
17
18
- How to install ReactPy Developer Tools
18
19
19
-
<!--
20
+
20
21
## Browser extension
21
22
22
23
The easiest way to debug websites built with React is to install the React Developer Tools browser extension. It is available for several popular browsers:
Copy file name to clipboardExpand all lines: docs/src/learn/writing-markup-with-psx.md
+5-4Lines changed: 5 additions & 4 deletions
Original file line number
Diff line number
Diff line change
@@ -4,7 +4,7 @@
4
4
5
5
See [this issue](https://github.com/reactive-python/reactpy/issues/918) for more details.
6
6
7
-
## Overview
7
+
<!--## Overview
8
8
9
9
<p class="intro" markdown>
10
10
@@ -20,14 +20,15 @@ _PSX_ is a syntax extension for JavaScript that lets you write HTML-like markup
20
20
21
21
## PSX: Putting markup into Python
22
22
23
-
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:
23
+
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:-->
24
24
25
25
<!-- TODO: Diagram -->
26
26
27
-
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.**
27
+
<!--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.**-->
28
28
29
29
<!-- TODO: Diagram -->
30
30
31
+
<!--
31
32
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.
32
33
33
34
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.
@@ -36,7 +37,7 @@ Each React component is a JavaScript function that may contain some markup that
36
37
37
38
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.
38
39
39
-
<!-- ## Converting HTML to PSX
40
+
## Converting HTML to PSX
40
41
41
42
Suppose that you have some (perfectly valid) HTML:
0 commit comments