Kuinka luoda Rails-projekti React- ja Redux-käyttöliittymällä

Täydellinen opas yksisivuisen Javascript-sovelluksen määrittämiseen React- ja Redux-toiminnoilla Rails-projektin sisällä.

Päivitys (17. maaliskuuta 2019): Lisätty konekirjoitus projektin viimeiseen vaiheeseen.

Tämä opetusohjelma näyttää kuinka luoda yhden sivun sovellus React (ja Redux ja Semantic UI) Rails-projektin sisällä.

Tämä opetusohjelma sisältää myös:

  • Redux
  • Reagoi reititin
  • Valitse uudelleen
  • Redux Ajattele
  • Semanttinen käyttöliittymä

Sivuhuomautus # 1. Näin äskettäin tämän upean oppaan ja se inspiroi minua kirjoittamaan sen Railsille.

Sivuhuomautus # 2. Tässä on valmis opetusohjelma. Sitoutumishistoria vastaa (eräänlaista) tämän oppaan vaiheita.

Yleiskatsaus

Katso 2 alla olevasta kaaviosta, jotta saat käsityksen siitä, mitä rakennamme ja miten asiat toimivat.

Kaavio 1: Ensimmäisen HTTP-pyynnön (eli selaimen pyynnöt Rails-sovelluksellemme) käsittely

Alla oleva kaavio kuvaa React-sovellustasi Rails-projektissasi ja polkua (yhtenäinen musta viiva), jonka ensimmäinen pyyntö kuljettaa React-sovelluksen palauttamiseksi takaisin asiakkaalle (selaimelle).

Kaavio 2: Seuraavien HTTP-pyyntöjen (eli React-sovelluksemme Rails-sovellukselle -pyyntöjen) käsittely

Kun React-sovellus on ladattu käyttäjän selaimeen, React-sovellus on vastuussa pyyntöjen lähettämisestä Rails-sovelluksellesi (yhtenäinen musta viiva). Toisin sanoen, kun React on ladattu, Rails-pyynnöt tulevat Javascript-koodista, ei selaimesta.

