From 1d4b09d8262628d94a728f6282c0ef07aacb89bb Mon Sep 17 00:00:00 2001 From: Vick Vasquez Date: Wed, 6 Feb 2019 23:11:22 -0600 Subject: [PATCH 1/3] Translated React whitout JSX --- content/docs/react-without-jsx.md | 22 ++++++++++------------ 1 file changed, 10 insertions(+), 12 deletions(-) diff --git a/content/docs/react-without-jsx.md b/content/docs/react-without-jsx.md index 85cdba45f..23576af9e 100644 --- a/content/docs/react-without-jsx.md +++ b/content/docs/react-without-jsx.md @@ -4,14 +4,14 @@ title: React Without JSX permalink: docs/react-without-jsx.html --- -JSX is not a requirement for using React. Using React without JSX is especially convenient when you don't want to set up compilation in your build environment. +JSX no es un requisito para usar React. Usar react sin JSX es especialmente conveniente cuando no necesitas configurar herramientas de compilacion en tu ambiente de desarrollo. -Each JSX element is just syntactic sugar for calling `React.createElement(component, props, ...children)`. So, anything you can do with JSX can also be done with just plain JavaScript. +Cada elemento JSX es solamente azucar sintactico para llamar `React.createElement(component, props, ...children)`. Por lo tanto, cualquier cosa que se pueda hacer con JSX se puede hacer con Javascript puro. -For example, this code written with JSX: +Por ejemplo, este código escrito con JSX: ```js -class Hello extends React.Component { +class Hello extends React.Component {`React.createElement(component, props, ...children)`. render() { return
Hello {this.props.toWhat}
; } @@ -22,8 +22,7 @@ ReactDOM.render( document.getElementById('root') ); ``` - -can be compiled to this code that does not use JSX: +se puede compilar a este que no usa JSX: ```js class Hello extends React.Component { @@ -38,11 +37,11 @@ ReactDOM.render( ); ``` -If you're curious to see more examples of how JSX is converted to JavaScript, you can try out [the online Babel compiler](babel://jsx-simple-example). +Si tienes curiosidad por ver mas ejemplos de como JSX se convierte a Javascript, puedes probar el [compilador en linea de Babel](babel://jsx-simple-example). -The component can either be provided as a string, or as a subclass of `React.Component`, or a plain function for stateless components. +El componente puede ser proporcionada como una cadena, o como una subclase de `React.Component`, o una función simple para componentes sin estado. -If you get tired of typing `React.createElement` so much, one common pattern is to assign a shorthand: +Si te cansas de escribir tanto `React.createElement`, un patrón común es assignarlo a una variable corta: ```js const e = React.createElement; @@ -53,7 +52,6 @@ ReactDOM.render( ); ``` -If you use this shorthand form for `React.createElement`, it can be almost as convenient to use React without JSX. - -Alternatively, you can refer to community projects such as [`react-hyperscript`](https://github.com/mlmorg/react-hyperscript) and [`hyperscript-helpers`](https://github.com/ohanhi/hyperscript-helpers) which offer a terser syntax. +Si usas esta forma abreviada para `React.createElement`, puede ser casi tan conveniente usar React sin JSX. +Alternativamente, puedes referefirte a proyectos comunitarios como [`react-hyperscript`](https://github.com/mlmorg/react-hyperscript) y [`hyperscript-helpers`](https://github.com/ohanhi/hyperscript-helpers) que ofrecen una sintaxis terser. From a97aff2bdf51a26ec5646fad00e31d9403dfe854 Mon Sep 17 00:00:00 2001 From: Vick Vasquez Date: Wed, 6 Feb 2019 23:20:56 -0600 Subject: [PATCH 2/3] Removed unnecesary code --- content/docs/react-without-jsx.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/react-without-jsx.md b/content/docs/react-without-jsx.md index 23576af9e..abc988c45 100644 --- a/content/docs/react-without-jsx.md +++ b/content/docs/react-without-jsx.md @@ -11,7 +11,7 @@ Cada elemento JSX es solamente azucar sintactico para llamar `React.createElemen Por ejemplo, este código escrito con JSX: ```js -class Hello extends React.Component {`React.createElement(component, props, ...children)`. +class Hello extends React.Component render() { return
Hello {this.props.toWhat}
; } From 31be19b1404ef96946faba4de207fac8d228e1cd Mon Sep 17 00:00:00 2001 From: Vick Vasquez Date: Thu, 7 Feb 2019 10:20:37 -0600 Subject: [PATCH 3/3] Fix spelling errors --- content/docs/react-without-jsx.md | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/content/docs/react-without-jsx.md b/content/docs/react-without-jsx.md index abc988c45..4b68ab918 100644 --- a/content/docs/react-without-jsx.md +++ b/content/docs/react-without-jsx.md @@ -4,14 +4,14 @@ title: React Without JSX permalink: docs/react-without-jsx.html --- -JSX no es un requisito para usar React. Usar react sin JSX es especialmente conveniente cuando no necesitas configurar herramientas de compilacion en tu ambiente de desarrollo. +JSX no es un requisito para usar React. Usar React sin JSX es especialmente conveniente cuando no quieres configurar herramientas de compilación en tu entorno de desarrollo. -Cada elemento JSX es solamente azucar sintactico para llamar `React.createElement(component, props, ...children)`. Por lo tanto, cualquier cosa que se pueda hacer con JSX se puede hacer con Javascript puro. +Cada elemento JSX es solamente azúcar sintáctico para llamar a `React.createElement(component, props, ...children)`. Por lo tanto, cualquier cosa que se pueda hacer con JSX se puede hacer con Javascript puro. Por ejemplo, este código escrito con JSX: ```js -class Hello extends React.Component +class Hello extends React.Component { render() { return
Hello {this.props.toWhat}
; } @@ -22,6 +22,7 @@ ReactDOM.render( document.getElementById('root') ); ``` + se puede compilar a este que no usa JSX: ```js @@ -37,11 +38,11 @@ ReactDOM.render( ); ``` -Si tienes curiosidad por ver mas ejemplos de como JSX se convierte a Javascript, puedes probar el [compilador en linea de Babel](babel://jsx-simple-example). +Si tienes curiosidad por ver más ejemplos de cómo JSX se convierte a Javascript, puedes probar el [compilador en línea de Babel](babel://jsx-simple-example). -El componente puede ser proporcionada como una cadena, o como una subclase de `React.Component`, o una función simple para componentes sin estado. +El componente puede ser proporcionado como una cadena, como una subclase de `React.Component`, o una función simple para componentes sin estado. -Si te cansas de escribir tanto `React.createElement`, un patrón común es assignarlo a una variable corta: +Si te cansas de escribir tanto `React.createElement`, un patrón común es asignarlo a una variable corta: ```js const e = React.createElement; @@ -54,4 +55,4 @@ ReactDOM.render( Si usas esta forma abreviada para `React.createElement`, puede ser casi tan conveniente usar React sin JSX. -Alternativamente, puedes referefirte a proyectos comunitarios como [`react-hyperscript`](https://github.com/mlmorg/react-hyperscript) y [`hyperscript-helpers`](https://github.com/ohanhi/hyperscript-helpers) que ofrecen una sintaxis terser. +Alternativamente, puedes remitirte a proyectos comunitarios como [`react-hyperscript`](https://github.com/mlmorg/react-hyperscript) y [`hyperscript-helpers`](https://github.com/ohanhi/hyperscript-helpers) que ofrecen una sintaxis más concisa.