International symbols in JSX

[enaqx]

I've experimented with international symbols inside react component and it failed on simple example. Is it by design behaviour?

      var HelloWorld = React.createClass({
        render: function() {
          return (
            <p>
              的なことは, <input type="text" placeholder="Введите ваше имя" />!
              Время: {this.props.date.toTimeString()}
            </p>
          );
        }
      });

      setInterval(function() {
        React.render(
          <HelloWorld date={new Date()} />,
          document.getElementById('example')
        );
      }, 500);

And get

Despite that on JSFiddle it works like charm

I've tried this on OS X with sublime and webstorm. Both work like on image.

[iamdustan]

Check what character encoding your serving your page with. It should likely be UTF-8

[jimfb]

I think failing to support international characters is not by design :P.

I just tested on jsfiddle and in one of the files in the examples directory, it seemed to work fine. This seems to imply to me that it's not a React issue. Are you sure you have the page encoding set correctly for your test? Try something like <meta charset="UTF-8">. Can you provide a complete testcase / steps to repro?

[enaqx]

Yeahh. I've added meta and it works now. I assume on translation docs its better to add <meta charset="UTF-8"> in all examples even if it is not present in original example.

[jimfb]

Yeah, that seems reasonable to me. Any example containing non-ascii characters should probably have the meta tag.

On a related note: Might also want the meta tag on the english versions (for consistency, if nothing else). Encourage the best-practice of always specifying your encoding. But I'll let @spicyj and @zpao be the gatekeepers of that decision.

[enaqx]

@jimfb, agree on that. For consistency its better to add charset meta everywhere to resolve future confusions.

[sophiebits]

I guess I'm okay with that, though in reality what charset you use for your HTML files is your own business and React doesn't really care. 99% of people probably do want utf-8 though so we can add it.

[jimfb]

cc @tako-black

[bgw]

<meta charset="UTF-8" /> works, although it's a far worse solution than using the correct HTTP headers. Without the HTTP header, browsers have to examine the first few kilobytes of the page, guess the charset from the character frequency, then start parsing with that guess. If it encounters a <meta charset="blah" /> tag, and realizes it got the charset wrong, it has to stop and reparse the entire page.

If we're going to make a suggestion about defining a charset, we should suggest the appropriate HTTP headers. The meta tag is buggy and has horrible perf characteristics.

[jimfb]

@bgw Users run into this when opening local html files, which don't have server headers. But yes, I agree. That said, anyone who knows how to set a server header will know to remove the meta tag from their markup :P. The point is to solve the problem where someone opens a local translated example and it blows up.

[kohei-takata]

@jimfb
What should I do?
Should I change some Japanese documents?

[jimfb]

@tako-black Yep, if you want, any inline example in the translated documents that renders a full HTML markup (like the first code block example on http://facebook.github.io/react/docs/getting-started.html) should probably contain <meta charset="UTF-8" /> in the header.

Was cc'ing you mostly so you had context and were aware of the issue, since it primarily affects translations.

[kohei-takata]

@jimfb
OK. I understand.
I'll make PR that add the tag in the header of HTML.

[berkerpeksag]

Already fixed in 87ecb0b (PR #4334) This can be closed now.