Muut tärkeät huomautukset ennen koodauksen aloittamista

  • Ajattele React-sovellustasi erillisenä Rails-sovelluksestasi. React-sovellus on tarkoitettu vain käyttöliittymälle ja se toimii käyttäjän selaimessa. Kiskot-osa on tarkoitettu vain käyttöjärjestelmälle ja toimii palvelimella. Rails-sovellus ei tiedä mitään React-sovelluksesta lukuun ottamatta sitä, milloin sen staattiset resurssit (Webpack-käännetyt HTML, JS ja CSS) palautetaan.
  • Kun selaimesi on ladannut React-sovelluksen, kaikki logiikat HTTP-pyyntöjen tekemiseksi (tietojen noutamiseksi ja tietojen muuttamiseksi näkymäksi) tehdään käyttöliittymässä (eli selaimessa).
  • Rails-sovelluksesi ei tarjoa mitään näkymiä paitsi se, joka palvelee React-sovellustasi. Tässä opetusohjelmassa ainoa Rails-näkymä on/app/views/static/index.html.erb
  • /api/*Rails-sovellus käsittelee kaikki polut, kun taas kaikki muut polut reagoi selaimen sisällä (kun selaimesi on ladannut ensimmäisen pyynnön). Esimerkiksi //your-app.com/somethinglähetetään Rails-sovellukseen ja palataan sitten takaisin React-sovellukseesi (selaimeen jo ladattu HTML / JS / CSS), joka päättää mitä näytetään näytöllä.
  • Huomioita yhden sivun sovelluksen rakentamisesta. Ei välttämätön tässä opetusohjelmassa, mutta hyödyllinen.
  • React Component -suunnittelukuviot. Jälleen, ei välttämätöntä, mutta hyödyllistä.

Laitteistovaatimukset

FYI tässä on järjestelmän kokoonpanoni. Et sano, että tarvitset tätä, mutta jotain vastaavaa tekee tästä opetusohjelmasta sujuvamman.

  • macOS 10.13.6 (High Sierra)
  • Rubiini 2.5.1
  • Kiskot 5.2.1 (ja Bundler 1.16.6)
  • - helmiasennuspaketti -v 1.16.6
  • Solmu 9.8.0

Lopuksi, koodiin!

Vaihe 1: Luo uusi Rails-projekti Webpack and React -sovelluksella

Luo uusi Rails-sovellus. Olen nimennyt minun rails-react-tutorial.

rails new rails-react-tutorial --webpack=react

Katso täältä lisätietoja --webpack=reactRails 5.1 : ssä esitetystä lipusta.

Vaihe 2: Varmista, että Webpacker- ja React-Rails-helmet on asennettu

Tarkista, ovatko Webpacker- ja React-Rails- helmet sinun Gemfile. Jos helmiä ei ole siellä, lisää se:

Asenna kaikki nyt suorittamalla nämä komennot.

bundle install
# This command might not be necessary.# If already installed, then it will# ask you to override some files.rails webpacker:install
rails webpacker:install:react rails generate react:installyarn install 

Suorita nyt rails server -p 3000 käynti //localhost:3000varmistaaksesi, että projektimme toimii.

Pro-vinkki # 1 : Suorita ./bin/webpack-dev-servererillisessä ikkunassa koodaamisen aikana, jotta kaikki muutokset rakentavat ja lataavat selaimen automaattisesti.

Pro-vinkki # 2 : Jos saat tämän virheen can’t activate sqlite3 (~> 1.3.6), already activated sqlite3–1.4.0 dd gem ‘sqlite3’, ‘~>, Gemfile on 1.3.6 '. Katso tämä linkki saadaksesi lisätietoja.

Vaihe 3: Lisää Controller-luokka ja Route Rails-sovellukseemme

Lisää uusi reitti Rails-sovellukseemme. Tässä esimerkissä lisätään GET /v1/thingspäätepiste kohtaan config/routes.rb`.

Tämä uusi reitti vaatii ThingsControllerin. Luo uusi app/controllers/v1/things_controller.rbtiedosto. Muista, että sen pitäisi olla v1kansiossa, koska se kuuluu Rails-sovellusliittymään.

Asiat-ohjain palauttaa kovakoodatun vastauksen GET /v1/things.

Tässä vaiheessa sinun pitäisi pystyä juoksemaan uudelleen rails server -p 3000ja käymään //localhost:3000/v1/things.

Seuraavaksi luomme uuden React-komponentin.

Vaihe 4: Luo uusi React-komponentti

Luo HelloWorld React -komponentti, joka hyväksyy merkkijonoparametrin nimeltä greetingsuorittamalla seuraava komento:

rails generate react:component HelloWorld greeting:string

Tiedosto on luotu: app/javascript/components/HelloWorld.js.

Vaihe 5: Käytä HelloWorld-komponenttia

Jotta voisimme käyttää ja nähdä uuden HelloWorld-komponenttimme, meidän on tehtävä kaksi asiaa: luomalla näkymä upottaa tämä komponentti ja lisäämällä reitti osoittamaan tähän näkymään.

Luo näkymä luomalla tiedosto app/views/static/index.html.erbja lisäämällä seuraava:

Lisää uutta reittiä varten seuraava rivi routes.rbtiedostoon ja tyhjä StaticController sen tukemiseksi.

Lisää tämä app/controllers/static_controller.rb:

Sinun pitäisi nyt pystyä suorittamaan uudelleen rails server -p 3000ja käymään //localhost:3000/katsomassa uutta React-komponenttiasi (muista juosta ./bin/webpack-dev-servererillisessä ikkunassa, jotta Javascript-muutokset pakataan automaattisesti verkkopakettiin).

Nyt kun meillä on React-komponentti, joka toimii näkymässämme, laajennetaan sovellustamme tukemaan useita näkymiä react-router.

Vaihe 6: Lisää React-Router

Suorita ensin tämä komento lisätäksesi react-router-dom, joka sisältää ja vie kaikki react-routerja joitain lisäapukomponentteja verkkoselaamiseen. Lisätietoja täältä.

npm install --save react-router-domyarn install

Tämän komennon tulisi lisätä seuraava rivi package.jsontiedostoon. Huomaa, että tässä käytettiin 4.2.2: ta, mutta versiosi voi olla erilainen.

Tehdään nyt React Router -sovelluksella joitain reittejä React Front-End -sovellukselle.

Vaihe 6: React-Routerin käyttäminen

react-routerantaa meille mahdollisuuden hallita kaikkia käyttöliittymäreittejämme tiukasti Javascriptin avulla. Tämä tarkoittaa, että tarvitsemme yhden "App" -komponentin, joka kapseloi koko sovelluksemme. "App" käyttää React-Router-ohjelmaa myös oikean "Sivu" -komponentin pyytämää URL-osoitetta varten.

Aloita suorittamalla tämä komento lisätäksesi sovelluskomponentin, joka edustaa koko käyttöliittymäsovellustamme.

rails generate react:component App

Avaa seuraavaksi äskettäin luodun React-komponentin tiedosto app/javascript/components/App.jsja lisää seuraava…

Vaihda index.html.erbnyt osoittamaan uuteen sovelluskomponenttiin.

Viimeiseksi muokkaa, että routes.rbRails lähettää kaikki pyynnöt, jotka eivät ole sovellusliittymää, sovelluskomponentillemme (kautta StaticController#index).

Voimme nyt juosta rails server -p 3000ja käydä //localhost/ja //localhost/hellonähdä, miten React-Router toimii (muista ottaa käyttöön ./bin/webpack-dev-serverautomaattinen verkkopakkaus).

Seuraavaksi meidän on asennettava joitain lisäriippuvuuksia, ennen kuin voimme yhdistää React-käyttöliittymämme Rails-sovellusliittymään.

Vaihe 7: Lisätään Redux, Sagas, Babel Polyfill ja Axios

Lisätään nyt seuraavat Javascript-kirjastot käyttöliittymään.

  • Redux hallita sovelluksemme globaalia tilaa.
  • Babel-Polyfill ottaa käyttöön hienot Javascript-ominaisuudet, jotka eivät muuten ehkä ole käytettävissä vanhemmissa selaimissa.
  • Valitse uudelleen ja React-Redux helpottamaan työskentelyä Reduxin kanssa.

Asenna kaikki suorittamalla seuraava:

npm install --save redux babel-polyfill reselect react-reduxyarn install

Nyt käytämme näitä työkaluja perustamalla Redux State Store -kaupan ja lisäämällä sitten joitain toimintoja ja reduktoreita sen käyttämiseen.

Vaihe 8: Määritä Redux State Store

Tässä vaiheessa perustamme Redux State Store -sovelluksen sovelluksellemme seuraavalla mallilla (lisäämme ja poistamme "asiat" seuraavissa vaiheissa).

{ "things": [ { "name": "...", "guid": "..." } ]}

Luo ensin configureStore.jstiedosto. Tämä alustaa Redux-myymälämme.

Nyt voit tuoda ja käyttää configureStore()sovelluskomponentissa Redux-tilan luomista ja liittää sen sovellukseemme.

Nyt Redux on asennettu sovellukseesi! Seuraavaksi luomme toiminnan ja pelkistimen ja aloitamme kirjoittamisen ja lukemisen Redux-tilastamme.

Vaihe 9: Lisää toiminto ja reduktori

Nyt kun sovelluksella on Redux-tila, lisätään a on> to HelloWorld that dispatches an Action (that we will define here) that will be received b y the rootReducer().

First, add getThings() Action definition and import createStructuredSelector() and connect() into theHelloWorld Component. This maps parts of the Redux State, and Actions (i.e. dispatching getThings()) , to HelloWorld’s prop.

Next, add a on> to HelloWorld that dispatc hes a getThings() Action (from ./actions/index.js) on every click.

After everything is added to HelloWorld, go to //localhost:3000/hello, open the Console, and click the “getThings” button to see your Action and Reducer functions being called.

Now that you can send an Action that can be received by a Reducer, let’s have the Reducer alter the Redux State.

Step 10: Have HelloWorld read React State and display “things”

Insert a List <ul> in HelloWorld and fill it with “things” from your Redux State.

To test if this is actually working, we can initialize with some “things” data. Once this is done, we can refresh the page and see it in our list.

Now that we have a simple Action and Reducer working, we will extend this so that the Action queries our Rails API and the Reducer sets the content of “things” with the API response.

Step 11: Install Redux-Thunk

We will need Redux-Thunk to allow async workflows (like an HTTP request) to dispatch Actions.

Install redux-thunk by running this command:

npm install --save redux-thunkyarn install

Now, let’s use Thunk in our Action!

Step 12: Use redux-thunk and fetch() to query API and set React State with results

First, let’s import redux-thunk in configureStore.js and install it our Redux Store so our App can handle “Thunk” Actions.

Now test that everything is working by starting the App and loading a page.

Next, let’s change the getThings() Action to return a function that performs the following (instead of returning the Action object):

  1. Dispatch the original Action object
  2. Make a call to our Rails API.
  3. Dispatch a new Action getThingsSuccess(json) when the call succeeds.

For this step, we will also need to add the getThingsSuccess(json) Action.

Of course, this does nothing to the Redux State since our Reducer is not making any changes. To fix this, change the Reducer to handle the GET_THINGS_SUCCESS Action and return the new State (with the response from the Rails API).

Now if you start your App, navigate to localhost:3000/hello and click the button, your list should change!

There you have it. A Rails API hooked up to a React+Redux App.

(Bonus) Step 13: Installing Redux Dev Tools

Maybe I should’ve put this step earlier, but Redux Dev Tools is essential for debugging the Actions your App is sending, and how those Actions are changing your State.

This is how you install it. First, install the proper extension for your browser (Chrome, Firefox).

Next, run the following to install the library.

npm install --save-dev redux-devtools-extensionyarn install

Now, use it to initialize your Redux State Store.

After all this is done, you should be able to see a new tab, Redux, in your Chrome (or Firefox) dev tools, that lets you see which Actions were dispatched, and how each one changed the App’s State. The React tab will also show you all your components and their props and states.

Happy debugging!

(Bonus) Step 14: Semantic UI

Semantic is a great library for UI components that makes it really easy to build nice looking websites quickly.

To install this library, run the following.

npm install --save semantic-ui-css semantic-ui-reactyarn install

Add this to app/javascript/packs/application.js:

import 'semantic-ui-css/semantic.min.css';

And add this to app/views/static/index.html.erb:

 'all' %

(Bonus) Step 15: Using a Reasonable Directory Structure

This step is totally optional, and it has nothing to do with the function of the App. Just my opinion on how you should organize your files.

So as you can probably guess, stuffing your Actions into the same file as your Components, and having a single reducer for your entire App, does not scale very nicely when your App grows. Here is my suggested file structure:

app|-- javascript |-- actions |-- index.js |-- things.js |-- components |-- packs |-- reducers |-- index.js |-- things.js

(Bonus — Mar 17 2019 Update) Step 16: Install Typescript!

Typescript is just like Javascript but with types! It is described as a “strict syntactical superset of Javascript”, meaning that Javascript is considered valid Typescript, and the “type features” are all optional.

IMO Typescript is fantastic for large Javscript projects, such as a big React front-end. Below are instructions on how to install it, and a small demo of it inside our project.

First, run the following commands (taken from the Webpacker Readme):

bundle exec rails webpacker:install:typescriptyarn add @types/react @types/react-dom

Now, to see it in action, let’s rename app/javascript/reducers/things.js to things.tsx and add the following lines to the top of the file:

After you add interface Thing , let’s use it by having const initialState use that type (seen in the screenshot above), and specify that thingsReducer return an array of type Thing (also seen in the screenshot).

Everything should still work, but to see Typescript in action, lets add a default case to thingsReducer and add return 1 . Since 1 is not a Thing type we will see the output of ./bin/webpack-dev-server fail with the following:

And that’s it! You can now add Typescript .tsx files to your project and start using Types with your project.

Here’s a great overview of Typescript and why you should use it.

The End

You made it! You’ve made a Rails App that uses React and Redux. That’s pretty much it for the tutorial. I hope you had fun and learned something along the way.

If you build something with React and Rails, please do share it in the comments below — along with any questions or comments you may have for me.

Thanks for reading!