2

Tengo una duda: según esta tabla ya hay completo soporte por parte de Chrome y Firefox para ECMAScript6, pero aún así arroja error de compilación con código hecho en React que no haya sido compilado por Babel. A qué se debe esto? No deberían ya poder interpretar JSX los navegadores y olvidarse de la compilación en Babel? Qué hace falta para poder directamente escribir código y que sea nativamente interpretado?

Desde ya muchas gracias!

2 respuestas 2

2

Se puede usar React sin babel. Como ejemplo:

<html>
    <head>
        <title>React Hello World</title>
        <script src="https://unpkg.com/react@15/dist/react.js"></script>
        <script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
    </head>
    <body>
        <div id="root"></div>

        <script>
            window.onload = function()
            {
                class Greetings extends React.Component
                {
                    render()
                    {
                        return React.createElement('h1', null, 'Saludos, ' + this.props.name + '!');
                    }
                }
                ReactDOM.render(
                    React.createElement(Greetings, { name : 'Genarito' }),
                    document.getElementById('root')
                );
            };
        </script>
    </body>
</html>

De hecho, si te fijas en la tabla que agregaste a tu pregunta, el soporte para ES6 es mucho mejor en los exploradores actuales del que puede entregar actualmente babel-core-js. Ahora, si piensas usar React con JSX si vas a necesitar Babel, pero antes que nada una aclaración:

JSX no es parte de ECMAScript6 ni lo va a ser en futuras versiones, porque no es una especificación, sino un lenguaje que termina siendo transpilado (no compilado) a JS. Es como que los navegadores se pusieran a soportar además Coffeescript, Typescript, Elm o cualquier nuevo lenguaje de moda que salga, siendo que al final todos éstos terminan siendo transpilados a JS.

Retomando, ReactJS se puede usar con JS de toda la vida (como en el ejemplo que te adjunté), sin embargo si piensas usarlo con JSX (que de hecho es bastante más amigable y menos verboso que con el JS tradicional) vas a necesitar un transpilador. Hay otros proyectos que han tratado de abordar esto, sin embargo babel es tu mejor opción en este momento. TypeScript viene con soporte para JSX también, donde en teoría no debería ser necesario Babel, sin embargo necesitarías librerías que conviertan ese código TS a JS.

En resumen y respondiendo a tu pregunta del título. Babel no es "requerido", pero si que te hace la vida más fácil si piensas usar JSX o dar un soporte mínimo a exploradores antiguos en caso que quieras usar sintaxis de ES6 en tu código.

1
  • Quedó claro! Gracias! Sabía que se podía usar sin JSX, pero creí que era soportado por los navegadores. Saludos!
    – Genarito
    Commented el 11 dic. 2017 a las 19:20
2

Nos usamos Babel porque es mucho mas facil para programando en React. Si no quieres usar Babel, necesitas escribir React.createElement o React._________.

Si usas Babel, solo necesitas escribir JSX en React y su Code Editor puede highlight los verbos.

Por ejemplo, sin babel:

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

Con babel:

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

¿Que es mas facil? La segunda. Eso es porque Facebook (El grupo se creó React) dice "lo recomiendo que usan Babel con React y con su editor entonces los JSX code puede ser "Highlighted" - en ingles: "We recommend using the “Babel” language definition for your editor of choice so that both ES6 and JSX code is properly highlighted."

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.