These are the docs for React on Rails 12. To see the version 11 docs, click here.

News

October 14, 2020: RUBY ROGUESRR 474: React on Rails V12-Don ’ t Shave That Yak! Justin Gordonin kanssa.

October 1, 2020: Katso spec/dummy example repo: sta webpackin yksinkertainen kokoonpano SSR: ää tukevan rails / webpacker-Gems: n kautta.

2.elokuuta 2020: Katso React on Rails-opetusohjelman esimerkki Repo SSR: n, HMR fast refresh: n ja Typescriptin avulla uusi tapa määrittää SSR-paketin luominen rails/webpacker.

8.heinäkuuta 2020: React on Rails-albumin julkaisu v12.

suuret parannukset

1. React koukuttaa tuen ylätason osille
2. Konekirjoitussidokset
3. rails / webpacker ”vain toimii” React on Rails-ohjelman oletusarvoisesti.
4. i18n tuki JSON-tiedoston luomiseen JS-tiedoston sijaan.

CHANGELOG.md Lue päivitysohjeet: docs / basics / upgrading-react-on-rails.

• Katso Justinin railsconf talk: Webpacker, It-Just-Works, But How?.
• Kiinnostaako tuki React on Rails-yhtyeelle? Haluatko käyttää solmua?js tehdä palvelinpuolen renderöinti niin kirjastot kuten Emotion ja ladattavat komponentit vain toimivat, verrattuna renderöintiin Ruby embedded JS: n kautta? Jos näin, tutustu React on Rails Pro.
• HMR työskentelee kuormitettavien komponenttien kanssa, mikä takaa sekä hämmästyttävän hot-reloading-kehittäjäkokemuksen että erinomaisen suoritustehon. Lähetä minulle sähköpostia, jos haluat käyttää kuormitettavia komponentteja koodin jakaminen nopeuttaa sovelluksen pienentämällä pakettikokoja ja laiskasti lataamalla koodi, jota tarvitaan.

About

React on Rails yhdistää kiskot (palvelimen renderöinti) Facebook React front-end-kehykseen.

projektia ylläpitää ohjelmistokonsultointiyritys ShakaCode. Keskitymme Ruby On Rails-sovelluksiin, joissa on React-etupäät, usein käyttäen konekirjoitusta tai ReasonML: ää. Rakennamme myös Gatsby-sivustoja. Katso tuoreesta työstämme esimerkkejä siitä, mitä teemme.

Oletko kiinnostunut optimoimaan webpack-asetuksesi React on Railsille,mukaan lukien codesplitting react-reitittimellä ja loadable-komponentit palvelinpuolen renderöinnillä?Teimme juuri tämän Popmenu, alentamalla Heroku kustannukset 20-25% samalla saada 73% lasku keskimääräinen vasteajat.

ota rohkeasti yhteyttä Justin Gordoniin, [email protected], ylläpitäjä React on Rails, lisätietoja.

klikkaa liittyäksesi React + Rails Slack.

projektin tavoite

tarjota tehokas kehys Rubyn integroimiseksi raiteilla Reactiin Webpacker-jalokiven kautta erityisesti React-Palvelinpuoleisen renderöinnin osalta parantaakseen SEO: ta ja parantaakseen suorituskykyä.

ominaisuudet ja miksi reagoida kiskoilla?

ottaen huomioon, että rails/webpacker gem tarjoaa jo perusreaktiointegraation, miksi käyttäisit ”React on Rails” – toimintoa?

1. helppo rekvisiitan siirtäminen suoraan kiskojen näkymästä React-komponentteihin sen sijaan, että kiskojen katselukuorma olisi valmis ja tee sitten erillinen pyyntö API: llesi.
2. tiivis integraatio rails / webpackerin kanssa.
3. palvelinpuolen renderöintiä (SSR), jota käytetään usein SEO crawler-indeksoinnissa ja UX-suorituskyvyssä, ei tarjoa rails/webpacker.
4. Redux ja React-reitittimen integraatio palvelinpuolen renderöinnillä.
5. kansainvälistyminen (I18n) ja (lokalisointi)
6. tukiyhteisö. Tämä verkkohaku näyttää, miten live julkiset sivustot käyttävät React on Rails.
7. Reason ML tuki.

Katso Rails / Webpacker React-Integrointivaihtoehdot vertailua varten muihin jalokiviin.

katso react-webpack-rails-tutorialista esimerkki live-toteutuksesta ja koodista.

ShakaCode Forum Premium Content

edellyttää ilmaisen tilin luomista.

