ReactJS with JSX without bundling or transpiling
source: https://codesandbox.io/s/dikoh?file=/index.html Static Template import { ChakraProvider, Box, Text } from "https://cdn.skypack.dev/@chakra-ui/react"; import React, { useRef } from "https://cdn.skypack.dev/react"; import ReactDOM from "https://cdn.skypack.dev/react-dom"; const MyText = ({ color, ...props }) => { return ; }; function Foo() { return ( Foo ); } function App() { return ( Hello Skypack ); } ReactDOM.render( , document.getElementById("main") );
What it does
In the maker’s words, at launch
source: https://codesandbox.io/s/dikoh?file=/index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Static Template</title> </head> <body> <div id="main"></div> <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> <script type="text/babel" data-presets="react" data-type="module"> import { ChakraProvider, Box, Text } from "https://cdn.skypack.dev/@chakra-ui/react"; import React, { useRef } from "https://cdn.skypack.dev/react"; import ReactDOM from "https://cdn.skypack.dev/react-dom"; const MyText = ({ color, ...props }) => { return <Text fontWeight="bold" as="span" {...props} />; }; function Foo() { return ( <div> Foo </div> ); } function App() { return ( <Box> Hello <MyText>Skypack</MyText> <Foo/> </Box> ); } ReactDOM.render( <ChakraProvider> <App /> </ChakraProvider>, document.getElementById("main") ); </script> </body> </html>
Does the same job
all alternatives →
- UTUnder the hood ReactJS2017 · bogdan-lyashenko.github.io · ▲266
- BYBuild your first real world React.js application2016 · academy.plot.ly · ▲261
More life & fun this month
the category →- TL
Life & fun · 10d ago · louisabraham.github.io
Photosynthesis fires two of your iPhone
Life & fun · 28d ago · photosynthesis.camera
SoloUno▲310Take control of hair pulling, nail biting & skin picking
Life & fun · 28d ago · solouno.io
Scroll through all 43,252,003,274,489,856,000 reachable Rubik's Cube permutations.
Life & fun · 26d ago · everycube.alen.is
Hi HN, I built Eigendrum, a web tool that solves the 2D wave equation for arbitrary shapes so you can hear what they sound like as drums. How it works: * Solves -∇²u = λu using finite element analysis (Kφ = λMφ) on a triangle mesh. * Validated to <0.1% error against closed-form solutions for circles (Bessel zeros) and rectangles. * Sound model factors in strike location, Rayleigh damping, and mallet width. * Includes Kac drums I & II to demonstrate identical sound spectra from different geometries. * No frameworks, build steps, or dependencies. Repo and tests:…
Life & fun · 26d ago · baselashraf81.github.io
Launched alongside, August 2021
the whole month →- II
Hey all My name is Sindre, and I am the CTO of Scrimba (YC S20). For the last 7 years, I have written all my web apps in a full-stack programming language called Imba. It compiles to JavaScript and its main goal is to make web developers more productive. I just launched a major overhaul of Imba, so I wanted to share it here on HN, in case anyone are interested in learning more about it. It is very opinionated, so some of you might not like it, but I would love to hear anyones feedback regardless. Constructive criticism appreciated! The backstory: Imba initially started in 2012 as an effort…
Life & fun · 2021
- WB
Hello HN, Over the last year we've been building ente[1], a privacy-friendly, easy-to-use alternative to Google Photos. We've so far built Android[2][3], iOS[4], web[5] apps that encrypt your files and back them up in the background. You can access these across your devices, and share them with other ente users, end-to-end encrypted. You can also use our electron app[6] to maintain a local copy of your backed up files. We've built a fault-tolerant data replication layer that replicates your data to two different storage providers in the EU. We will be providing additional replicas as an…
Life & fun · 2021
