|
1 | 1 | import React from 'react'; |
2 | 2 | import createState from '../../../resources/state_tutorial_images/CreateState.png'; |
3 | | -import stateTable from '../../../resources/state_tutorial_images/StateTable.png'; |
4 | 3 | import codePreview from '../../../resources/state_tutorial_images/CodePreview.png'; |
5 | | -import deleteState from '../../../resources/state_tutorial_images/DeleteState.gif'; |
| 4 | +import fullStateManageTab from '../../../resources/state_tutorial_images/fullStateManageTab.png'; |
| 5 | +import table1 from '../../../resources/state_tutorial_images/table1.gif'; |
| 6 | +import table3 from '../../../resources/state_tutorial_images/table3.gif'; |
| 7 | +import deleteState2 from '../../../resources/state_tutorial_images/delete.gif'; |
| 8 | +import display from '../../../resources/state_tutorial_images/display.gif'; |
| 9 | +import codePreview2 from '../../../resources/state_tutorial_images/CodePreview2.png'; |
6 | 10 |
|
7 | 11 | const States: React.FC<{ |
8 | 12 | classes: any; |
9 | 13 | setPage: Function; |
10 | 14 | }> = ({ classes, setPage }) => { |
11 | 15 | return ( |
12 | 16 | <div className={classes.wrapper}> |
13 | | - <h1 className={classes.title}>State Features</h1> |
| 17 | + <h1 className={classes.title}>State Management</h1> |
14 | 18 | <hr /> |
15 | | - <h2>Create New State Hook</h2> |
| 19 | + <h2>Step 1: Click on the State Management Tab</h2> |
16 | 20 | <p className={classes.text}> |
17 | | - To create a new state hook for your prototype application by going to the Creation Panel tab in the bottom Panel. Type in a key |
18 | | - and value for the state hook and it's type. Once done, press the save button to save the state hook.<br/><br/> |
| 21 | + Within this tab, there are two sections: "Create/Edit" and "Display". |
| 22 | + <br/><br/> |
| 23 | + <div className={classes.imgWrapper}> |
| 24 | + <img width="600" height="145" src={fullStateManageTab} /> |
| 25 | + </div> |
| 26 | + </p> |
| 27 | + <h2>Step 2: Create a New State Variable</h2> |
| 28 | + <p className={classes.text}> |
| 29 | + In the "Create/Edit" section of the State Manager, you can declare a new state variable. First make sure that you have selected the correct component on the left. This new state variable will be created inside the component highlighted with a red dot (as shown below). |
| 30 | + <br/><br/>You can create your state variable with a key, an intial value, and a type (ex: string, number, boolean, etc).<br/><br/> |
19 | 31 | <div className={classes.imgWrapper}> |
20 | 32 | <img className={classes.medImg} src={createState} /> |
21 | 33 | </div> |
22 | 34 | <br/><br/> |
23 | | - Created state hooks can be viewed to the right in tabular form. This table will immediately add any created state hook.<br/><br/> |
| 35 | + You will now see your new state variable in the "Current Component State" table. Also, you can see the React Hook that has been created for this state variable. |
| 36 | + <br/><br/> |
24 | 37 | <div className={classes.imgWrapper}> |
25 | | - <img className={classes.medImg} src={stateTable} /> |
26 | | - </div><br></br> |
27 | | - Created state hooks will also be visible in the <span className={classes.notLink} onClick={() => setPage('Code Preview')} >code preview</span>.<br/><br/> |
| 38 | + <img width="600" src={table1} /> |
| 39 | + </div> |
| 40 | + </p> |
| 41 | + <h2>Step 3: Pass in Props from Parent Component</h2> |
| 42 | + <p className={classes.text}> |
| 43 | + In the "Create/Edit" section of the State Manager, you can also view props available from the parent component. You can choose to import any of the state variables, with or without their associated React Hooks. |
| 44 | + <br/><br/>Just click the plus sign next to the state you want to import into the current component. This will automatically update the "Passed In Props from Parent" table on the far right.<br/><br/> |
28 | 45 | <div className={classes.imgWrapper}> |
29 | | - <img className={classes.medImg} src={codePreview} /> |
| 46 | + <img width="1100" src={table3} /> |
30 | 47 | </div> |
31 | | - </p> |
32 | | - <hr /> |
33 | | - <h2>Delete State Hook</h2> |
| 48 | + </p> |
| 49 | + <h2>Step 4: Delete Any Unnecessary State Variables</h2> |
| 50 | + <p className={classes.text}> |
| 51 | + If there are any state variables you want to delete, you can do so in the "Create/Edit" tab! |
| 52 | + <br/><br/>You can delete a state variable that was created in the current component by clicking the X next to it in the "Current Component State" table. <br/><br/> |
| 53 | + You can also delete state from the "Passed In Props From Parent" table. This will delete the passed in props from the current component, but won't delete the original state variable inside the parent component. |
| 54 | + <br/><br/> |
| 55 | + For example, in the gif below, we can see the "num" state variable being deleted from the component "Row". Its associated React Hook is also automatically deleted. |
| 56 | + <br/><br/> |
| 57 | + Then, the "setDarkMode" React Hook is deleted from "Passed In Props From Parent: App". However, if we click over to the "App" parent component, the "setDarkMode" React Hook is still available. |
| 58 | + <br/><br/> |
| 59 | + <div className={classes.imgWrapper}> |
| 60 | + <img width="1300" src={deleteState2} /> |
| 61 | + </div> |
| 62 | + </p> |
| 63 | + <br/><br/> |
| 64 | + <h2>Step 5: Visualize the State Flow of Your Prototype Application</h2> |
34 | 65 | <p className={classes.text}> |
35 | | - To delete a created state hook, click the corresponding X for the state hook on the state hook table.<br/><br/> |
| 66 | + Once you've added all your state variables to your components, you can click on the "Display" section of the State Manager. Here, you can see a tree diagram that shows the relationship between the components you have created. Click on each component to see its state variables -- including passed in props! <br/><br/> |
| 67 | + On the left side of the screen, click on other root components (if using Classic React) or pages (if using Next.js or GatsbyJS) to see their tree diagrams too. |
| 68 | + <br/><br/> |
36 | 69 | <div className={classes.imgWrapper}> |
37 | | - <img className={classes.img} src={deleteState} /> |
38 | | - </div> |
| 70 | + <img width="1400" src={display} /> |
| 71 | + </div> |
| 72 | + <br/><br/> |
| 73 | + Created state variables and React Hooks will also be visible in the <span className={classes.notLink} onClick={() => setPage('Code Preview')} >code preview</span>.<br/><br/> |
| 74 | + You can see below that the "num" and its associated React Hook have been passed in to the "Row" component from its parent component. |
| 75 | + <br/><br/> |
| 76 | + On line 10, the state variable "darkMode" has been passed into the "Row" component from its parent, but without its React Hook, since we chose not to pass the hook down from the parent component. |
| 77 | + <br/><br/> |
| 78 | + <div className={classes.imgWrapper}> |
| 79 | + <img className={classes.medImg} src={codePreview2} /> |
| 80 | + </div> |
39 | 81 | </p> |
40 | 82 | <hr /> |
41 | 83 | </div> |
|
0 commit comments