Cómo construir una vitrina de Hiperloop Reactrb

Ahora podemos cosechar las recompensas de todo el trabajo duro de arriba. Tenemos todo preparado para añadir fácilmente componentes de front-end y trabajar con ellos en HyperReact . Vamos a saltar y añadir un componente nativo de React que reproduce un vídeo.

Paso 5.1: Añadir un reproductor de vídeo a su sitio

Vamos a usar el rplayr Pete Cook$0027s React

Primero instale el componente a través del NPM:

1npm install react-player --save

texto

A continuación, necesitamos requerirlo en webpack/cliente_y_servidor.js

123//webpack/cliente_y_servidor.jsReactPlayer=require("react-player");

javascript

A continuación, ejecuta Webpack para que pueda ser empaquetado:

1webpack

texto

Y luego finalmente lo agrega al componente de la serie:

123456789#app/views/components/home/show.rbdefrender div doReactPlayer(url:$0027https://www.youtube.com/embed/FzCsDVfPQqk$0027, playing:true)endend

rubí

Refresca tu navegador y deberías tener un video. ¡Qué simple fue eso!

Paso 5.2: Trabajar con React-Bootstrap

Usaremos React-Bootstrap que es una biblioteca nativa de React

El propósito principal de React-Bootstrap es que abstrae el código HTML y CSS verboso en los componentes de React. Esto lo hace mucho más limpio para los desarrolladores de React JSX. Una de las cosas más encantadoras de Hyperloop es que ya trabajamos en el hermoso Ruby. Para enfatizar este punto, considera lo siguiente:

Muestra 1 – En HTML (sin React-Bootstrap):

1234 &lt;button type="button" btn-success btn-sm"&gt; Something &lt;/button &gt; $($0027#something-btn$0027).click(someCallback);

Muestra 2 – En JSX (Con componentes de Reacción-Bootstrap):

123 &lt;Button bsStyle="success" bsSize="small" onClick={someCallback}; Something &lt;/Button&gt;

Muestra 3 – En Hyperloop (Sin Reacción-Bootstrap):

123 button.btn_success.btn_sm {$0027Algo$0027}.on(:click) do someMethod end

Muestra 4 – En Hyperloop (Con Reacción-Bootstrap):

123 React-Bootstrap::Botón(bsStyle: $0027éxito$0027 bsSize: "pequeño") {$0027Algo$0027}.on(:click) do someMethod end

Como pueden ver, las muestras 3 y 4 no son tan diferentes. Como desarrollador de Hyperloop, en realidad prefiero la muestra 3, pero si fuera un desarrollador de JavaScript o JSX, entendería completamente la ventaja de abstraer el CSS de Bootstrap en los componentes de React, así que no tengo que trabajar directamente con CSS y JavaScript. Este no es el caso con HyperReact , sin embargo, como las clases CSS se añaden a los elementos HTML con simple notación puntual:

1 span.pull_right {}

Que compila a (note la conversión de _ a -):

1 <span>

Así que te escucho preguntar: ¿Por qué, si prefiero la sintaxis de no-React-Bootstrap, me preocupo por React-Bootstrap? Por una razón muy simple: los componentes como Navbar y Modal que requieren bootstrap.js no funcionarán con React por sí solos, así que sin el proyecto React-Bootstrap necesitarías implementar toda esa funcionalidad por ti mismo. El proyecto React-Bootstrap ha reimplementado esta funcionalidad como componentes de React.

Vamos a implementar una barra de navegación en este proyecto usando React-Bootstrap en HyperReact . Primero, necesitamos instalar Bootstrap y React-Bootstrap:

1 npm install bootstrap react-bootstrap --save

Nota: La opción --save actualizará el archivo package.json.

Y luego necesitamos requerirlo en webpack/cliente_y_servidor.js añadiendo esta línea:

123//webpack/cliente_y_servidor.jsReactBootstrap=require("react-bootstrap");

javascript

Ejecuta el

1webpack

texto

y reinicie su servidor de rieles.

Si actualiza su navegador ahora y abre la consola de JavaScript, podremos interactuar con React-Bootstrap escribiendo en la consola de JavaScript: ReactBootstrap.

Verán el objeto React-Bootstrap con todos sus componentes como Acordeón, Alerta, Placa, Miga de Pan, etc. Estas son grandes noticias. React-Bootstrap está instalado y listo para usar. Acceder al objeto JavaScript de esta manera es una gran manera de ver con lo que tienes que trabajar. A veces la documentación de un componente no es tan precisa como ver lo que tienes en el propio componente.

Para asegurarnos de que todo funciona, añadamos un botón a nuestro componente de la Exposición como este:

123456789101112131415#app/views/components/home/show.rbmoduleComponentsmoduleHomeclassShow&lt;React::Componente::BasedefrenderReactBootstrap::Botón(bsStyle:$0027success$0027, bsSize: "small")do$0027Success$0027end.on(:click)do alert($0027¡me has hecho clic!$0027)endendendendendend

rubí

Fíjense que hacemos referencia a ReactBoostrap en Ruby usando el mismo identificador que estaba en la declaración "require" en nuestro paquete web client_and_server.js. La primera vez que HyperReact golpee la constante de ReactBoostrap no será definida. Esto desencadena una búsqueda en el espacio de nombres de Javascript para algo que se parezca a un componente o a una biblioteca de componentes. Entonces define el módulo apropiado o la clase de componente envolvente en Ruby.

Visita tu página y, si todo va bien, verás un botón que se puede pulsar. Sin embargo, no tendrá ningún estilo. Esto se debe a que React-Bootstrap no depende automáticamente de ninguna hoja de estilo en particular, así que tendremos que suministrar una. Una forma fácil de hacerlo es simplemente copiar el archivo CSS del repositorio de Bootstrap y meterlo en nuestro directorio de activos de rails. Sin embargo, con un poco de trabajo previo, podemos hacer que Webpack lo haga todo por nosotros.

