API tools faq
paste
Guest User

Untitled

a guest
Jan 25th, 2021
164
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 7.96 KB | None | 0 0
raw download clone embed print report
  1. <link rel="preconnect" href="https://fonts.gstatic.com">
  2. <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap" rel="stylesheet">
  3. <body style="margin: 0;">
  4. <div style="position: fixed; display: flex; width: 100%; height: 100%;">
  5. <div style="display: flex; flex-direction: column; width: 25%; height: 100%; background-color: #fafafa; border-left: 10px solid #ca5898; border-right: 1px solid #f1f1f1;">
  6. <div style="display: flex; align-items: center; padding: 30px 0 0 30px;">
  7. <div style="display: flex; flex-direction: column; margin-right: 20px;">
  8. <span style="font-family: Open Sans; font-size: 20px; font-weight: 700; color: #ca5898;">React4s</span>
  9. <span style="margin-top: 10px; font-family: Open Sans; font-size: 14px; color: #666666;">The uncomplicated React binding for Scala</span>
  10. </div>
  11. <div style="margin: 0 -1px 0 auto; padding: 15px 30px 15px 20px; background-color: #ffffff; border: 1px solid #f1f1f1; border-right: 0; border-top-left-radius: 8px; border-bottom-left-radius: 8px;">
  12. <span style="font-family: Open Sans; font-size: 14px; font-weight: 700; color: #ca5898;">Usage</span>
  13. </div>
  14. </div>
  15. <div style="display: flex; justify-content: space-between; margin: 30px 0 0 30px; padding-top: 20px; border-top: 1px solid #f1f1f1;">
  16. <span style="margin-top: 10px; font-family: Open Sans; font-size: 12px; font-weight: 700; color: #444444;">EXAMPLES</span>
  17. <div style="display: flex; flex-direction: column; align-items: flex-end;">
  18. <div style="margin-left: auto; padding: 10px 30px 10px 20px;">
  19. <span style="font-family: Open Sans; font-size: 14px; color: #444444;">To-do list</span>
  20. </div>
  21. <div style="margin-left: auto; padding: 10px 30px 10px 20px;">
  22. <span style="font-family: Open Sans; font-size: 14px; color: #444444;">Toggle</span>
  23. </div>
  24. <div style="margin-left: auto; padding: 10px 30px 10px 20px;">
  25. <span style="font-family: Open Sans; font-size: 14px; color: #444444;">CSS Class</span>
  26. </div>
  27. <div style="margin-left: auto; padding: 10px 30px 10px 20px;">
  28. <span style="font-family: Open Sans; font-size: 14px; color: #444444;"> Search</span>
  29. </div>
  30. <div style="margin-left: auto; padding: 10px 30px 10px 20px;">
  31. <span style="font-family: Open Sans; font-size: 14px; color: #444444;">Tree Editor</span>
  32. </div>
  33. <div style="margin-left: auto; padding: 10px 30px 10px 20px;">
  34. <span style="font-family: Open Sans; font-size: 14px; color: #444444;">Timer</span>
  35. </div>
  36. <div style="margin-left: auto; padding: 10px 30px 10px 20px;">
  37. <span style="font-family: Open Sans; font-size: 14px; color: #444444;">Contexts</span>
  38. </div>
  39. <div style="margin-left: auto; padding: 10px 30px 10px 20px;">
  40. <span style="font-family: Open Sans; font-size: 14px; color: #444444;">Portals</span>
  41. </div>
  42. </div>
  43. </div>
  44. <div style="display: flex; margin-top: auto; padding: 30px;">
  45. <div style="display: flex; align-items: center;">
  46. <svg style="width: 20px; height: 20px; fill: #ca5898;" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub icon</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>
  47. <span style="margin-left: 10px; font-family: Open Sans; font-size: 14px; color: #ca5898;">ahnfelt/react4s</span>
  48. </div>
  49. <div style="display: flex; align-items: center; margin-left: 20px;">
  50. <svg style="width: 20px; height: 20px; fill: #ca5898;" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Gitter icon</title><path d="M8.501 4.001H10.5V24H8.501V4.001zm6.999 0V24h-2V4.001h2zM3.5 0h2.001v15H3.5V0zm15 4.001h2V15h-2V4.001z"/></svg>
  51. <span style="margin-left: 10px; font-family: Open Sans; font-size: 14px; color: #ca5898;">scala-js/scala-js</span>
  52. </div>
  53. </div>
  54. </div>
  55. <div style="flex: 1; overflow: auto;">
  56. <div style="display: flex; flex-direction: column; padding: 30px 50px; max-width: 700px">
  57. <span style="font-family: Open Sans; font-size: 20px; font-weight: 700; color: #444444;">React4s: Component based UI</span>
  58. <span style="margin-top: 10px; font-family: Open Sans; font-size: 14px; color: #444444;">React4s is a component based library for writing webapps in Scala, with React.js on the inside. The components are self-contained and composable, and rendering is specified as a pure function.</span>
  59. <div style="display: flex; justify-content: space-between; align-items: center; margin-top: 30px;">
  60. <input style="width: 200px; padding: 15px 25px; border: 1px solid #444444; border-radius: 4px; font-family: Open Sans; font-size: 14px;" value="Hello">
  61. <span style="margin-left: 25px; font-family: Open Sans; font-size: 14px; color: #444444;">will show up as</span>
  62. <span style="width: 200px; padding: 15px 25px; background-color: #fafafa; border: 1px solid #f1f1f1; border-radius: 4px; font-family: Open Sans; font-size: 14px;">Hello</span>
  63. </div>
  64. <div style="margin-top: 10px; padding: 20px; background-color: #fafafa; border: 1px solid #f1f1f1;">
  65. <span style="font-family: monospace;">case class UppercaseComponent() extends Component[NoEmit] {<br>val text = State("Hello!")<br>override def render(get : Get) = {<br>E.span(<br>E.input(A.value(get(text)), A.onChangeText(text.set)),<br>Text(" = " + get(text).toUpperCase)<br>)<br>}<br>}</span>
  66. </div>
  67. <span style="margin-top: 30px; font-family: Open Sans; font-size: 16px; font-weight: 600; color: #444444;">No macros, no implicits, no boilerplate</span>
  68. <span style="margin-top: 10px; font-family: Open Sans; font-size: 14px; color: #444444;">For the sake of simplicity, React4s uses no macros and no implicits. It's still concise though - check out the examples and compare them to similar libraries, for Scala or otherwise.</span>
  69. <span style="margin-top: 30px; font-family: Open Sans; font-size: 16px; font-weight: 600; color: #444444;">TodoMVC in 139 lines</span>
  70. <span style="margin-top: 10px; font-family: Open Sans; font-size: 14px; color: #444444;">Including persistence and routing. <span style="color: #ca5898;">Live version</span> and <span style="color: #ca5898;">source code</span>.</span>
  71. <span style="margin-top: 30px; font-family: Open Sans; font-size: 16px; font-weight: 600; color: #444444;">Performance by default
  72. </span>
  73. <span style="margin-top: 10px; font-family: Open Sans; font-size: 14px; color: #444444;">Without shouldComponentUpdate(), React.js recreates the entire virtual DOM for every event - eg. every letter you type in a text field - which leads to input lag. In plain React.js, the solution is to memoize callbacks, which leads to awkward, unidiomatic code.<br>In React4s, there are no callbacks to memoize. React4s takes advantage of immutability and structural equality to implement shouldComponentUpdate() automatically. No code required.<br>This means that only the relevant path from the root of the view to the updated branch is recomputed. When the view is balanced, the speedup is exponential: O(log(n)) instead of O(n).</span>
  74. <img src="https://docs.google.com/drawings/d/e/2PACX-1vQSI9gpc-jRngqNwtsw6lUFgx-NmK4uycVeMXgiF5w_OPqH_gv9YUJ8GFQjl2zqN7TV8JJ9MyY72mlb/pub?w=915&h=424">
  75. </div>
  76. </div>
  77. </div>
  78. </body>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!