Hogyan hozzunk létre egy Rails projektet egy React és Redux kezelőfelülettel

Programozás

Teljes útmutató egyoldalas Javascript alkalmazás beállításához a React és a Redux segítségével egy Rails projekten belül.

Frissítés (2019. március 17.): Gépirat hozzáadva a projekt utolsó lépéséhez.

Ez az oktatóanyag megmutatja, hogyan lehet egy Rails projekten belül egyoldalas alkalmazást létrehozni a React (és a Redux és a Semantic UI) használatával.

Ez az oktatóanyag a következőket is tartalmazza:

  • Redux
  • React Router
  • Válassza újra
  • Redux Gondolj
  • Szemantikus felhasználói felület

1. melljegyzet. Nemrég láttam ezt a csodálatos útmutatót, és ez inspirált, hogy írjak egyet a Rails-nek.

2. mellékjegyzet. Itt van a kész oktatóanyag. Az elkötelezettség előzményei (fajtája) megegyeznek az ebben az útmutatóban szereplő lépésekkel.

Áttekintés

Ahhoz, hogy megértse, mit fogunk építeni és hogyan működnek a dolgok, lásd az alábbi 2 ábrát.

1. ábra: Az első HTTP kérés kezelése (azaz a böngészőből érkező kérések a Rails alkalmazáshoz)

Az alábbi ábra szemlélteti a Rails projekt belsejében található React alkalmazást és az utat (folytonos fekete vonal), amelyen az első kérés megtörténik, hogy visszaküldje a React alkalmazást az ügyfélnek (böngészőnek).

2. ábra: A későbbi HTTP kérések kezelése (azaz a React alkalmazásból a Rails alkalmazásba érkező kérések)

Miután betöltötte a React alkalmazást a felhasználó böngészőjébe, a React alkalmazás felel a kérések elküldéséért a Rails alkalmazásba (folytonos fekete vonal). Más szavakkal, amint a React betöltődik, a Rails-re vonatkozó kérések a Javascript-kódtól származnak, és nem a böngészőtől.