Primero agreguemos cuatro cargadores Webpack usando npm:

1npm install css-loader file-loader style-loader url-loader --save-dev

texto

Note que usamos --save-dev en vez de sólo --save, ya que estos paquetes sólo se usan en el proceso de desarrollo.

Ahora, edita tu archivo webpack.config.js y actualiza la sección de cargadores para que se vea así:

Para las versiones Webpack 1.x

123456789101112131415161718192021222324252627//webpack.config.jsvar path =require("path");module.exports={... module:{ loaders:[{ test:/. css$/, loader: "style-loader!css-loader"},{ test:/N(woff|woff2)(?v=d+.Nd+.Nd+)?$/, loader:$0027url?limit=10000&amp;mimetype=application/font-woff$0027},{ test:/N. ttf(?v=d+d+.|d+d+)?$/, loader:$0027url?limit=10000&amp;mimetype=application/octet-stream$0027},{ test:/.eot(?v=d+d+.|d+d+)? $/, loader:$0027file$0027},{ test:/.svg(?v=d+d+.d+.}?$/, loader:$0027url?limit=10000&amp;mimetype=image/svg+xml$0027}},...};

javascript

Para las versiones Webpack 2.x

12345678910111213141516171819202122232425262728293031323334//webpack.config.jsvar path =require("path");module.exports={... module:{ rules:[{ test:/.css$/, use:[{ { cargador: "style-loader"},{ cargador: "css-loader"}]},{ test:/\\N-(woff|woff2)(?v=d+.Nd+Nd+)?$/, loader:$0027url-loader? límite = 10000&amp;mimetype=aplicación/font-woff$0027},{ test:/.ttf(?v=d+d+.d+.}?$/, cargador:$0027url-loader?limit=10000&amp;mimetype=aplicación/octet-stream$0027},{ test://. loader:$0027file-loader$0027, $0027loader$0027, $0027file-loader$0027, $0027mimetype$0027, $0027image/svg+xml$0027},...

javascript

Hemos configurado el Webpack para usar el cargador de estilos para procesar un archivo CSS cuando sea necesario. Debido a que el archivo CSS de Bootstrap requerirá archivos de fuentes, también tenemos cuatro cargadores de fuentes. Ahora, cuando se requiera cualquier archivo CSS, tendremos todo lo que necesitamos bien empaquetado.

Ahora estamos listos para requerir archivos CSS y hacer que Webpack construya un paquete completo incluyendo el CSS y cualquier fuente referenciada.

Para incluir en el archivo CSS de Bootstrap añade esta línea a webpack/client_only.js

123//webpack/client_only.jsrequire("bootstrap/dist/css/bootstrap.css");

javascript

E instalar el paquete Bootstrap:

1npm instalar bootstrap --save

texto

Ahora corre

1webpack

texto

para actualizar nuestros paquetes y reiniciar su servidor. Nuestro botón está ahora bien diseñado y deberías ser recompensado con un bonito Botón del Éxito verde estilo Bootstrap.

Ahora que todo está cargado, vamos a actualizar nuestro componente para usar algunos más de los componentes de Bootstrap. Actualiza tu componente de Mostrar para que se vea así:

12345678910111213141516171819202122232425262728293031323334353637383940414243#app/views/componentes/home/show. rbmoduleComponentsmoduleHomeclassShow&lt;React::Componente::Basedefsay_hello(i) alert "Hello from number #{i}"enddefrender div doReactBootstrap::Navbar(bsStyle:: inverso)doReactBootstrap::Nav()doReactBootstrap::NavbarBrand()do a(href:$0027#$0027){$0027Hyperloop Showcase$0027}endReactBootstrap::NavDropdown( eventKey:1, title:$0027Things$0027, id::drop_down)do(1. .5).eachdo|n|ReactBootstrap::MenuItem(href:$0027#$0027, key: n, eventKey: "1.#{n}")do "Number #{n}"end.on(:click){ say_hello(n)}endendendendend div.container doReactPlayer(url:$0027https://www.youtube.com/embed/FzCsDVfPQqk$0027, playing:true)endendendendendendendendend

rubí

Unas cuantas cosas a tener en cuenta en el código de arriba:

Añadimos los componentes de React-Bootstrap simplemente por ReactBootstrap::Nombre donde Nombre es el componente de JavaScript que quieres renderizar. Todos los componentes están documentados en la documentación de React-Bootstrap

Ver con div.container estamos mezclando en estilo CSS que compilará en

También noten como he agregado un manejador de eventos .on(:click) al componente MenuItem mientras establecí href: $0027#$0027 ya que esto nos permitirá manejar el evento en lugar de navegar a una nueva página.

Hasta ahora tenemos una aplicación muy básica que se ve bien y muestra un video. Es hora de hacer algo un poco más interesante. Añadamos la funcionalidad de Publicar y Comentar que nos permitirá explorar ReactiveRecord!

Paso 5.3: Usando un tema de Bootstrap

Vamos a reemplazar el tema original de Bootstrap con el tema de Bootswatch Superhéroe.

Instala el paquete de bootswatch con NPM:

1npm instalar bootswatch

Modificar el archivo webpack/client_only.js:

123//webpack/client_only.jsrequire("bootswatch/superhero/bootstrap.min.css");

javascript

Entonces corre:

1webpack

texto

Reinicie su aplicación Rails y actualice su navegador.

Contenidos

Paso 5.1: Añadir un reproductor de vídeo a su sitio
Paso 5.2: Trabajar con React-Bootstrap
Paso 5.3: Usando un tema de Bootstrap