Viewing Program

Program Data

Program thumbnail for "{props.program.title}"

Title	React.js Starter Guide (works on Khan Academy, tutorial)
ID	5159517843537920
Created	6 months ago, 1719698002484
Updated	6 months ago, 1719698024200
Code	<!DOCTYPE html> <!-- React.js Starter Guide (works on Khan Academy, tutorial) by LeaferStudios (https://www.khanacademy.org/profile/kaid_553656479258879622339276/) Released 29 June 2024 You can subscribe to me here: https://www.khanacademy.org/computer-programming/leaferstudios/4934504502870016 Tutorial Overview: Have you tried to use React.js on Khan Academy's webpage environment but found that it just didn't work? Here is how to properly run React.js on Khan Academy. You have to use Babel, a free JavaScript transcompiler to make things work. Furthermore, some versions of React.js and Babel will not work on Khan Academy, so you need to follow the steps below carefully. Have an interesting tutorial idea? Please share your feedback in the Tips & Thanks of this program on Khan Academy and I hope to see you in my next program! --> <html> <!-- Head --> <head> <meta charset="utf-8"> <title>React.js Starter Guide (works on Khan Academy, tutorial)</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.0.0-alpha-5b57bc6e3-20210921/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/paraiso-dark.min.css" rel="stylesheet"> <style> body { font-family: Helvetica, sans-serif; margin: 0; } .todo-container { max-width: 400px; margin: auto; padding: 20px; border: 1px solid #ddd; border-radius: 4px; } .todo-item { background-color: rgb(240, 240, 240); display: flex; justify-content: space-between; padding: 8px; border-bottom: 1px solid #ddd; } .todo-item:last-child { border-bottom: none; } .todo-item button { background: none; border: none; color: red; cursor: pointer; transition: all 0.1s; } .todo-item button:hover { background: rgb(0, 0, 0, 0.1); } #root { margin-bottom: 60px; } #main { padding: 30px 30px; } p { line-height: 24px; font-size: 16px; } a { color: rgb(8, 96, 148); text-decoration: none; transition: all 0.1s; } a:hover { color: rgb(0, 137, 222); text-decoration: underline; } #chip { border: none; border-radius: 50px; padding: 4px 10px; font-size: 14px; font-weight: 500; text-transform: uppercase; background-color: rgb(63, 117, 217); color: #FFF; user-select: none; letter-spacing: 0.6px; } input[type="text"] { width: 70%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; } button { padding: 8px 16px; background-color: #28a745; color: white; border: none; border-radius: 4px; cursor: pointer; margin-left: 5px; margin-right: 5px; transition: all 0.1s; } button:hover { background-color: #218838; } pre code { overflow: auto; font-size: 12px; line-height: 16px; border-radius: 2px; padding: 10px 15px !important; font-family: monospace; box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.21); } code { margin: 0; } footer { background-color: rgb(235, 235, 235); padding: 15px 10px; margin: 0; display: flex; justify-content: space-between; } </style> </head> <!-- Body --> <body> <div id='main'> <span id='chip'>Tutorial</span> <h1>React.js Starter Guide (works on Khan Academy)</h1> <p>by <a href='https://www.khanacademy.org/profile/kaid_553656479258879622339276/projects' target='_blank'>LeaferStudios</a></p> <p>Have you tried to use React.js on Khan Academy's webpage environment but found that it just didn't work? Here is how to properly run React.js on Khan Academy. You have to use Babel, a free JavaScript transcompiler to make things work. Furthermore, some versions of React.js and Babel will not work on Khan Academy, so you need to follow the steps below carefully.</p> <h2>CDN Links</h2> <p>The three CDN scripts we will use are:</p> <pre><code> <!-- React.js --> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.0.0-alpha-5b57bc6e3-20210921/umd/react.production.min.js"></script> <!-- ReactDOM --> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script> <!-- Babel --> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script> </code></pre> <h2>Babel Setup</h2> <p>To run React.js code on Khan Academy's webpage environment, we need to properly set up Babel. That is as easy as adding <code>type='text/babel'</code> to the <code><script></code> tag, as demonstrated below:</p> <pre><code><script type='text/babel'> // React code here </script></code></pre> <h2>Basic Setup</h2> <p>Below is a basic setup example. You have to use the exact same CDN links, otherwise it may not work.</p> <pre><code><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>React.js CDN Setup for Khan Academy</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.0.0-alpha-5b57bc6e3-20210921/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script> </head> <body> <div id='root'></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script> <script type='text/babel'> // React code here </script> </body> </html></code></pre> <h2>Conclusion</h2> <p>React.js can be run on Khan Academy's webpage environment, however not all features will work like they will on a regular code editor. Have an interesting tutorial idea? Please share your feedback in the Tips & Thanks of this program on Khan Academy and I hope to see you in my next program!</p> <h2>Proof That It Works</h2> <p>Below is a demonstration of a To-Do list application I programmed using React.js!</p> </div> <div id='root'></div> <footer> <p>© 2024 <a href='https://www.khanacademy.org/profile/kaid_553656479258879622339276/'>LeaferStudios</a></p> <p><a href='https://www.khanacademy.org/computer-programming/leaferstudios/4934504502870016' target='_blank'>Subscribe to Author</a></p> </footer> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script> <script type> hljs.initHighlightingOnLoad(); </script> <script type='text/babel'> const { useState } = React; function App() { const [tasks, setTasks] = useState([]); const [newTask, setNewTask] = useState(""); const addTask = () => { if (newTask.trim()) { setTasks([...tasks, newTask]); setNewTask(""); } }; const removeTask = (index) => { const newTasks = tasks.filter((_, i) => i !== index); setTasks(newTasks); }; return ( <div className="todo-container"> <h2>To-Do List Demonstration</h2> <p>by <a href='https://www.khanacademy.org/profile/kaid_553656479258879622339276/projects' target='_blank'>LeaferStudios</a></p> <input type="text" value={newTask} onChange={(e) => setNewTask(e.target.value)} placeholder="Add a new task" /> <button onClick={addTask}>Add</button> <ul> {tasks.map((task, index) => ( <li key={index} className="todo-item"> {task} <button onClick={() => removeTask(index)}>X</button> </li> ))} </ul> </div> ); } ReactDOM.render(<App />, document.getElementById('root')); </script> <script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script> <script type> var r = 600; var s = document.documentElement.clientWidth; window.parent.html2canvas = e => { try { html2canvas(document.body, { width: s, height: s, useCORS: true, }).then(e => { var c = document.createElement("canvas"); c.width = r; c.height = r; c.getContext('2d').drawImage(e, 0, 0, e.width, e.height, 0, 0, r, r); window.top.postMessage(c.toDataURL(), ""); }).catch(e => { alert("Thumbnail Script Error: " + e); }); } catch { window.top.postMessage(document.createElement("canvas").toDataURL(), ""); } }; </script> </body> </html> <!-- All code by LeaferStudios (https://www.khanacademy.org/profile/kaid_553656479258879622339276/) -->
Folds
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgJvi3ZGVCQw
Votes	3
Spin-Offs	0
Type	WEBPAGE
Width	400
Height	400
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	true
By Child	false
Author Nick	LeaferStudios
Author Name	LeaferStudios
Author ID	kaid_553656479258879622339276
Author Profile Access	PUBLIC

Archive Data

Added	6 months ago, 1719698543569
Updated	6 months ago, 1719698543569
Source Deleted	unknown