Egyéb fontos megjegyzések a kódolás megkezdése előtt

  • Úgy gondolja, hogy a React App különálló a Rails alkalmazástól. A React alkalmazás szigorúan a kezelőfelület számára készült, és a felhasználó böngészőjében fut. A Rails rész szigorúan a háttérprogramra vonatkozik, és a szerveren fut. A Rails alkalmazás nem tud semmit a React alkalmazásról, kivéve, hogy mikor kell visszaküldeni a statikus eszközeit (Webpack összeállított HTML, JS és CSS).
  • Miután a böngésző betöltötte a React alkalmazást, a HTTP-kérelmek elküldéséhez szükséges összes logika (adatok lekérése és az adatok nézetté alakítása) a kezelőfelületen (azaz a böngészőben) történik.
  • A Rails alkalmazás gyakorlatilag semmilyen nézetet nem szolgál ki, kivéve azt, amelyik a React alkalmazást szolgálja. Ebben az oktatóanyagban az egyetlen Rails nézet az/app/views/static/index.html.erb
  • Az összes /api/*utat a Rails alkalmazás kezeli, míg az összes többi utat a React kezeli a böngészőben (miután a böngésző betöltötte az első kérést). Például //your-app.com/somethingelküldjük a Rails alkalmazásnak, majd visszatérünk a React alkalmazáshoz (a HTML / JS / CSS-hez, amely már betöltődött a böngészőbe), amely eldönti, hogy mit jelenítsen meg a képernyőn.
  • Az egyoldalas alkalmazás kiépítésének szempontjai. Nem szükséges ehhez az oktatóanyaghoz, de hasznos.
  • React Component tervezési minták. Ismét nem szükséges, de hasznos.

rendszerkövetelmények

FYI itt van a rendszer konfigurációm. Ha nem állítja, hogy szüksége van erre, de valami hasonlóval simábbá válik ez az oktatóanyag.

  • macOS 10.13.6 (High Sierra)
  • Rubin 2.5.1
  • Rails 5.2.1 (és Bundler 1.16.6)
  • - gem install bundler -v 1.16.6
  • Csomópont 9.8.0

Végül a kódra!

1. lépés: Hozzon létre egy új Rails projektet a Webpack és a React alkalmazással

Hozzon létre egy új Rails alkalmazást. Elneveztem az enyémet rails-react-tutorial.

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

Itt talál további információt a --webpack=reactRails 5.1-ben bevezetett zászlóról.

2. lépés: Győződjön meg arról, hogy a Webpacker és a React-Rails drágakövek telepítve vannak

Ellenőrizze, hogy a Webpacker és a React-Rails drágakövek vannak-e az Ön számítógépén Gemfile. Ha a drágakövek nincsenek ott, adja hozzá:

Most futtassa ezeket a parancsokat, hogy mindent telepítsen.

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

Most fusson rails server -p 3000 és látogasson el //localhost:3000, hogy megbizonyosodjon a projektünk működéséről.

1. számú tipp : futtasson ./bin/webpack-dev-serverkülön ablakban kódolás közben, hogy a változtatások automatikusan felépítsék és újratöltsék a böngészőt.

2. tipp : Ha ezt a hibát kapja, can’t activate sqlite3 (~> 1.3.6), already activated sqlite3–1.akkor a dd gem ‘sqlite3’, ‘~>Gemfile 1.3.6 '. További információért lásd ezt a linket.

3. lépés: Adjon hozzá egy Vezérlő osztályt és Útvonalat a Rails alkalmazásunkhoz

Adjon hozzá új útvonalat a Rails alkalmazáshoz. Ebben a példában hozzáadjuk a GET /v1/thingsvégpontot a config/routes.rb`.

Ehhez az új útvonalhoz egy ThingsControllerre lesz szükség. Hozzon létre egy új app/controllers/v1/things_controller.rbfájlt. Ne feledje, hogy a v1mappában kell lennie, mert a Rails API-hoz tartozik.

A dolgok vezérlőnk keményen kódolt választ ad vissza GET /v1/things.

Ezen a ponton képesnek kell lennie arra, hogy újra futhasson rails server -p 3000és felkereshesse //localhost:3000/v1/things.

Ezután létrehozunk egy új React komponenst.

4. lépés: Hozzon létre egy új React komponenst

Hozzon létre egy HelloWorld React összetevőt, greetingamely a következő parancs futtatásával elfogadja a String paramétert :

rails generate react:component HelloWorld greeting:string

A fájlt kell létrehozni: app/javascript/components/HelloWorld.js.

5. lépés: Használja a HelloWorld komponensünket

Az új HelloWorld komponens használatához és megtekintéséhez két dologra van szükségünk: egy nézet létrehozása beágyazza ezt az összetevőt, és hozzáad egy útvonalat, amelyre mutatót mutat.

Nézet létrehozásához hozza létre a fájlt, app/views/static/index.html.erbés adja hozzá a következőket:

Új útvonalunkhoz adjuk hozzá a következő sort a routes.rbfájlunkhoz, és egy üres StaticController-t annak támogatásához.

Add hozzá ezt app/controllers/static_controller.rb:

Mostantól képesnek kell lennie arra, hogy újra futtassa rails server -p 3000és meglátogassa //localhost:3000/az új React összetevőt (ne felejtse el futtatni ./bin/webpack-dev-serveregy külön ablakban, hogy a Javascript-módosításokat automatikusan csomagolja a webpack).

Most, hogy van egy React komponensünk, amely megjelenik a nézetünkben, bővítsük alkalmazásunkat, hogy több nézetet támogasson react-router.

6. lépés: Adja hozzá a React-Routert

Először futtassa ezt a parancsot a hozzáadáshoz react-router-dom, amely tartalmazza és exportálja react-routera webböngészéshez szükséges összes és néhány további segítő komponenst. További információ itt.

npm install --save react-router-domyarn install

Ennek a parancsnak hozzá kell adnia a következő sort a package.jsonfájljához. Ne feledje, hogy a 4.2.2-et használták itt, de a verziója eltérő lehet.

Most a React Router segítségével készítsünk néhány útvonalat a React Front-End-hez.

6. lépés: A React-Router használata

react-routerlehetővé teszi számunkra, hogy minden felhasználói felület útvonalunkat szigorúan a Javascript segítségével kezeljük. Ez azt jelenti, hogy egyetlen „App” komponensre lesz szükségünk, amely a teljes alkalmazásunkat befogja. Az „App” a React-Routert is használja a kért URL megfelelő „Oldal” összetevőjének bemutatásához.

Első lépésként futtassa ezt a parancsot egy olyan alkalmazáskomponens hozzáadásához, amely a teljes kezelőfelületet fogja képviselni.

rails generate react:component App

Ezután nyissa meg az újonnan létrehozott React összetevő fájlját app/javascript/components/App.js, és adja hozzá a következőt ...

Most váltson index.html.erbaz új App komponensre.

Végül szerkessze routes.rb, hogy a Rails minden olyan kérést elküldjön, amely nem az API-hoz tartozik, az App komponensünkhöz (via StaticController#index).

Most már fut rails server -p 3000és a látogatás //localhost/, és //localhost/hellohogy reagál-Router dolgozik (emlékezzünk ./bin/webpack-dev-serverlehetővé teszi az automatikus webpacking).

Ezután telepítenünk kell néhány további függőséget, mielőtt a React kezelőfelületünket összekapcsolhatnánk a Rails API-val.

7. lépés: Redux, Sagas, Babel Polyfill és Axios hozzáadása

Most adjuk hozzá a következő Javascript könyvtárakat a kezelőfelületünkhöz.

  • Redux az alkalmazás globális állapotának kezeléséhez.
  • Babel-Polyfill olyan divatos Javascript-funkciók engedélyezéséhez, amelyek egyébként nem érhetők el a régebbi böngészőkben.
  • Válassza újra és reagáljon a Redux-ra, hogy megkönnyítse a Reduxszal való munkát.

Minden telepítéséhez futtassa a következőket:

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

Most ezeket az eszközöket használjuk egy Redux State Store felállításához, majd hozzáadunk néhány Műveletet és Reduktort a használatához.

8. lépés: Állítsa be a Redux State Store-ot

Ebben a lépésben a következő sablonnal beállítjuk alkalmazásunk számára a Redux State Store-t (a következő lépésekben hozzáadjuk és eltávolítjuk a „dolgokat”).

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

Először hozzon létre egy configureStore.jsfájlt. Ez inicializálja a Redux Store-t.

Most importáljon és használjon configureStore()az App Componentben egy Redux állapot létrehozásához, és csatlakoztassa azt az alkalmazásunkhoz.

Most telepítette a Redux alkalmazását! Ezután létrehozunk egy műveletet és egy reduktort, és elkezdünk írni és olvasni Redux állapotunkból.

9. lépés: Adjon hozzá egy műveletet és egy reduktort

Most, hogy az alkalmazásnak van egy Redux állapota, hozzáadunk egy 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!