A diferencia de Angular 2, que es un marco completo, React es simplemente una biblioteca que proporciona características básicas para la construcción de interfaces de usuario. React utiliza JSX, o Serialización Java a XML, para renderizar sus componentes. JSX es mucho más sencillo y ligero que TypeScript y, a diferencia de éste, JSX puede integrarse en el pipeline de activos de Rails. Como resultado, la integración de React se hace suficientemente rápida.
Preparando el entorno para React
Debido a que el JSX de React se integra fácilmente con el pipeline de activos, se puede configurar el entorno simplemente instalando la gema react-rails. Viene con un conjunto de características útiles: renderización del lado del servidor, generadores de componentes y más. Añade la gema a tu Gemfile:
12# Gemfile.rbgem $0027react-rails$0027
rubí
Instala la gema:
1bundle install
bash
Ponga en marcha el generador proporcionado por la gema para que la aplicación Rails funcione con React:
1rails g react:install
bash
Esto creará un archivo de inicialización llamado component.js en el directorio app/assets y un nuevo directorio, app/assets/javascripts/components/ para el resto de los componentes. También va a añadir las dependencias de React al pipeline de activos:
12345///app/assets/javascripts/application.js//= require react//= require react_ujs//= require components
javascript
React está configurado, ahora todo lo que necesitamos es poner un controlador, una vista y una ruta para nuestra aplicación Ruby on Rails para renderizar los componentes.
Primero, vamos a crear un simple controlador. Ve a app/controllers y crea un archivo llamado site_controller.rb:
123456#app/controllers/site_controller.rbclassSiteController<ApplicationControllerdefindexendend
rubí
Pon la acción del índice del controlador como raíz de tu aplicación Rails:
123456#app/config/routes.rbRails.application.routes.draw do get $0027/api$0027={;$0027application#index$0027, defaults:{ format::json} root to:$0027site#index$0027#añade la ruta para el componente Reactendrubí
Esto es todo lo que se requiere para configurar el entorno Reacciona para la aplicación Rails. A continuación, vamos a renderizar los datos del servidor.
El primer componente de React
Para hacer un nuevo componente, puedes simplemente ejecutar el generador y se creará para ti:
1 los rieles generan react:componente Item--es6
javascript
El generador creará un componente en app/assets/javascripts/componentes en la sintaxis de EcmaScript 6. Abre el archivo y pon el siguiente fragmento de código:
12345678910111213141516//app/assets/javascripts/components/item.es6.jsxclassItemextendsReact.Componente{constructor(props, contexto){super(props, contexto);esto. state={ item:""};}render(){retorno(www. railsreact starter)/h2
javascript
El constructor() se utiliza para inicializar las variables de estado del componente. En el constructor, un objeto Item vacío será inicializado en el estado del componente. super es un patrón común de Objeto-Orientado, aquí se usa para heredar los props y el contexto de la clase React.Component. La función render() se usa para renderizar html en el componente. En este caso, renderizará el estado del ítem del componente. this.state contiene el estado del componente, que normalmente está contenido en variables privadas o específicas del componente. item es una de estas variables. Sin embargo, cuando hay varios componentes anidados, los datos entre ellos se pasan a través de this.props.
Lo que queremos es convertir los datos del servidor en un artículo:
12345678910//app/assets/javascripts/componentes/item.es6.jsxclassItemextendsReact.Componente{//constructorcomponenteDidMount(){ $.getJSON("/api",response={this.setState({ item: response.some});});}//render}javascript
componentDidMount() es un método que se llamará cuando el componente se monte en el DOM. Dicho simplemente, se llama cuando el componente se renderiza en la página. En él, la función $.getJSON hace una petición al localhost:3000/api y utiliza la función de flecha de EcmaScript 6 para obtener la llamada cuando la petición tiene éxito. this.setState() establecerá la propiedad del ítem con la propiedad del objeto de respuesta, que contendrá { algún: $0027data$0027 }.
Por último, haz una vista para renderizar el componente. Ve a app/views, crea un directorio llamado site y crea un archivo llamado index.html.erb. Pon el siguiente fragmento en él:
12<!-- app/views/site/index.html.erb --;<%= reacciona_componente $0027Item$0027 %;
html
reac_component es un método de ayuda incorporado, proporcionado por react-rails, que va a renderizar el componente Item en la vista de Rails.
Con este paso, la aplicación Rails integra React. Vaya a http://localhost:3000 y vea los resultados. Si encuentras algún problema, comprueba el repositorio GitHub .