|
| 1 | +importReactfrom'react' |
| 2 | + |
| 3 | +conststyles={ |
| 4 | +container:{ |
| 5 | +display:'flex'as'flex', |
| 6 | +flexDirection:'column'as'column', |
| 7 | +backgroundColor:'#6a67ce', |
| 8 | +color:'white', |
| 9 | +padding:'0.5rem', |
| 10 | +}, |
| 11 | +title:{ |
| 12 | +fontWeight:'bold', |
| 13 | +}, |
| 14 | +} |
| 15 | + |
| 16 | +constNewUserExperienceTutorial=()=>{ |
| 17 | +return( |
| 18 | +<divcss={styles.container}> |
| 19 | +<div> |
| 20 | +<h3css={styles.title}>What To Do</h3> |
| 21 | +<p>Update the editor code and press save to to complete the list of "Tasks".</p> |
| 22 | +</div> |
| 23 | +<div> |
| 24 | +<h3css={styles.title}>How It Works</h3> |
| 25 | +<p> |
| 26 | + When you press save in the editor, CodeRoad runs tests to check if you completed the current task and can |
| 27 | + continue to the next task. |
| 28 | +</p> |
| 29 | +<p> |
| 30 | + Progress is tracked and advanced by using Git in the background. On startup, CodeRoad launches a new local Git |
| 31 | + repo. New tasks are loaded as new commits, and your task solution code is automatically saved as the next Git |
| 32 | + commit. |
| 33 | +</p> |
| 34 | +</div> |
| 35 | +<div> |
| 36 | +<h3css={styles.title}>How to Debug</h3> |
| 37 | +<p>You can debug a tutorial in a number of ways:</p> |
| 38 | +<ol> |
| 39 | +<li>1. Run the VSCode Debugger located in the left hand panel and add breakpoints to the code</li> |
| 40 | +<li>2. Run the tests in the command line (eg. `npm run test`)</li> |
| 41 | +<li>3. Press save in the editor and read the failed test output in the console output</li> |
| 42 | +</ol> |
| 43 | +</div> |
| 44 | +</div> |
| 45 | +) |
| 46 | +} |
| 47 | + |
| 48 | +exportdefaultNewUserExperienceTutorial |