10 ms·
New React website
- sillysaurus3 9y agoSlow news day.
- acemarke 9y agoTo add a bit of context: the React docs were previously a Jekyll site that was hosted at facebook.github.io/react/. The new site was rebuilt using Gatsby.js (a React-based static site generator), uses the Glamor CSS-in-JS library for styling, and has a bunch of nice tweaks and improvements overall, like the live component editors on the front page.
- hajile 9y agoCan you change the docs section dropdown interaction? When I go to look at the docs, it's really nice to be able to see everything instead of opening each major section one at a time (especially when opening one closes all the others).
- O4epegb 9y agoI think editors was already there.
- acemarke 9y agoThey might have had _something_ on the front page before, don't remember what exactly. I know they had CodePen examples added in the "Getting Started" and "Tutorial" sections when the docs content was rewritten last year. The use of the React-Live editor widget on the front is specifically new, I just don't remember if it replaced something similar previously.
- bluetidepro 9y agoWow, just checked out Gatsby.js for the first time. This library is incredible. Glad you mentioned it! :)
- SkyPuncher 9y agoI cannot overstate how nice it is to use. I built a sign-up page for a startup with it and I had absolutely no complaints. Writing static content is basically like building a normal website with a nice templating system. Dynamic content is simply React components that I'm use to working with on complex applications. Easy to build, easy to deploy, and easy to change.
- calcsam 9y agoThat's great to hear!
- Kiro 9y agoWhere are they using Glamor? Trying to find some code in action but can't search on mobile.
- futurefriendly 9y agoGatsby is great but it has issues generating sites with a large number of pages. There are performance issues and generation fails if the number of pages goes above a certain threshold. I had to abandon it for a project that was generating static SEO pages, it was something on the order of 2000 pages and Gatsby couldn't handle it. Hopefully they resolve that soon!
- coldtea 9y ago>Hopefully they resolve that soon! Or, hopefully, they don't. SEO pages suck users time.
- free_everybody 9y agoCould you fill me in? Why do SEO pages suck users time? I'm a newbie.
- coldtea 9y agoSEO pages are crap meant to make a site with otherwise no interesting content (else it would have used that) rank higher on Google.
- futurefriendly 9y agoI can see how you'd have that perception but the term covers a wide swath of use cases. Search engine spam is not nearly the issue it once was. Most SEO pages are created to account for two things: product marketing content cannot contain all the possible terms that people use when searching without becoming unintelligible and data served dynamically through SPAs, especially geographically localized data, is still challenging to expose to search engines even with universal apps.
- calcsam 9y agoSorry to hear that! We're focusing on build performance and incremental site builds and will be releasing a major version bump by the end of the year to make the experience faster.
- smaili 9y agoWhat's with the blip/FOUC?
- beeskneecaps 9y ago35ms faster FOUCs!
- irrational 9y agoYeah, that's super annoying. I would think that a team that can build react could build a site with it that doesn't have FOUC. If they can't do it, what hope do the rest of us have?
- toufka 9y agoAnd the page doesn't even come back from the flash in my semi-locked down firefox. It flashes content, then back to a white page without an empty <body>: DOMException [SecurityError:"The operation is insecure." Code 18: location: https://reactjs.org/commons-f40206259909ee9b7a40.js:4]`
- danabramov 9y agoCan you please file an issue and describe more about your FF configuration?
- tarr11 9y agoLooks like it's related to their use of TypeKit for fonts. I haven't used TypeKit in a while, but it looks like they had this issue a year ago [1]. Unclear if it has been fixed or what. A lot of people I know simply embed the font in the page (ugh) [1] https://blog.typekit.com/2016/06/03/regarding-the-flash-of-unstyled-text-in-chrome-50/ https://blog.typekit.com/2016/06/03/regarding-the-flash-of-u...
- danabramov 9y agoWe're looking into it, sorry about that.
- 9y ago
- deleted 9y ago[deleted]
- minimaxir 9y agoAs an aside, I hate the official React tutorial and am disappointed that there are no revisions to it with this significant redesign and React version update. It is the embodiment of the “how to draw an owl” meme, requiring you to have a strong JS frontend background in the first place, and the resulting demo application doesn’t give much insight in how to use React for standard websites. (Unfortunately, this isn’t unique to the official React tutorial; many React tutorials are like this) Contrast with the official Vue.js tutorial (https://vuejs.org/v2/guide/ https://vuejs.org/v2/guide/), which goes through things step by step with normal HTML syntax.
- bluetidepro 9y agoA Tweet by @reactjs: > We hope the new site will make it easier for you all to contribute improvements as well. We look forward to working with you to improve it! [1] This was just the first phase of them moving to the new site. They understand that the docs can be better. Maybe instead of just complaining about them, you contribute to them to make them more "noob" friendly, like you are describing. [1] https://twitter.com/reactjs/status/913797589421629440 https://twitter.com/reactjs/status/913797589421629440
- Goopplesoft 9y ago> requiring you to have a strong JS frontend background in the first place Is that a high bar for a JS frontend framework? Serious question, as it doesn't seem that way to me. This seems analogous to saying "Django docs require you to know python" or "Postgres docs require you to understand how databases work".
- vanderZwan 9y agoI lost an entire week of work last year to not knowing that React switched from automatically binding methods, because none of the documents mentioned that. Including the release notes of the version of React where they turned that off, IIRC. It is easily the most rage-inducing programmer moment I ever had, mainly because it's so fucking stupid and the only reason it took me so long was because the actual tutorial and documentation was fucking lying to me. Technically speaking they fixed it by now: they mention the bind-thingy under "Handling Events" in the documentation, which you randomly have to stumble upon: constructor(props) { super(props); this.state = {isToggleOn: true}; // This binding is necessary to make `this` work in the callback this.handleClick = this.handleClick.bind(this); } handleClick() { this.setState(prevState => ({ isToggleOn: !prevState.isToggleOn })); } However, the tutorial is still deceiving: constructor() { super(); this.state = { squares: Array(9).fill(null), }; } handleClick(i) { const squares = this.state.squares.slice(); squares[i] = 'X'; this.setState({squares: squares}); } This is fine in this specific situation because the render method uses a closure: onClick={() => this.handleClick(i)} But this is a subtle nuance that can be an incredible pain to figure out. There is no mention of all the this-related pains in the tutorial anywhere. [0] https://reactjs.org/tutorial/tutorial.html https://reactjs.org/tutorial/tutorial.html [1] https://reactjs.org/docs/handling-events.html https://reactjs.org/docs/handling-events.html
- azr79 9y agowooooo, almost as sexy as https://angular.io https://angular.io
- Raphmedia 9y agoPretty cool how you can edit the examples.
- deleted 9y ago[deleted]
- terminado 9y agoThe most amazing thing, to me, regarding React, is that it's a pretty awesome framework, from the perspective of a developer. ...and yet, I go and try to use Facebook, and the experience is totally fucking repellent. Even in a closed third-party testing loop, when you control for social variables and human factors, by populating your circle with only fake test accounts you control and have created yourself, for which no one else has the password. (e.g. staging a hypothetical sequence of events, to model an expected experience) Just trying to do anything is met with the most bizarre and byzantine behaviors and switcheroos.
- vjeux 9y agoDo you have specific examples of what makes "the experience is totally fucking repellent"? We can work on trying to fix them :)
- stefantheard 9y agoOpposite experience here. I usually reference FB as an example of a very close to optimal user experience given the magnitude of functionality. Rarely lost, easily discoverable, easy to use.
- abiox 9y agohow much do you use FB? i wonder how much this assessment owes to familiarity.
- stefantheard 9y agothaaaaaaaaat's a great point. I use it very often. Daily for probably 4 years? more? It's likely that I am misjudging the usability given that it's basically a small extension of my life.
- terminado 9y agoI'm not trying to be disrespectful, and I fully understand that there's a huge, huge ream of people working to deliver Facebook, but honestly, I could fill multiple volumes of multiple books with the things that Facebook does wrong, and some of it is surely deliberate dark patterns, with specific behavioral objectives, but other aspects are not. Nevermind whether or not one agrees or disagrees with the all-encompassing nature of Facebook's grip on so many social circles, or whether one has an opinion about Facebook's policies and business practices, the website itself is pretty bad. Bad enough that, had I my druthers, I'd be able to create something that out-competes it, if a creation I put forward could clear the sheer gravitational inertia of the network effect that Facebook enjoys. And I realize that's no small claim, but here I am making it anyway. It's not your fault, specifically that shit sucks on Facebook all over, and I sincerely doubt you'd have the clout necessary to enact change. Since it'd be a lot to write up, and this is simply yet another peanut gallery web forum, I'll say this much: as a user, I am clueless about the decision tree I'm offered when I log into Facebook, furthermore, so much of Facebook is mystery meat links and who knows why I see half of any of it. Then as soon as a snippet of user-created content appears, it's buried. Go in to check the settings to see what the hell this system is trying to do for me, and I see trashy icons leading to incomplete features that don't even work as advertised, and I never get what I want, when used as directed. After about 30 some-odd clicks per any given session, and maybe 100 sessions of trying and retrying various combinations from a clean cookie, learned helplessness kicks in, I shut down my computer and find something better to do. BTW, this cuts across several assets and UI's throughout Facebook's offerings as a whole, for all devices.
- revelation 9y agoThe framework and language of champions this.handleChange = this.handleChange.bind(this);
- rmrfrmrf 9y agoEvent binding is ugly in every language, though...
- ralmidani 9y agoI agree this syntax is awkward, tedious, and ceremonious. But if your components are ES6 classes, fat-arrow methods let you avoid it.
- danabramov 9y agoWhich is our colleagues at Facebook worked on the class fields proposal that addresses this elegantly :-) https://github.com/tc39/proposal-class-fields https://github.com/tc39/proposal-class-fields Changes to the language take time, but then they benefit everyone and not just a particular library.
- dmitriid 9y agoThe proposal does nothing to remove the awkward binding everywhere, unless I'm mistaken. Here's the verbatim quote from the proposal: --- quote --- With the ESnext field declarations proposal, the above example can be written as class Counter extends HTMLElement { x = 0; clicked() { this.x++; window.requestAnimationFrame(this.render.bind(this)); } constructor() { super(); this.onclick = this.clicked.bind(this); } connectedCallback() { this.render(); } render() { this.textContent = this.x.toString(); } } window.customElements.define('num-counter', Counter); --- end quote --- this.onclick = this.clicked.bind(this); etc. are all still there
- haukur 9y agoIt does, you can write this with a Babel preset supporting this feature: class Foo extends Component { state = { foo: '', }; // The arrow function here is what you're looking for. onChange = ({ target }) => { this.setState({ // You can of course use `foo` directly as the key if you just have the one input. [target.name]: target.value, }); }; render () { return <input type="text" name="foo" value={this.state.foo.value} onChange={this.onChange} />; } }
- Semiapies 9y agoHuh. Does Gatsby not support RSS or Atom feeds? Can't find any for the site or blog.
- SkyPuncher 9y agoGatbsy supports RSS (and Atom?) as a plugin. Probably not enabled for this site.
- yasserkaddour 9y agoThe plugin output a feed in the Atom standard, proof : https://www.gatsbyjs.org/blog/rss.xml https://www.gatsbyjs.org/blog/rss.xml
- yasserkaddour 9y agoThey can add this Gatsby plugin https://www.gatsbyjs.org/packages/gatsby-plugin-feed/ https://www.gatsbyjs.org/packages/gatsby-plugin-feed/
- hungerstrike 9y agoThis is very timely for me - I was just looking for a new static site generator and so far I've tried out Hugo, Hexo and Jekyll but I didn't like any of them because they're so configuration dependent. I'd rather write my static pages using tools that I already know how to use. Searching for a static site generator that uses React, I found Phenomic first then Gatsby. I was already leaning towards Gatsby since Phenomic is still in alpha. Now that Facebook is using it, my decision is easy. Phenomic looks like it can do a lot more than Gatsby, so maybe I'll give it a second chance in the future.
- tedmiston 9y agoDoes it say on the page somewhere that this site is built with Gatsby?
- kylemathews 9y agoFrom the twitter announcement: https://twitter.com/reactjs/status/913797447209517056 https://twitter.com/reactjs/status/913797447209517056 Also this is the source for the website: https://github.com/facebook/react/blob/master/www/package.json https://github.com/facebook/react/blob/master/www/package.js...
- tedmiston 9y agoThanks - I need a good way to view source on iOS.
- coisnepe 9y agoCheck out Working Copy, which I use extensively but I'm not sure it's what your looking for exactly (I'm not affiliated). I think there's iOctocat if you're just looking for a way to browse github repos.
- tedmiston 9y agoThanks, I'll check them out. Specifically, I'm looking for a way to view source (really DOM) of an arbitrary webpage in the browser.
- brink 9y agoInteresting that they use the this.handleChange = this.handleChange.bind(this) example over the simpler lexical declaration. handleChange = () => {} Is the reason for them not using the latter due to the spec not being finalized yet?
- deleted 9y ago[deleted]
- WorldMaker 9y agoThe spec is final (arrow functions were in ES2015), could be they just still have IE11 users they expect to support.
- danabramov 9y agoNo, these are "class fields" rather than arrow functions, and are not part of ES2015. This is why we're not using them in the docs yet. Indeed they would make everything a bit nicer :-)
- WorldMaker 9y agoAh, okay, that's what I missed from the example out of context.
- logicallee 9y agoThis web site doesn't follow best practices of not saying what it is, not giving any examples, not letting you see it in action, making users have to read through outdated, long manuals that if you follow directly you get unexplained error messages you have to Google, needing to watch and follow along with a 15 minute youtube video whose first 10 minutes talk about the different choices of IDE's that you have, how to download and save a file from the Internet, and finally whose last 5 minutes do something obscure and contrived, that is the the wrong way to do something. In fact, if you go to reactjs.org, within the first 7 seconds you can see live examples. (By scrolling down.) If you click the prominent "get started" button prominent at the top of the page, you get taken to a page that says "The easiest way to get started with React is to use this Hello World example code on CodePen" and a single click gets you there. The intro tutorial itself quickly walks you through everything, gearing up from basics to an advanced summary quickly in a well-structured way. It has a "help I'm stuck!" section that tells you exactly what you need to do if you are stuck. This needs to die. Someone needs to go about writing some half-assed documentation and putting it up on github without any usable links. Information is meant to be hidden, and the role of documentation, such as reactjs.org, is properly to hide the nuggets of usable information among false starts, unexplained terminology, long flowing paragraphs of flowery prose that reduce to "", important notes that can only affect people who already know everything else about the thing in question, such as information about upgrades and transitions, and just generally give the sort of impression you get when you read through useless government paperwork. Take note, people. if you make a site like this, then you can end up being the best-adopted and most popular solution in your entire industry - that's no way to program. Documentation is meant to be a hurdle, a kind of euthanasia program that takes enthusiastic new visitors and tears out their enthusiasm, destroys their will to live, and grinds them down with prose.
- logicallee 9y agoJust a note that in the parent post I was being ironic: the web site and tutorial are truly great and a model for what other projects should be doing.
- kylemathews 9y ago
- chicago_wade 9y agoIs it possible to use React with a custom canvas-rendered UI? Is it in any way benefitial to do so compared to not using React for the custom canvas-rendered UI?
- hajile 9y agoText selection is generally a pain in canvas. That's pretty important for docs and examples. HTML is specifically made for displaying text and text is basically all the React site does. No need to fight an uphill battle when you already match the ideal case.
- matrix 9y agoIt looks like Gatsby generates a static site as a SPA? What's the advantage of that approach over multi-page sites generated with Jekyll, Hugo, etc.?
- kylemathews 9y agoPart performance and part developer experience. Gatsby generates HTML pages for each page so it loads as fast or faster than other static site generators but is way faster when clicking around the site as it prefetches pages and renders them in the client so the site feels like a local or native app. It's also fully setup for building with leading modern web development tools like React, webpack, all CSS options including css-in-js, code splitting, PWA techniques, etc. so the development experience is excellent and you get production quality code without any setup. Gatsby's ambitions are much higher than simply transforming markdown into HTML. See the writeup of the talk I gave recently describing Gatsby as a website compiler https://www.gatsbyjs.org/blog/2017-09-13-why-is-gatsby-so-fast/ https://www.gatsbyjs.org/blog/2017-09-13-why-is-gatsby-so-fa...
- jedisct1 9y agoGatsby is dope!