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 <button type="button" btn-success btn-sm"> Something </button > $($0027#something-btn$0027).click(someCallback);
Muestra 2 – En JSX (Con componentes de Reacción-Bootstrap):
123 <Button bsStyle="success" bsSize="small" onClick={someCallback}; Something </Button>
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 --saveNota: 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
1webpacktexto
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<React::Componente::BasedefrenderReactBootstrap::Botón(bsStyle:$0027success$0027, bsSize: "small")do$0027Success$0027end.on(:click)do alert($0027¡me has hecho clic!$0027)endendendendendendrubí
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-devtexto
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&mimetype=application/font-woff$0027},{ test:/N. ttf(?v=d+d+.|d+d+)?$/, loader:$0027url?limit=10000&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&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&mimetype=aplicación/font-woff$0027},{ test:/.ttf(?v=d+d+.d+.}?$/, cargador:$0027url-loader?limit=10000&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 --savetexto
Ahora corre
1webpacktexto
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<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)endendendendendendendendendrubí
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 bootswatchModificar el archivo webpack/client_only.js:
123//webpack/client_only.jsrequire("bootswatch/superhero/bootstrap.min.css");javascript
Entonces corre:
1webpacktexto
Reinicie su aplicación Rails y actualice su navegador.