• miten tiedoston eri versioita käytetään asiakas-ja palvelinrenderöintiin
• miten palvelimen puoli ehdollisesti tehdään laitetyypin mukaan

Docs

harkitse tämän selaamista verkkosivuillamme.

edellytykset

Ruby On Rails >=5 ja rails / webpacker 4.2+.

aloittaminen

huomaa, että paras tapa ymmärtää Reaktonraiteiden käyttöä on tutkia muutamia yksinkertaisia esimerkkejä. Voit tehdä nopean demoasennuksen joko olemassa olevalla sovelluksellasi tai uudella Rails-sovelluksella.

1. Tee nopea opetusohjelma.
2. lisää React on Rails olemassa olevaan Rails-sovellukseen ohjeiden mukaisesti.
3. Look at spec / dummy, a simple, no DB example.
4. Katso github.com/shakacode/react-webpack-rails-tutorial; It ’ s a full-featured example live at www.reactrails.com.

perusasennus

Katso myös ohjeet asennuksesta olemassa olevaan Rails-sovellukseen.

1. Lisää react_on_rails jalokivi Gemfiiliin:

   bundle add react_on_rails --strict

toimita tämä git: lle (tai muuten et voi ajaa generaattoria, ellet läpäise vaihtoehtoa--ignore-warnings).

Käynnistä generaattori:

rails generate react_on_rails:install

Käynnistä sovellus:

rails s

käy http://localhost:3000/hello_world.

palvelimen renderöinti

koodilla React on Rails-generaattorin ajamisesta edellä:

1. Edit app/views/hello_world/index.html.erb ja set prerender to true.
2. Päivitä sivu.

alla on rivi, jolla kytket palvelintrenderöinnin päälle asettamalla prerender to true:

<%= react_component("HelloWorld", props: @hello_world_props, prerender: false) %>

huomaa,että jos konsolissasi on virhe koskien ”ReferenceError: window is not defined”, sinun täytyy muokata config/webpacker.yml ja Set hmr: false ja inline: false.Katso tämän ongelman korjaus kohdasta rails / webpacker PR 2644.

peruskäyttö

kokoonpano

• Configure config/initializers/react_on_rails.rb. Voit säätää joitakin tarvittavia asetuksia ja oletusarvoja. Katso file docs/basics/configuration.md kaikkien asetusasetusten dokumentointi.
• Configure config/webpacker.yml. Jos käytit generaattoria ja webpackerin oletusasetusta, sinun ei tarvitse koskea tähän tiedostoon. Jos muokkaat asetuksia, ota yhteyttä spec / dummy / config / webpacker.YML esimerkki tai virallinen oletus webpacker.yml.
  • kärki: aseta compile: false kehitykselle, jos tiedät, että kokoat aina kelloprosessin. Muussa tapauksessa jokainen pyyntö tarkistaa, onko kokoelma tarvitaan.
  • public_output_path on sovittava muokattuun Webpack-kokoonpanoon output nipuistasi.
  • vain asettaa cache_manifesttrue omassa tuotannossa env.

mukaan lukien React-komponentti Rails-näkymissä

• React-komponentti renderoidaan Rails-näkymien kautta. Tässä ERB-näyte:

  <%= react_component("HelloWorld", props: @some_props) %>

• palvelinpuolen renderointi: reaktiokomponenttisi renderoidaan ensin HTML-muotoon palvelimella. Käytä etuoikeusasetusta:

  <%= react_component("HelloWorld", props: @some_props, prerender: true) %>

component_nameparametri on merkkijono, joka vastaa nimeä, jota käytit Altistaaksesi Reaktiokomponenttisi globaalisti. Jos yllä olevissa esimerkeissä olisi ”HelloWorld” – niminen Reaktiokomponentti, se rekisteröitäisiin seuraavilla riveillä:

import ReactOnRails from 'react-on-rails';import HelloWorld from './HelloWorld';ReactOnRails.register({ HelloWorld });

valottamalla komponenttisi tällä tavalla React on Rails pystyy viittaamaan komponenttiisi Kiskonäkymästä. Voit paljastaa niin monta komponenttia kuin haluat, kunhan niiden nimet eivät törmää. Alla on lisätietoja siitä, miten altistaa komponentit kautta react_on_rails webpack kokoonpano. ReactOnRails.register moneen kertaan.

