That's right!
- - -``` +=== "index.js" + + ```js + async function handleFormSubmit(e) { + e.preventDefault(); + disable(textarea); + disable(button); + show(loadingMessage); + hide(errorMessage); + try { + await submitForm(textarea.value); + show(successMessage); + hide(form); + } catch (err) { + show(errorMessage); + errorMessage.textContent = err.message; + } finally { + hide(loadingMessage); + enable(textarea); + enable(button); + } + } + + function handleTextareaChange() { + if (textarea.value.length === 0) { + disable(button); + } else { + enable(button); + } + } + + function hide(el) { + el.style.display = "none"; + } + + function show(el) { + el.style.display = ""; + } + + function enable(el) { + el.disabled = false; + } + + function disable(el) { + el.disabled = true; + } + + function submitForm(answer) { + // Pretend it's hitting the network. + return new Promise((resolve, reject) => { + setTimeout(() => { + if (answer.toLowerCase() == "istanbul") { + resolve(); + } else { + reject(new Error("Good guess but a wrong answer. Try again!")); + } + }, 1500); + }); + } + + let form = document.getElementById("form"); + let textarea = document.getElementById("textarea"); + let button = document.getElementById("button"); + let loadingMessage = document.getElementById("loading"); + let errorMessage = document.getElementById("error"); + let successMessage = document.getElementById("success"); + form.onsubmit = handleFormSubmit; + textarea.oninput = handleTextareaChange; + ``` + +=== "index.html" + + ```html + +That's right!
+ + + ``` + +=== ":material-play: Run" + + ```html + # TODO + ``` Manipulating the UI imperatively works well enough for isolated examples, but it gets exponentially more difficult to manage in more complex systems. Imagine updating a page full of different forms like this one. Adding a new UI element or a new interaction would require carefully checking all existing code to make sure you haven't introduced a bug (for example, forgetting to show or hide something). @@ -141,7 +145,7 @@ You've seen how to implement a form imperatively above. To better understand how 1. **Identify** your component's different visual states 2. **Determine** what triggers those state changes -3. **Represent** the state in memory using `useState` +3. **Represent** the state in memory using `use_state` 4. **Remove** any non-essential state variables 5. **Connect** the event handlers to set the state @@ -159,136 +163,71 @@ First, you need to visualize all the different "states" of the UI the user might Just like a designer, you'll want to "mock up" or create "mocks" for the different states before you add logic. For example, here is a mock for just the visual part of the form. This mock is controlled by a prop called `status` with a default value of `'empty'`: -```js -export default function Form({ status = "empty" }) { - if (status === "success") { - returnThat's right!
; - } - return ( - <> -City quiz
-- In which city is there a billboard that turns air into drinkable - water? -
- - - ); -} -``` +=== "app.py" + + ```python + {% include "../../examples/managing_state/basic_form_component.py" start="# start" %} + ``` + +=== ":material-play: Run" + + ```python + # TODO + ``` You could call that prop anything you like, the naming is not important. Try editing `status = 'empty'` to `status = 'success'` to see the success message appear. Mocking lets you quickly iterate on the UI before you wire up any logic. Here is a more fleshed out prototype of the same component, still "controlled" by the `status` prop: -```js -export default function Form({ - // Try 'submitting', 'error', 'success': - status = "empty", -}) { - if (status === "success") { - returnThat's right!
; - } - return ( - <> -City quiz
-- In which city is there a billboard that turns air into drinkable - water? -
- - - ); -} -``` +=== "app.py" -```css -.Error { - color: red; -} -``` + ```python + {% include "../../examples/managing_state/conditional_form_component.py" start="# start" %} + ``` -Form ({status}):
- -That's right!
; - } - return ( - - ); -} -``` + ??? "Show Details" -```css -section { - border-bottom: 1px solid #aaa; - padding: 20px; -} -h4 { - color: #222; -} -body { - margin: 0; -} -.Error { - color: red; -} -``` + If a component has a lot of visual states, it can be convenient to show them all on one page: + + === "app.py" -Pages like this are often called "living styleguides" or "storybooks". + ```python + {% include "../../examples/managing_state/multiple_form_components.py" start="# start" %} + ``` -That's right!
; - } - - async function handleSubmit(e) { - e.preventDefault(); - setStatus("submitting"); - try { - await submitForm(answer); - setStatus("success"); - } catch (err) { - setStatus("typing"); - setError(err); - } - } - - function handleTextareaChange(e) { - setAnswer(e.target.value); - } - - return ( - <> -City quiz
-- In which city is there a billboard that turns air into drinkable - water? -
- - - ); -} - -function submitForm(answer) { - // Pretend it's hitting the network. - return new Promise((resolve, reject) => { - setTimeout(() => { - let shouldError = answer.toLowerCase() !== "lima"; - if (shouldError) { - reject(new Error("Good guess but a wrong answer. Try again!")); - } else { - resolve(); - } - }, 1500); - }); -} -``` +=== "app.py" -```css -.Error { - color: red; -} -``` + ```python + {% include "../../examples/managing_state/stateful_form_component.py" start="# start" %} + ``` + +=== "styles.css" + + ```css + {% include "../../examples/managing_state/conditional_form_component.css" %} + ``` + +=== ":material-play: Run" + + ```python + # TODO + ``` Although this code is longer than the original imperative example, it is much less fragile. Expressing all interactions as state changes lets you later introduce new visual states without breaking existing ones. It also lets you change what should be displayed in each state without changing the logic of the interaction itself. -
-Make it so that clicking on the picture _removes_ the `background--active` CSS class from the outer `
`, but _adds_ the `picture--active` class to the `![]()
`. Clicking the background again should restore the original CSS classes.
+ **Challenge 1 of 3: Add and remove a CSS class**
-Visually, you should expect that clicking on the picture removes the purple background and highlights the picture border. Clicking outside the picture highlights the background, but removes the picture border highlight.
+ Make it so that clicking on the picture _removes_ the `background--active` CSS class from the outer `
`, but _adds_ the `picture--active` class to the `![]()
`. Clicking the background again should restore the original CSS classes.
-```js
-export default function Picture() {
- return (
-
-
-This component has two visual states: when the image is active, and when the image is inactive:
-
-- When the image is active, the CSS classes are `background` and `picture picture--active`.
-- When the image is inactive, the CSS classes are `background background--active` and `picture`.
-
-A single boolean state variable is enough to remember whether the image is active. The original task was to remove or add CSS classes. However, in React you need to _describe_ what you want to see rather than _manipulate_ the UI elements. So you need to calculate both CSS classes based on the current state. You also need to [stop the propagation](/learn/responding-to-events#stopping-propagation) so that clicking the image doesn't register as a click on the background.
-
-Verify that this version works by clicking the image and then outside of it:
-
-```js
-import { useState } from "react";
-
-export default function Picture() {
- const [isActive, setIsActive] = useState(false);
-
- let backgroundClassName = "background";
- let pictureClassName = "picture";
- if (isActive) {
- pictureClassName += " picture--active";
- } else {
- backgroundClassName += " background--active";
- }
-
- return (
-
- 
-
- );
-}
-```
+ Visually, you should expect that clicking on the picture removes the purple background and highlights the picture border. Clicking outside the picture highlights the background, but removes the picture border highlight.
-```css
-body {
- margin: 0;
- padding: 0;
- height: 250px;
-}
-
-.background {
- width: 100vw;
- height: 100vh;
- display: flex;
- justify-content: center;
- align-items: center;
- background: #eee;
-}
-
-.background--active {
- background: #a6b5ff;
-}
-
-.picture {
- width: 200px;
- height: 200px;
- border-radius: 10px;
-}
-
-.picture--active {
- border: 5px solid #a6b5ff;
-}
-```
+ === "picture.py"
-
- setIsActive(false)}
- >
- ![]()
{
- e.stopPropagation();
- setIsActive(true);
- }}
- className={pictureClassName}
- alt="Rainbow houses in Kampung Pelangi, Indonesia"
- src="https://i.imgur.com/5qwVYb1.jpeg"
- />
-
- );
-}
-```
+ ```python
+ {% include "../../examples/managing_state/picture_component.py" start="# start" %}
+ ```
-```css
-body {
- margin: 0;
- padding: 0;
- height: 250px;
-}
-
-.background {
- width: 100vw;
- height: 100vh;
- display: flex;
- justify-content: center;
- align-items: center;
- background: #eee;
-}
-
-.background--active {
- background: #a6b5ff;
-}
-
-.picture {
- width: 200px;
- height: 200px;
- border-radius: 10px;
- border: 5px solid transparent;
-}
-
-.picture--active {
- border: 5px solid #a6b5ff;
-}
-```
+ === "styles.css"
-Alternatively, you could return two separate chunks of JSX:
-
-```js
-import { useState } from "react";
-
-export default function Picture() {
- const [isActive, setIsActive] = useState(false);
- if (isActive) {
- return (
- setIsActive(false)}>
- e.stopPropagation()}
- />
-
- );
- }
- return (
- e.stopPropagation()}
- />
-
- setIsActive(true)}
- />
-
- );
-}
-```
+ ```css
+ {% include "../../examples/managing_state/picture_component.css" %}
+ ```
-```css
-body {
- margin: 0;
- padding: 0;
- height: 250px;
-}
-
-.background {
- width: 100vw;
- height: 100vh;
- display: flex;
- justify-content: center;
- align-items: center;
- background: #eee;
-}
-
-.background--active {
- background: #a6b5ff;
-}
-
-.picture {
- width: 200px;
- height: 200px;
- border-radius: 10px;
- border: 5px solid transparent;
-}
-
-.picture--active {
- border: 5px solid #a6b5ff;
-}
-```
+ ??? "Show Solution"
-Keep in mind that if two different JSX chunks describe the same tree, their nesting (first ` setIsActive(true)}
- />
- ` → first `![]()
`) has to line up. Otherwise, toggling `isActive` would recreate the whole tree below and [reset its state.](/learn/preserving-and-resetting-state) This is why, if a similar JSX tree gets returned in both cases, it is better to write them as a single piece of JSX.
-
-
-
-#### Profile editor
-
-Here is a small form implemented with plain JavaScript and DOM. Play with it to understand its behavior:
-
-```js
-function handleFormSubmit(e) {
- e.preventDefault();
- if (editButton.textContent === "Edit Profile") {
- editButton.textContent = "Save Profile";
- hide(firstNameText);
- hide(lastNameText);
- show(firstNameInput);
- show(lastNameInput);
- } else {
- editButton.textContent = "Edit Profile";
- hide(firstNameInput);
- hide(lastNameInput);
- show(firstNameText);
- show(lastNameText);
- }
-}
-
-function handleFirstNameChange() {
- firstNameText.textContent = firstNameInput.value;
- helloText.textContent =
- "Hello " + firstNameInput.value + " " + lastNameInput.value + "!";
-}
-
-function handleLastNameChange() {
- lastNameText.textContent = lastNameInput.value;
- helloText.textContent =
- "Hello " + firstNameInput.value + " " + lastNameInput.value + "!";
-}
-
-function hide(el) {
- el.style.display = "none";
-}
-
-function show(el) {
- el.style.display = "";
-}
-
-let form = document.getElementById("form");
-let editButton = document.getElementById("editButton");
-let firstNameInput = document.getElementById("firstNameInput");
-let firstNameText = document.getElementById("firstNameText");
-let lastNameInput = document.getElementById("lastNameInput");
-let lastNameText = document.getElementById("lastNameText");
-let helloText = document.getElementById("helloText");
-form.onsubmit = handleFormSubmit;
-firstNameInput.oninput = handleFirstNameChange;
-lastNameInput.oninput = handleLastNameChange;
-```
+ This component has two visual states: when the image is active, and when the image is inactive:
-```js
-{
- "hardReloadOnChange": true
-}
-```
+ - When the image is active, the CSS classes are `background` and `picture picture--active`.
+ - When the image is inactive, the CSS classes are `background background--active` and `picture`.
-```html
-
-
-
-```
+ A single boolean state variable is enough to remember whether the image is active. The original task was to remove or add CSS classes. However, in React you need to _describe_ what you want to see rather than _manipulate_ the UI elements. So you need to calculate both CSS classes based on the current state. You also need to [stop the propagation](./responding-to-events.md#stopping-propagation) so that clicking the image doesn't register as a click on the background.
-This form switches between two modes: in the editing mode, you see the inputs, and in the viewing mode, you only see the result. The button label changes between "Edit" and "Save" depending on the mode you're in. When you change the inputs, the welcome message at the bottom updates in real time.
-
-Your task is to reimplement it in React in the sandbox below. For your convenience, the markup was already converted to JSX, but you'll need to make it show and hide the inputs like the original does.
-
-Make sure that it updates the text at the bottom, too!
-
-```js
-export default function EditProfile() {
- return (
-
- );
-}
-```
+ Verify that this version works by clicking the image and then outside of it:
-```css
-label {
- display: block;
- margin-bottom: 20px;
-}
-```
+ === "app.py"
-
-
-You will need two state variables to hold the input values: `firstName` and `lastName`. You're also going to need an `isEditing` state variable that holds whether to display the inputs or not. You should _not_ need a `fullName` variable because the full name can always be calculated from the `firstName` and the `lastName`.
-
-Finally, you should use [conditional rendering](/learn/conditional-rendering) to show or hide the inputs depending on `isEditing`.
-
-```js
-import { useState } from "react";
-
-export default function EditProfile() {
- const [isEditing, setIsEditing] = useState(false);
- const [firstName, setFirstName] = useState("Jane");
- const [lastName, setLastName] = useState("Jacobs");
-
- return (
-
- );
-}
-```
+ ```python
+ {% include "../../examples/managing_state/stateful_picture_component.py" start="# start" %}
+ ```
-```css
-label {
- display: block;
- margin-bottom: 20px;
-}
-```
+ === "styles.css"
-Compare this solution to the original imperative code. How are they different?
-
-
-
-#### Refactor the imperative solution without React
-
-Here is the original sandbox from the previous challenge, written imperatively without React:
-
-```js
-function handleFormSubmit(e) {
- e.preventDefault();
- if (editButton.textContent === "Edit Profile") {
- editButton.textContent = "Save Profile";
- hide(firstNameText);
- hide(lastNameText);
- show(firstNameInput);
- show(lastNameInput);
- } else {
- editButton.textContent = "Edit Profile";
- hide(firstNameInput);
- hide(lastNameInput);
- show(firstNameText);
- show(lastNameText);
- }
-}
-
-function handleFirstNameChange() {
- firstNameText.textContent = firstNameInput.value;
- helloText.textContent =
- "Hello " + firstNameInput.value + " " + lastNameInput.value + "!";
-}
-
-function handleLastNameChange() {
- lastNameText.textContent = lastNameInput.value;
- helloText.textContent =
- "Hello " + firstNameInput.value + " " + lastNameInput.value + "!";
-}
-
-function hide(el) {
- el.style.display = "none";
-}
-
-function show(el) {
- el.style.display = "";
-}
-
-let form = document.getElementById("form");
-let editButton = document.getElementById("editButton");
-let firstNameInput = document.getElementById("firstNameInput");
-let firstNameText = document.getElementById("firstNameText");
-let lastNameInput = document.getElementById("lastNameInput");
-let lastNameText = document.getElementById("lastNameText");
-let helloText = document.getElementById("helloText");
-form.onsubmit = handleFormSubmit;
-firstNameInput.oninput = handleFirstNameChange;
-lastNameInput.oninput = handleLastNameChange;
-```
+ ```css
+ {% include "../../examples/managing_state/picture_component.css" %}
+ ```
-```js
-{
- "hardReloadOnChange": true
-}
-```
+ === ":material-play: Run"
-```html
-
-
-
-```
+ ```python
+ # TODO
+ ```
-Imagine React didn't exist. Can you refactor this code in a way that makes the logic less fragile and more similar to the React version? What would it look like if the state was explicit, like in React?
-
-If you're struggling to think where to start, the stub below already has most of the structure in place. If you start here, fill in the missing logic in the `updateDOM` function. (Refer to the original code where needed.)
-
-```js
-let firstName = "Jane";
-let lastName = "Jacobs";
-let isEditing = false;
-
-function handleFormSubmit(e) {
- e.preventDefault();
- setIsEditing(!isEditing);
-}
-
-function handleFirstNameChange(e) {
- setFirstName(e.target.value);
-}
-
-function handleLastNameChange(e) {
- setLastName(e.target.value);
-}
-
-function setFirstName(value) {
- firstName = value;
- updateDOM();
-}
-
-function setLastName(value) {
- lastName = value;
- updateDOM();
-}
-
-function setIsEditing(value) {
- isEditing = value;
- updateDOM();
-}
-
-function updateDOM() {
- if (isEditing) {
- editButton.textContent = "Save Profile";
- // TODO: show inputs, hide content
- } else {
- editButton.textContent = "Edit Profile";
- // TODO: hide inputs, show content
- }
- // TODO: update text labels
-}
-
-function hide(el) {
- el.style.display = "none";
-}
-
-function show(el) {
- el.style.display = "";
-}
-
-let form = document.getElementById("form");
-let editButton = document.getElementById("editButton");
-let firstNameInput = document.getElementById("firstNameInput");
-let firstNameText = document.getElementById("firstNameText");
-let lastNameInput = document.getElementById("lastNameInput");
-let lastNameText = document.getElementById("lastNameText");
-let helloText = document.getElementById("helloText");
-form.onsubmit = handleFormSubmit;
-firstNameInput.oninput = handleFirstNameChange;
-lastNameInput.oninput = handleLastNameChange;
-```
+ Alternatively, you could return two separate chunks of HTML:
-```js
-{
- "hardReloadOnChange": true
-}
-```
+ === "app.py"
-```html
-
-
-
-```
+ ```python
+ {% include "../../examples/managing_state/stateful_picture_component.py" start="# start" %}
+ ```
-
-
-The missing logic included toggling the display of inputs and content, and updating the labels:
-
-```js
-let firstName = "Jane";
-let lastName = "Jacobs";
-let isEditing = false;
-
-function handleFormSubmit(e) {
- e.preventDefault();
- setIsEditing(!isEditing);
-}
-
-function handleFirstNameChange(e) {
- setFirstName(e.target.value);
-}
-
-function handleLastNameChange(e) {
- setLastName(e.target.value);
-}
-
-function setFirstName(value) {
- firstName = value;
- updateDOM();
-}
-
-function setLastName(value) {
- lastName = value;
- updateDOM();
-}
-
-function setIsEditing(value) {
- isEditing = value;
- updateDOM();
-}
-
-function updateDOM() {
- if (isEditing) {
- editButton.textContent = "Save Profile";
- hide(firstNameText);
- hide(lastNameText);
- show(firstNameInput);
- show(lastNameInput);
- } else {
- editButton.textContent = "Edit Profile";
- hide(firstNameInput);
- hide(lastNameInput);
- show(firstNameText);
- show(lastNameText);
- }
- firstNameText.textContent = firstName;
- lastNameText.textContent = lastName;
- helloText.textContent = "Hello " + firstName + " " + lastName + "!";
-}
-
-function hide(el) {
- el.style.display = "none";
-}
-
-function show(el) {
- el.style.display = "";
-}
-
-let form = document.getElementById("form");
-let editButton = document.getElementById("editButton");
-let firstNameInput = document.getElementById("firstNameInput");
-let firstNameText = document.getElementById("firstNameText");
-let lastNameInput = document.getElementById("lastNameInput");
-let lastNameText = document.getElementById("lastNameText");
-let helloText = document.getElementById("helloText");
-form.onsubmit = handleFormSubmit;
-firstNameInput.oninput = handleFirstNameChange;
-lastNameInput.oninput = handleLastNameChange;
-```
+ === "styles.css"
-```js
-{
- "hardReloadOnChange": true
-}
-```
+ ```css
+ {% include "../../examples/managing_state/picture_component.css" %}
+ ```
-```html
-
-
-
-```
+ === ":material-play: Run"
+
+ ```python
+ # TODO
+ ```
+
+ Keep in mind that if two different HTML chunks describe the same tree, their nesting (first `html.div` → first `html.img`) has to line up. Otherwise, toggling `is_active` would recreate the whole tree below and [reset its state.](./preserving-and-resetting-state.md) This is why, if a similar HTML tree gets returned in both cases, it is better to write them as a single piece of HTML.
+
+
+
+=== "2. Profile editor"
+
+
+
+ **Challenge 2 of 3: Profile editor**
-The `updateDOM` function you wrote shows what React does under the hood when you set the state. (However, React also avoids touching the DOM for properties that have not changed since the last time they were set.)
+ Here is a small form implemented with plain JavaScript and DOM. Play with it to understand its behavior:
-
+ === "index.js"
-
+ ```js
+ function handleFormSubmit(e) {
+ e.preventDefault();
+ if (editButton.textContent === "Edit Profile") {
+ editButton.textContent = "Save Profile";
+ hide(firstNameText);
+ hide(lastNameText);
+ show(firstNameInput);
+ show(lastNameInput);
+ } else {
+ editButton.textContent = "Edit Profile";
+ hide(firstNameInput);
+ hide(lastNameInput);
+ show(firstNameText);
+ show(lastNameText);
+ }
+ }
+
+ function handleFirstNameChange() {
+ firstNameText.textContent = firstNameInput.value;
+ helloText.textContent =
+ "Hello " + firstNameInput.value + " " + lastNameInput.value + "!";
+ }
+
+ function handleLastNameChange() {
+ lastNameText.textContent = lastNameInput.value;
+ helloText.textContent =
+ "Hello " + firstNameInput.value + " " + lastNameInput.value + "!";
+ }
+
+ function hide(el) {
+ el.style.display = "none";
+ }
+
+ function show(el) {
+ el.style.display = "";
+ }
+
+ let form = document.getElementById("form");
+ let editButton = document.getElementById("editButton");
+ let firstNameInput = document.getElementById("firstNameInput");
+ let firstNameText = document.getElementById("firstNameText");
+ let lastNameInput = document.getElementById("lastNameInput");
+ let lastNameText = document.getElementById("lastNameText");
+ let helloText = document.getElementById("helloText");
+ form.onsubmit = handleFormSubmit;
+ firstNameInput.oninput = handleFirstNameChange;
+ lastNameInput.oninput = handleLastNameChange;
+ ```
+
+ === "index.html"
+
+ ```html
+
+
+
+ ```
+
+ This form switches between two modes: in the editing mode, you see the inputs, and in the viewing mode, you only see the result. The button label changes between "Edit" and "Save" depending on the mode you're in. When you change the inputs, the welcome message at the bottom updates in real time.
+
+ Your task is to reimplement it in React in the sandbox below. For your convenience, the markup was already converted to JSX, but you'll need to make it show and hide the inputs like the original does.
+
+ Make sure that it updates the text at the bottom, too!
+
+ === "app.py"
+
+ ```js
+ export default function EditProfile() {
+ return (
+
+ );
+ }
+ ```
+
+ === "styles.css"
+
+ ```css
+ label {
+ display: block;
+ margin-bottom: 20px;
+ }
+ ```
+
+ ??? note "Show Solution"
+
+ You will need two state variables to hold the input values: `firstName` and `lastName`. You're also going to need an `isEditing` state variable that holds whether to display the inputs or not. You should _not_ need a `fullName` variable because the full name can always be calculated from the `firstName` and the `lastName`.
+
+ Finally, you should use [conditional rendering](./conditional-rendering.md) to show or hide the inputs depending on `isEditing`.
+
+ === "app.py"
+
+ ```js
+ import { useState } from "react";
+
+ export default function EditProfile() {
+ const [isEditing, setIsEditing] = useState(false);
+ const [firstName, setFirstName] = useState("Jane");
+ const [lastName, setLastName] = useState("Jacobs");
+
+ return (
+
+ );
+ }
+ ```
+
+ === "styles.css"
+
+ ```css
+ label {
+ display: block;
+ margin-bottom: 20px;
+ }
+ ```
+
+ === ":material-play: Run"
+
+ ```html
+ # TODO
+ ```
+
+ Compare this solution to the original imperative code. How are they different?
+
+
+
+=== "3. Refactor the imperative solution without React"
+
+
+
+ **Challenge 3 of 3: Refactor the imperative solution without React**
+
+ Here is the original sandbox from the previous challenge, written imperatively without React:
+
+ === "app.py"
+
+ ```js
+ function handleFormSubmit(e) {
+ e.preventDefault();
+ if (editButton.textContent === "Edit Profile") {
+ editButton.textContent = "Save Profile";
+ hide(firstNameText);
+ hide(lastNameText);
+ show(firstNameInput);
+ show(lastNameInput);
+ } else {
+ editButton.textContent = "Edit Profile";
+ hide(firstNameInput);
+ hide(lastNameInput);
+ show(firstNameText);
+ show(lastNameText);
+ }
+ }
+
+ function handleFirstNameChange() {
+ firstNameText.textContent = firstNameInput.value;
+ helloText.textContent =
+ "Hello " + firstNameInput.value + " " + lastNameInput.value + "!";
+ }
+
+ function handleLastNameChange() {
+ lastNameText.textContent = lastNameInput.value;
+ helloText.textContent =
+ "Hello " + firstNameInput.value + " " + lastNameInput.value + "!";
+ }
+
+ function hide(el) {
+ el.style.display = "none";
+ }
+
+ function show(el) {
+ el.style.display = "";
+ }
+
+ let form = document.getElementById("form");
+ let editButton = document.getElementById("editButton");
+ let firstNameInput = document.getElementById("firstNameInput");
+ let firstNameText = document.getElementById("firstNameText");
+ let lastNameInput = document.getElementById("lastNameInput");
+ let lastNameText = document.getElementById("lastNameText");
+ let helloText = document.getElementById("helloText");
+ form.onsubmit = handleFormSubmit;
+ firstNameInput.oninput = handleFirstNameChange;
+ lastNameInput.oninput = handleLastNameChange;
+ ```
+
+ === "index.html"
+
+ ```html
+
+
+
+ ```
+
+ Imagine React didn't exist. Can you refactor this code in a way that makes the logic less fragile and more similar to the React version? What would it look like if the state was explicit, like in React?
+
+ If you're struggling to think where to start, the stub below already has most of the structure in place. If you start here, fill in the missing logic in the `updateDOM` function. (Refer to the original code where needed.)
+
+ === "app.py"
+
+ ```js
+ let firstName = "Jane";
+ let lastName = "Jacobs";
+ let isEditing = false;
+
+ function handleFormSubmit(e) {
+ e.preventDefault();
+ setIsEditing(!isEditing);
+ }
+
+ function handleFirstNameChange(e) {
+ setFirstName(e.target.value);
+ }
+
+ function handleLastNameChange(e) {
+ setLastName(e.target.value);
+ }
+
+ function setFirstName(value) {
+ firstName = value;
+ updateDOM();
+ }
+
+ function setLastName(value) {
+ lastName = value;
+ updateDOM();
+ }
+
+ function setIsEditing(value) {
+ isEditing = value;
+ updateDOM();
+ }
+
+ function updateDOM() {
+ if (isEditing) {
+ editButton.textContent = "Save Profile";
+ // TODO: show inputs, hide content
+ } else {
+ editButton.textContent = "Edit Profile";
+ // TODO: hide inputs, show content
+ }
+ // TODO: update text labels
+ }
+
+ function hide(el) {
+ el.style.display = "none";
+ }
+
+ function show(el) {
+ el.style.display = "";
+ }
+
+ let form = document.getElementById("form");
+ let editButton = document.getElementById("editButton");
+ let firstNameInput = document.getElementById("firstNameInput");
+ let firstNameText = document.getElementById("firstNameText");
+ let lastNameInput = document.getElementById("lastNameInput");
+ let lastNameText = document.getElementById("lastNameText");
+ let helloText = document.getElementById("helloText");
+ form.onsubmit = handleFormSubmit;
+ firstNameInput.oninput = handleFirstNameChange;
+ lastNameInput.oninput = handleLastNameChange;
+ ```
+
+ === "index.html"
+
+ ```html
+
+
+
+ ```
+
+ ??? "Show solution"
+
+ The missing logic included toggling the display of inputs and content, and updating the labels:
+
+ === "app.py"
+
+ ```js
+ let firstName = "Jane";
+ let lastName = "Jacobs";
+ let isEditing = false;
+
+ function handleFormSubmit(e) {
+ e.preventDefault();
+ setIsEditing(!isEditing);
+ }
+
+ function handleFirstNameChange(e) {
+ setFirstName(e.target.value);
+ }
+
+ function handleLastNameChange(e) {
+ setLastName(e.target.value);
+ }
+
+ function setFirstName(value) {
+ firstName = value;
+ updateDOM();
+ }
+
+ function setLastName(value) {
+ lastName = value;
+ updateDOM();
+ }
+
+ function setIsEditing(value) {
+ isEditing = value;
+ updateDOM();
+ }
+
+ function updateDOM() {
+ if (isEditing) {
+ editButton.textContent = "Save Profile";
+ hide(firstNameText);
+ hide(lastNameText);
+ show(firstNameInput);
+ show(lastNameInput);
+ } else {
+ editButton.textContent = "Edit Profile";
+ hide(firstNameInput);
+ hide(lastNameInput);
+ show(firstNameText);
+ show(lastNameText);
+ }
+ firstNameText.textContent = firstName;
+ lastNameText.textContent = lastName;
+ helloText.textContent = "Hello " + firstName + " " + lastName + "!";
+ }
+
+ function hide(el) {
+ el.style.display = "none";
+ }
+
+ function show(el) {
+ el.style.display = "";
+ }
+
+ let form = document.getElementById("form");
+ let editButton = document.getElementById("editButton");
+ let firstNameInput = document.getElementById("firstNameInput");
+ let firstNameText = document.getElementById("firstNameText");
+ let lastNameInput = document.getElementById("lastNameInput");
+ let lastNameText = document.getElementById("lastNameText");
+ let helloText = document.getElementById("helloText");
+ form.onsubmit = handleFormSubmit;
+ firstNameInput.oninput = handleFirstNameChange;
+ lastNameInput.oninput = handleLastNameChange;
+ ```
+
+ === "index.html"
+
+ ```html
+
+
+
+ ```
+
+ === ":material-play: Run"
+
+ ```html
+ # TODO
+ ```
+
+ The `updateDOM` function you wrote shows what React does under the hood when you set the state. (However, React also avoids touching the DOM for properties that have not changed since the last time they were set.)
+
+
diff --git a/docs/src/learn/tools-and-packages.md b/docs/src/learn/tools-and-packages.md
new file mode 100644
index 000000000..e831b2985
--- /dev/null
+++ b/docs/src/learn/tools-and-packages.md
@@ -0,0 +1,20 @@
++ +Use external ReactPy packages and tools to help you build your projects. + +
+ +## 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). diff --git a/docs/src/learn/tutorial-tic-tac-toe.md b/docs/src/learn/tutorial-tic-tac-toe.md index e92f53bf2..4bfc2537c 100644 --- a/docs/src/learn/tutorial-tic-tac-toe.md +++ b/docs/src/learn/tutorial-tic-tac-toe.md @@ -51,7 +51,7 @@ Once you've played around with the finished tic-tac-toe game, keep scrolling. Yo ## Setup for the tutorial -In the code example below, click **Run** to open the editor in a new tab using the website Jupyter. Jupyter lets you write code in your browser and preview how your users will see the app you've created. The new tab should display an empty square and the starter code for this tutorial. +In the code example below, click **Run** to open the example in your browser and preview the provided code. The run tab below should display an empty square. === "app.py" @@ -77,9 +77,8 @@ In the code example below, click **Run** to open the editor in a new tab using t 1. Install [Python](https://www.python.org/downloads/) 2. Copy the example above into a file called `app.py` - 3. Install ReactPy for your [backend](../reference/fastapi.md), for example `pip install reactpy[fastapi]` - 4. Add `reactpy.run(...)` to the end of your Python file - 5. Run `python app.py` to start a local server and follow the prompts to view the code running in a browser + 3. [Create a standalone ReactPy app](./creating-a-react-app.md) to run the code + 4. Run `python app.py` to start a local server and follow the prompts to view the code running in a browser If you get stuck, don't let this stop you! Follow along online instead and try a local setup again later. @@ -89,28 +88,6 @@ Now that you're set up, let's get an overview of React! ### Inspecting the starter code -In Jupyter you'll see three main sections: - - - -![TODO: screenshot of Jupyter]() - -1. The _Files_ section with a list of files like `tic-tac-toe.ipynb` -2. The _interactive code notebook_ where you'll see the source code for each step -3. The _run button_ located on top of the notebook in the command strip - -The `tic-tac-toe.ipynb` file should be selected in the _Files_ section. Click on the first code box, where the contents of that _code editor_ should be: - -```python linenums="0" -{% include "../../examples/tutorial_tic_tac_toe/setup_for_the_tutorial.py" start="# start" %} -``` - -After clicking the _run button_ the notebook should be displaying a square with a X in it like this: - - - -![TODO: x-filled square]() - Now let's have a look at the files in the starter code. #### `App.js` diff --git a/docs/src/reference/jinja.md b/docs/src/reference/jinja.md new file mode 100644 index 000000000..e69de29bb