[{"data":1,"prerenderedAt":320},["ShallowReactive",2],{"project-32981947":3},{"id":4,"name":5,"line":6,"line_source":7,"title":8,"url":9,"domain":5,"maker":10,"posted_at":11,"year":12,"points":13,"comments":14,"rank_in_year":15,"shown_in_year":16,"top":17,"tier":18,"category":19,"subcategory":20,"format":21,"keywords":22,"reception":27,"sentiment":28,"stance_mix":29,"scored_comments":33,"aspects":34,"strip":40,"post_text":42,"what":43,"said":74,"maker_in_thread":185,"shape":193,"grid":197,"attempts":283,"same_week":284,"maker_shows":30,"maker_hidden":312,"reader_version":313,"card":314},"32981947","smarketman.com","Paste React components into any website","title","Show HN: Paste React components into any website","https:\u002F\u002Fsmarketman.com\u002Finstant\u002Freact\u002F","jimhi",1664193230,2022,71,40,776,2570,31,"notable","dev_tools","react component bundler","web_app",[23,24,25,26],"react components","webpack alternative","embed react","no build step","debated",0.091,{"positive":30,"neutral":31,"mixed":32,"critical":30},6,10,0,22,{"idea":35,"docs":37,"performance":39},{"positive":36,"critical":30},5,{"positive":38,"critical":32},1,{"positive":32,"critical":32},[32,36,32,41,41,32,36,41,38,32,32,36,32,41,41,32,38,32,38,32,32,32,41,32,41,38,36,41,38,32,32,32,36,32,41,41,32,36,32,38],3,null,{"problem":44,"audience":54,"pricing":61,"motivation":67,"time_to_build":42,"stack":71,"openness":72,"stage":73,"team_size":72},{"value":45,"source":46,"evidence":47},"Adding React components to static sites like GitHub Pages, Shopify or WordPress without webpack or ReactDOM setup","maker",[48,51],{"id":49,"by":10,"text":50},"32994729","Hello, this is a tool that lets you paste some quick react components into any static website. So a Github page, Shopify, Wordpress, etc. Sometimes I google a cool React…",{"id":52,"by":10,"text":53},"32994665","You can see many examples if you google - \"How do I put react into my \" Github page\u002FShopify\u002FWordpress etc. Many developers inherit or prefer a plain page and just want to use a…",{"value":55,"source":46,"evidence":56},"Marketers and developers with plain or legacy websites who want quick React widgets",[57,58],{"id":49,"by":10,"text":50},{"id":59,"by":10,"text":60},"32994890","For Sure. This is for people who don't have the server access, knowledge, or patience.",{"value":62,"source":46,"evidence":63},"Free for one library, usable across multiple websites; bundle downloadable",[64],{"id":65,"by":10,"text":66},"32995209","It’s also completely free for 1 library (which can be used on multiple websites) and you can download the bundle code at any time.",{"value":68,"source":46,"evidence":69},"Maker wanted a cool React calculator on their page fast without webpack errors",[70],{"id":49,"by":10,"text":50},[],"unknown","launched",{"praise":75,"objections":99,"requests":128,"questions":150,"alternatives":162},[76,92],{"value":77,"source":78,"evidence":79},"Useful for adding React widgets to old or simple sites without full dev setup","commenter",[80,84,88],{"id":81,"by":82,"text":83},"32995526","devsatish","I do see the value in this. Especially for folks trying to add some cool react widgets without doing the full dev - specially for some old code-base. Respect!",{"id":85,"by":86,"text":87},"32994940","jdthedisciple","Hey good job! Can't identify with the opposition in the comments, this looks useful to add a fancy feature to a simple website.",{"id":89,"by":90,"text":91},"33001603","yawnxyz","Yeah this is a really handy shortcut to doing all that! I work with collaborators hosting their sites on old legacy pages (in Academia, hosted on university systems); this could…",{"value":93,"source":78,"evidence":94},"Simple way to get a React build without tooling",[95],{"id":96,"by":97,"text":98},"33003868","dmak","I am confused. It says I can paste React components into any website, but what do I do with the generated script tags? how can do I paste this into github.com or…",[100,113,121],{"value":101,"source":78,"evidence":102},"Webpack-as-a-service adds complexity; plain script tags or CRA are simpler",[103,107,110],{"id":104,"by":105,"text":106},"32994299","bdorn","I'm sorry, but what problem does this solve? Seems like this makes the developer experience worse in every way.",{"id":108,"by":105,"text":109},"32995225","That works, I was more responding to using this random site instead of just CRA locally. Just seems odd.",{"id":111,"by":105,"text":112},"32994790","I'm not following - even manually inserting script tags to mount the component is better than relying on another site like this to bundle it.",{"value":114,"source":78,"evidence":115},"Unclear what problem it solves for developers",[116,117],{"id":104,"by":105,"text":106},{"id":118,"by":119,"text":120},"32995127","codingdave","I'm confused why you need a tool for this. If you are writing the react code, and adding the script to your web page... this tool just seems to be an alternative to webpack? It…",{"value":122,"source":78,"evidence":123},"Output script tags only work on sites that run JavaScript, not comment sections",[124,125],{"id":96,"by":97,"text":98},{"id":126,"by":10,"text":127},"33004146","It outputs JavaScript so you can only put it in places that interpret the JavaScript like GitHub pages or your own site. GitHub comments for instance or hackernews comments won’t…",[129,139,146],{"value":130,"source":78,"evidence":131},"Support for other frameworks such as Vue",[132,136],{"id":133,"by":134,"text":135},"33000085","sibit","My comment wasn't a critique on your product. I can totally see how this could be handy and I'll keep it bookmarked. I was mostly critiquing that web devs nowadays always seem to…",{"id":137,"by":10,"text":138},"33000199","Vue would be pretty easy. From personal experience it’s mostly react that’s has all these open source things someone might want. Was there one you were thinking of?",{"value":140,"source":78,"evidence":141},"Page load performance metrics",[142],{"id":143,"by":144,"text":145},"32997019","eurasiantiger","Can you show some page load metrics between a page without any of these and the same page with several different widgets packaged with this? Interested in things like kB…",{"value":147,"source":78,"evidence":148},"Clearer messaging on what to do with the generated script",[149],{"id":96,"by":97,"text":98},[151,156],{"value":152,"source":78,"evidence":153},"Why not just use a local CRA project or manual script tags",[154,155],{"id":118,"by":119,"text":120},{"id":111,"by":105,"text":112},{"value":157,"source":78,"evidence":158},"Does it work for injecting components into WordPress",[159],{"id":160,"by":90,"text":161},"32994515","this is pretty neat! Does this mean you can inject random React components into something like a Wordpress site?",[163,174,178],{"value":164,"source":78,"evidence":165},"Create React App or building a bundle locally",[166,170],{"id":167,"by":168,"text":169},"32995131","kclay","Funny enough I ran into this exact use case recently. We have a marketing site for a client done with webflow..But we needed to add a third party widget that only had an react…",{"id":171,"by":172,"text":173},"32994857","andix","You can just build your react components into a bundle and reference that. Just like this tool is doing behind the scenes. That's how most people use React.",{"value":175,"source":78,"evidence":176},"Manually inserting script tags with ReactDOM",[177],{"id":111,"by":105,"text":112},{"value":179,"source":78,"evidence":180},"Mustache\u002Fhandlebars templates in SnipCSS",[181],{"id":182,"by":183,"text":184},"33003099","mrieck","Converting all jsx\u002Fjavascript from one framework to another would be extremely hard. It's easier to start with something more basic like a mustache\u002Fhandlebars template - and then…",{"comments":186,"answered":36,"key":187},13,[188,189,192],{"id":49,"text":50},{"id":190,"text":191},"32998820","That’s actually the main use case of this service. Feel free to email me and I can help set it up.",{"id":65,"text":66},{"commenters":194,"max_depth":195,"maker_replies":186,"first_comment_mins":196,"lifespan_hours":14},20,8,1453,[198,200,204,206,207,210,212,215,218,221,225,227,231,235,238,240,241,242,243,244,247,249,252,253,254,255,256,258,259,261,263,265,266,267,270,272,275,276,277,279],[49,32,32,199,10,38],"project\u002Fneutral\u002Fidea",[201,32,36,202,203,32],"32998521","project\u002Fpositive\u002Fidea","Shindi",[190,32,32,205,10,38],"maker\u002Fneutral\u002Fnone",[118,38,41,199,119,32],[208,38,41,199,209,32],"32995178","doix",[65,38,32,211,10,38],"project\u002Fneutral\u002Fpricing",[213,38,36,214,209,32],"32995303","project\u002Fpositive\u002Fdocs",[216,38,41,199,217,32],"32995418","yCombLinks",[219,38,38,220,119,32],"32995665","project\u002Fcritical\u002Fidea",[222,38,32,223,224,32],"32996584","commenter\u002Fneutral\u002Fidea","programmarchy",[226,38,32,202,10,38],"32995196",[228,229,36,202,230,32],"32998158",2,"armatav",[232,229,32,233,234,32],"32998326","other\u002Fneutral\u002Fnone","michaelchisari",[236,229,41,199,237,32],"32998893","joshxyz",[239,229,41,199,237,32],"32998918",[182,229,32,233,183,32],[104,41,38,220,105,32],[52,41,32,199,10,38],[111,41,38,220,105,32],[245,41,32,246,10,38],"32994803","project\u002Fneutral\u002Fexecution",[248,41,32,223,134,32],"32994851",[250,41,32,251,10,38],"32994962","project\u002Fneutral\u002Fnone",[133,41,41,199,134,32],[137,41,32,199,10,38],[167,41,41,251,168,32],[108,41,38,220,105,32],[81,257,36,202,82,32],4,[160,36,41,199,90,32],[260,36,38,220,172,32],"32994543",[262,36,32,246,10,38],"32994652",[171,36,32,264,172,32],"commenter\u002Fneutral\u002Fexecution",[59,36,32,202,10,38],[89,36,36,202,90,32],[268,36,32,269,10,38],"32994622","project\u002Fpositive\u002Fexecution",[143,30,41,271,144,32],"project\u002Fneutral\u002Fperformance",[96,273,41,274,97,32],7,"project\u002Fneutral\u002Fdocs",[126,273,32,246,10,38],[85,195,36,202,86,32],[278,195,32,205,10,38],"32995063",[280,281,38,220,282,32],"32998035",9,"endigma",[],[285,290,295,299,303,307],{"id":286,"name":287,"points":288,"category":289},"32993130","Quazel",787,"learning_science",{"id":291,"name":292,"points":293,"category":294},"32943224","Open Prompts",279,"data",{"id":296,"name":297,"points":298,"category":19},"32939407","Dub",255,{"id":300,"name":301,"points":302,"category":19},"32941613","Ezno",175,{"id":304,"name":305,"points":306,"category":19},"32935506","Rocketry",168,{"id":308,"name":309,"points":310,"category":311},"32976832","muted.io guitar chords",157,"languages",false,"v2",{"id":315,"name":5,"line":6,"ai":312,"cat":19,"year":12,"points":13,"comments":14,"rec":27,"s":316,"top":17,"kw":317,"maker":10,"domain":5,"tier":18,"attempts":32,"strip":318,"url":9,"mix":319,"praise":77,"objection":101,"sub":20},32981947,0.09,[23,24,25,26],"0503305310050330101000303153100050330501",[30,31,32,30],1794036625497]