@some_propsvoi olla joko hash-tai JSON-merkkijono. Tämä on valinnainen argumentti olettaen, että sinun ei tarvitse antaa mitään vaihtoehtoja (Jos haluat antaa vaihtoehtoja, kuten prerender: true, mutta et halua antaa mitään ominaisuuksia, yksinkertaisesti siirtää tyhjä hash {}). Näin saadaan tieto omaan komponenttiin:

 # Rails View <%= react_component("HelloWorld", props: { name: "Stranger" }) %>

• Tämä on teidän HelloWorld.JS-tiedosto saattaa sisältää. Railskonteksti on aina käytettävissä kaikille parametreille, jotka haluat aina käytettäviksi React-komponentteihisi. Sillä ei ole mitään tekemistä React-Kontekstin käsitteen kanssa. Lisätietoja aiheesta on ohjeaiheessa Renderöintitoiminnot ja kiskot.

  import React from 'react';export default (props, railsContext) => { // Note wrap in a function to make this a React function component return () => ( <div> Your locale is {railsContext.i18nLocale}.<br/> Hello, {props.name}! </div> );};

Katso tarkemmat tiedot react_component ja sen sisarustoiminto react_component_hash.

Globally Exposing Your React Components

for the React on Rails view helper react_component to use your React components, you will be register them in your JavaScript code.

käytä moduuleja aivan kuten Webpackia käytettäessä ja reagoi ilman kiskoja. Erona on, että sen sijaan, että kiinnität komponentit suoraan elementtiin käyttäen React.render, rekisteröit komponentit Reaktonraiteille ja kiinnität ne sitten apulaisilla Kiskonäkymiesi sisään.

näin altistetaan komponentti react_component view helper.

 // app/javascript/packs/hello-world-bundle.js import HelloWorld from '../components/HelloWorld'; import ReactOnRails from 'react-on-rails'; ReactOnRails.register({ HelloWorld });

eri palvelinpuolen Renderöintikoodi (ja Palvelinkohtainen nippu)

saatat haluta eri koodin palvelinpuolen renderöidyille komponenteille, jotka toimivat palvelinpuolella vs. asiakaspuolella. Esimerkiksi, jos sinulla on animaatio, joka suoritetaan, kun komponentti näytetään, saatat joutua sammuttamaan sen, kun palvelin renderöinti. Yksi tapa käsitellä tätä on ehdollinen koodi, kuten if (window) { doClientOnlyCode() }.

toinen tapa on käyttää erillistä webpack-asetustiedostoa, joka voi käyttää eri palvelinpuoleista syöttötiedostoa, kuten ” serverregnation.js ”toisin kuin” clientRegistration.js.’Se asettaisi eri koodin palvelimen renderöintiin.

tarkemmat tiedot tekniikoista käyttää eri koodia asiakas-ja palvelinrenderöinnissä, KS.: Kuinka käyttää tiedoston eri versioita asiakkaan ja palvelimen renderointiin. (Edellyttää ilmaisen tilin luomista.)

React-komponenttien määrittäminen: Rekisteröidy suoraan tai käytä renderöintifunktioita

sinulla on kaksi tapaa määrittää Reaktiokomponenttisi. Voit joko rekisteröidä React-komponentin (joko funktio tai luokkakomponentti) suoraan, tai voit luoda funktion, joka palauttaa React-komponentin, jota käytämme ”renderöintifunktion”nimeä. Renderöintifunktion luominen mahdollistaa:

1. voit käyttää railsContext. Katso kiskojen dokumentaatiosisältö siitä, miksi saatat tarvita sitä. Tarvitset Renderöintifunktion päästäksesi railsContext.
2. voit käyttää pass-in-rekvisiittaa Redux-kaupan alustamiseen tai react-reitittimen perustamiseen.
3. voit palauttaa eri osia riippuen siitä, mitä rekvisiitassa on.

huomaa, että Renderöintifunktion paluuarvon tulee olla joko React-funktio tai Luokkakomponentti tai olio, joka edustaa palvelimen renderöintituloksia.

älä palauta Reaktioelementtiä (JSX).

ReactOnRails tunnistaa automaattisesti rekisteröidyn Renderöintifunktion sillä, että funktio ottaa enemmän kuin 1 parametrin. Toisin sanoen, jos haluat kyky tarjota toiminto, joka palauttaa theReact komponentti, sinun täytyy määrittää ainakin toinen parametri. Tämä on railsContext.Jos et käytä tätä parametria, ilmoita funktiosi käyttämättömällä paramilla:

const MyComponentGenerator = (props, _railsContext) => { if (props.print) { // This is a React FunctionComponent because it is wrapped in a function. return () => <H1>{JSON.stringify(props)}</H1>; }}

näin ollen ei ole eroa React-Funktion komponentin tai luokkakomponentin rekisteröimisellä verrattuna ”Renderöintifunktioon.”Soita vain ReactOnRails.register.

react_component_hash Renderöintifunktioille

toinen syy Renderöintifunktion käyttöön on se, että joskus palvelimen renderöinnissä, erityisesti Reactdomserver-reitittimellä, on palautettava tulos, kun kutsutaan Reaktdomserver.renderToString (Elementti). Voit tehdä tämän palauttamalla objektin, jonka muoto on seuraava: {renderedHtml, redirectLocation, error }. Varmista, että käytät tätä funktiota react_component_hash.

palvelinrenderöinnissä, jos haluat palauttaa renderöintifunktiosta useita HTML-merkkijonoja, voit palauttaa objektin Renderöintifunktiostasi yhdellä ylätason ominaisuudella renderedHtml. Tämän objektin sisään sijoitetaan avain, jota kutsutaan componentHtml, yhdessä muiden tarvittavien avainten kanssa. Esimerkki skenaario tästä on, kun käytät sivuvaikutuksia kirjastot kuten React Helmet. Ruby-koodi saa tämän objektin Hash sisältää avaimet componentHtml ja muita mukautettuja avaimia, jotka olet lisännyt:

{ renderedHtml: { componentHtml, customKey1, customKey2} }

lisätietoja react_component_hashin käytöstä react-kypärän kanssa on react-kypärän ohjeistuksessa.

virheenkäsittely

• kaikki reaktonraiteiden virheet ovat tyyppiä Reaktonraiteet::virhe.
• Prerendering (palvelimen renderointi) virheet saavat kontekstitietoja Honeybadgerille ja Sentrylle helpottamaan virheenkorjausta.

I18n

React on Rails tarjoaa vaihtoehdon kiskojen automaattiselle muuntamiselle *.yml locale files into *.json or”.js.Katso yhteenveto i18n: n lisäämisestä kohdasta How to add i18n.

lisätietoja

Selaa linkkejä Tiivistelmätaulukossa

Tässä muutamia erittäin suositeltavia seuraavia artikkeleita luettavaksi:

1. How React on Rails Works
2. Webpack Configuration
3. View Helpers API
4. Caching and Performance: React on Rails Pro.
5. Deployment.

tuki

klikkaa liittyäksesi React + Rails Slack.

Community Resources

please click to subscribe to keep in contact with Justin Gordon and ShakaCode. Aion lähettää ilmoituksia React on Rails – sivuston uusista julkaisuista sekä uusimmista blogiartikkeleistamme ja tutoriaaleistamme.

• Slack Room: ota meihin yhteyttä ja kutsu ShakaCode Slack room! Kerro meille, jos haluat osallistua.
• forum.shakacode.com: Post your questions
• @railsonmaui on Twitter
• for a live, open source, example of this gem, see www.reactrails.com
• Katso react on Rails-projektit ja kehut. Lähetä omasi! Muokkaa joko sivua tai lähetä meille sähköpostia, niin lisäämme tietosi. Rakastamme myös tähtiä, koska se auttaa meitä houkuttelemaan uusia käyttäjiä ja avustajia.
• Katso NEWS.md Lisää muistiinpanoja ajan.

osallistuminen

vikailmoitukset ja pull-pyynnöt ovat tervetulleita. Katso osallistuminen alkuun, ja luettelo help wanted kysymyksiä.

React on Rails Pro

Support React on Rails Pro development by becoming a GitHub sponsor and get these benefits.

React on Rails Pro sisältää Solmupalvelimen renderöinnin, fragmenttien välimuistin tallentamisen, koodin jakamisen ja muita React on Railsin suorituskyvyn parannuksia. Tapaustutkimus, katso artikkeli HVMN: n 90% alennus palvelimen vasteaika React on Rails Pro. Wiki sisältää lisätietoja.

React on Rails Pro-tukisuunnitelma voi auttaa!

• optimoi webpack-asetuksesi React on Railsin uusimpaan Webpackiin, mukaan lukien koodin jakaminen kuormitettavilla komponenteilla.
• Päivitä sovelluksesi käyttämään nykyistä rails/webpacker setup, joka ohittaa ketjupyörien omaisuusputken.
• Parempi suorituskyky asiakas-ja palvelinpuolella.
• parhaat käytännöt perustuvat yli 6 vuoden React on Rails-kokemukseen monista tuotantoprojekteista.
• käyttäen järjen kanssa (tai ilman) reagoida kiskoilla.

ShakaCode voi myös auttaa mukautettujen ohjelmistokehitystarpeiden kanssa. Olemme erikoistuneet markkinapaikka-ja verkkokauppasovelluksiin, jotka hyödyntävät sekä kiskoja että Reactia. Koska omistamme HiChee.com Voimme käyttää koodia sovellukseesi!

lähetä sähköpostia Justin Gordonille [email protected], ylläpitäjä React on Rails, lisätietoja.

Pro: Fragmentin välimuistiin tallentaminen

fragmentin välimuistiin tallentaminen on React on Rails Pro-ominaisuus. Fragment välimuistiin on valtava suorituskyvyn booster sovelluksia. Käytä cached_react_component jacached_react_component_hash. Rajapinta on sama kuin react_component ja react_component_hash, mutta 2 erosta:

1. cache_key vie samat parametrit kuin mikä tahansa Rails cache view helper.
2. rekvisiitta kulkee lohkon kautta niin, että rekvisiitan arviointi ei tapahdu, ellei välimuisti ole rikki. Oletetaan, että laitat rekvisiittalaskentasi johonkin menetelmään, jota kutsutaan nimellä some_slow_method_that_returns_props:

<%= cached_react_component("App", cache_key: , prerender: true) do some_slow_method_that_returns_propsend %>

tällainen fragmentin välimuistin tallentaminen säästää suorittimen työtä www-palvelimellesi ja vähentää huomattavasti pyyntöaikaa. Se ohittaa täysin:

1. Tietokantapuheluiden arviointikustannukset rekvisiitan laskemiseksi.
2. Serialization the props values hash into a JSON string for evaluating JavaScript to server renderöinti.
3. kustannukset, jotka liittyvät JavaScriptin arviointiin Ruby-koodistasi.
4. luodaan HTML-merkkijono, joka sisältää rekvisiitan ja palvelimella renderöidyn JavaScript-koodin.

huomaa, että fragmentin välimuistiin tallentaminen on edelleen tehokasta myös ilman palvelimen renderöintiä (ilman edellä olevaa vaihetta 3).

Pro: integrointi solmuun.js Palvelinrenderöinnille

Oletuspalvelinrenderöinnille tehdään Execj: t. Jos haluat käyttää solmua.js server paremman suorituskyvyn palvelimen renderointi, Sähköposti [email protected]. ShakaCode on rakentanut premium-solmujen renderointipalvelimen, joka on osa React on Rails Pro-palvelua.

Shakacode

Hvmn Testimonial, by Paul Benigeri, October 12, 2018

the price we paid for the consultation + The React on Rails pro license has already been back of parikin kertaa from hosting fee alone. Koko prosessi oli super näpit irti, ja ydinryhmämme pystyi keskittymään uuden ominaisuuden toimittamiseen tuon sprintin aikana.

ResortPass Testimonial, by Leora Juster, December 10, 2018

Justin ja hänen tiiminsä auttoivat meitä luomaan perustan ja standardit react on rails-sovellukseen siirtymiselle. Vain kolme kuukautta työtä tiimin Shaka koodi ja meillä on Pääsivu sovelluspalvelinpuolen renderöinti eksponentiaalisesti parantunut nopeudet.

Joel Hooksilta, toinen perustaja, Chief Nerd at egghead.io, 30. tammikuuta 2017:

lisätiedot, Katso Live-projektit ja kehut.

tukijat

seuraavat yritykset tukevat tätä avoimen lähdekoodin projektia, ja ShakaCode käyttää heidän tuotteitaan! Justin kirjoittaa React on Rails RubyMine. Käytämme Scout seurata live suorituskykyä HiChee.com, kiskot AutoScale skaalata Dynos HiChee, BrowserStack ratkaista ongelmia omituinen selaimet.

klubitalo

i ’ve just moved shakacode’ s development to clubhouse from Trello. Teemme tätä kaikilla projekteillamme. Jos haluat kokeilla Clubhousea ja saada 2 kuukautta ilmaiseksi 14 päivän kokeilujakson jälkeen, klikkaa tästä käyttääksesi Shakacoden suosittelukoodia. Osallistumme heidän mahtavaan kolmiosaiseen suositteluohjelmaansa, josta voit lukea täältä. Käyttämällä suosittelukoodiamme tuet Shakacodea ja siten reagoit raiteilla!

Jos haluat tukea React on Railsia ja listata yrityksesi tähän, ota yhteyttä.

Aloha ja terveisin Justin and the ShakaCode team!

Työskentele kanssamme