
New React website - bpierre
https://reactjs.org/?new
======
minimaxir
As 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.

~~~
spicyj
As the person who designed most of the tutorial, I'm sorry to hear this. My
goal was to give people practice building a few simple components and
connecting them together.

It's true that we assume preexisting JS knowledge, but your other point about
how it doesn't give much insight into using React is one I haven't heard
before. Can you say more about what you mean?

Anecdotally in my experience, most people seem to find the tutorial pretty
helpful, but we can think about more options. Maybe there's space to add one
that assumes less about JS. (And really -- thank you for complaining about
this, or else we wouldn't have known.)

~~~
minimaxir
Thanks for replying. With respect to the insight in using React, I assume that
the majority of React users are using it to build websites/SPAs, with concerns
such as client/server data flows, templating/styling, and URL routing. While
the tutorial does demonstrate a good demonstration _how_ React works, it
doesn’t provide much practical knowledge for building websites, and worse,
doesn’t provide info on _how to start_ building a website. (which just leads
me to look at _another_ tutorial)

~~~
dmitriid
They tried to add routing to to docs/tutorials. react-router devs hijacked the
effort, ground it to a halt with claims of copyright to their code, and the
pull request to docs got rejected in the end

~~~
faitswulff
Link?

~~~
dmitriid
Relevant comment is here:
[https://github.com/facebook/react/pull/8848#discussion_r1055...](https://github.com/facebook/react/pull/8848#discussion_r105542575)

Full pull request is here:
[https://github.com/facebook/react/pull/8848](https://github.com/facebook/react/pull/8848)

As a result one of the React contributors ended up apologizing to react-router
[https://github.com/facebook/react/pull/8848#issuecomment-285...](https://github.com/facebook/react/pull/8848#issuecomment-285915316)

------
acemarke
To 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.

~~~
futurefriendly
Gatsby 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
> _Hopefully they resolve that soon!_

Or, hopefully, they don't. SEO pages suck users time.

~~~
free_everybody
Could you fill me in? Why do SEO pages suck users time? I'm a newbie.

~~~
coldtea
SEO pages are crap meant to make a site with otherwise no interesting content
(else it would have used that) rank higher on Google.

------
hungerstrike
This 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.

~~~
creatonez
>a static site generator that uses React

Does this mean the HTML is constructed by rendering components to strings
using ReactDOMServer, or that the frontend scripts use React? Or both?

~~~
kylemathews
Both. Checkout gatsbyjs.org, the tool the site was built with. But basically
Gatsby renders each page to HTML and writes it out to disk similar to other
static site generators. And then when the HTML loads, it pulls in JavaScript
to make the site "live" so that from then on out it acts like a normal React
web app.

Gatsby is an attempt to blend the best aspects of static site generators and
web apps.

------
terminado
The 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
Do you have specific examples of what makes "the experience is totally fucking
repellent"? We can work on trying to fix them :)

~~~
terminado
I'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.

~~~
terminado
Addendum: for an example of how it's done right, look at Slack. Slack has a
completely different business model and general objective in serving the user,
but divorcing this conversation from that fundamental idea, Slack (without
being pretentious) gets it right 85% of the time, in that I'm able to do what
I want, and get what I need. Facebook, on the other hand, is stepping in shit
75% of the time, and waxes manipulative when not seeming generally confusing
and disorganized.

And to return to the original subject at hand, compare Facebook (right now,
today) to React's general website and documentation facelift. The comparison
turns out to be surprisingly different in quality. (hint: facebook rates
lower)

------
matrix
It 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
Part 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-
fa...](https://www.gatsbyjs.org/blog/2017-09-13-why-is-gatsby-so-fast/)

------
Semiapies
Huh. Does Gatsby not support RSS or Atom feeds? Can't find any for the site or
blog.

~~~
SkyPuncher
Gatbsy supports RSS (and Atom?) as a plugin. Probably not enabled for this
site.

~~~
yasserkaddour
The plugin output a feed in the Atom standard, proof :
[https://www.gatsbyjs.org/blog/rss.xml](https://www.gatsbyjs.org/blog/rss.xml)

------
smaili
What's with the blip/FOUC?

~~~
tarr11
Looks 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-u...](https://blog.typekit.com/2016/06/03/regarding-the-flash-of-unstyled-
text-in-chrome-50/)

~~~
danabramov
We're looking into it, sorry about that.

------
brink
Interesting 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?

~~~
WorldMaker
The spec is final (arrow functions were in ES2015), could be they just still
have IE11 users they expect to support.

~~~
danabramov
No, 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
Ah, okay, that's what I missed from the example out of context.

------
chicago_wade
Is 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
Text 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.

------
Raphmedia
Pretty cool how you can edit the examples.

------
jedisct1
Gatsby is dope!

------
azr79
wooooo, almost as sexy as [https://angular.io](https://angular.io)

~~~
JBReefer
That's an absolutely beautiful website by a framework I hope to never use
again.

React feels so much nicer and it's use of Vanilla JS makes it so much easier
to debug. It's a breath of fresh air.

~~~
azr79
Angular is better for larger applications, I like it.

------
sillysaurus3
Slow news day.

------
revelation
The framework and language of champions

    
    
        this.handleChange = this.handleChange.bind(this);

~~~
danabramov
Which 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
The 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
It 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} />;
          }
        }

~~~
dmitriid
Then either the readme in the proposal is wrong or the unknown babel preset is
wrong

Also, your example is not equivalent to either the complaint in the original
comment or to the code snippet I quoted

Also: React has been binding event handlers to `this` since forever without
presets (update: only in React.creatClass though)

~~~
danabramov
The proposal README is written for TC39 and not React users, so it doesn't
address the problems React users face.

Yes, with public fields you can write

    
    
        handleClick = () => {
          // ...
        }
    

and it works like if you bound it in the constructor.

Hope this helps.

~~~
dmitriid
It’s not just React-specific. I was correct: the proposal does exactly nothing
to make sure class methods are bound to class instances.

    
    
      handleClick = () => {...}
    

This is a shitty workaround that abuses class fields and arrow functions

------
logicallee
This 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
Just 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
Looks like Poe's law struck again :-)

[https://en.wikipedia.org/wiki/Poe%27s_law](https://en.wikipedia.org/wiki/Poe%27s_law)

~~~
logicallee
yes :)

