Kuidas luua Rails'i projekt koos Reacti ja Reduxi esiosaga

Täielik juhend ühe lehe JavaScripti rakenduse seadistamiseks koos Reacti ja Reduxiga projekti Rails sees.

Värskendus (17. märts 2019): lisati selle projekti viimasele etapile masinakiri.

See õpetus näitab teile, kuidas luua Railsi projekti sees ühe lehega rakendus React (ja Redux ja Semantic UI).

See õpetus sisaldab ka järgmist:

  • Redux
  • Reageeri ruuter
  • Valige uuesti
  • Redux mõtle
  • Semantiline kasutajaliides

Kõrvalmärkus nr 1. Nägin seda imelist juhendit hiljuti ja see inspireeris mind seda Railsile kirjutama.

Ääremärkus nr 2. Siin on valmis õpetus. Kohustusajalugu vastab (teatud tüüpi) selles juhendis toodud sammudele.

Ülevaade

Selleks, et anda teile aimu, mida me ehitame ja kuidas asjad töötavad, vaadake kahte alltoodud skeemi.

Skeem 1: Esimese HTTP-päringu (st. Brauserilt meie rakenduse Rails) käitlemine

Allolev skeem illustreerib teie Reakti rakendust Rails-projekti sees ja teed (ühtlane must joon), mida esimene taotlus võtab, et rakendus Reaktsioon kliendile (brauserile) tagasi saata.

Diagramm 2: järgnevate HTTP-päringute (st meie React Appilt meie Rails Appile esitatud taotluste) töötlemine

Kui rakendus React on kasutaja brauserisse laaditud, vastutab rakendus React teie taotluste saatmise eest teie Rails-i rakendusse (must must joon). Teisisõnu, kui React on laaditud, tulevad Railsile päringud Javascripti koodist, mitte brauserist.

Muud olulised märkused enne kodeerimise alustamist

  • Mõelge, et teie Reageerimisrakendus on teie Rails-rakendusest eraldi. Reageerimisrakendus on mõeldud ainult kasutajaliidesele ja töötab kasutaja brauseris. Rööbaste osa on mõeldud rangelt taustaprogrammile ja töötab serveris. Rakendus Rails ei tea rakenduse React kohta midagi muud kui selle staatiliste varade (Webpacki koostatud HTML, JS ja CSS) tagastamise aeg.
  • Kui teie brauser on teie rakenduse React rakenduse laadinud, tehakse kogu loogika HTTP-päringute tegemiseks (andmete hankimiseks ja andmete muutmiseks vaateks) kasutajaliideses (st brauseris).
  • Teie Rails'i rakendus ei esita tegelikult ühtegi vaadet, välja arvatud see, mis teenindab teie rakendust React. Selles õpetuses on ainus Rails vaade/app/views/static/index.html.erb
  • Kõiki /api/*teid haldab rakendus Rails, samal ajal kui kõiki teisi teid kasutab React brauseris (pärast seda, kui teie brauser on esimese päringu laadinud). Näiteks //your-app.com/somethingsaadetakse see rakendusele Rails ja tagastatakse seejärel tagasi teie rakendusse React (HTML / JS / CSS, mis on juba brauserisse laaditud), mis otsustab, mida ekraanil kuvada.
  • Kaalutlused ühe lehe rakenduse loomiseks. Pole selle õpetuse jaoks vajalik, kuid kasulik.
  • React Component kujundusmustrid. Jällegi mitte vajalik, kuid kasulik.

Nõuded süsteemile

Siin on minu süsteemi konfiguratsioon. Ei öeldes, et teil seda vaja on, kuid midagi sarnast muudab selle juhendamise kogemuse sujuvamaks.

  • macOS 10.13.6 (kõrge Sierra)
  • Rubiin 2.5.1
  • Rööpad 5.2.1 (ja Bundler 1.16.6)
  • - gem install bundler -v 1.16.6
  • Sõlm 9.8.0

Lõpuks koodist edasi!

1. samm: looge uus Rails-projekt koos rakendusega Webpack ja React

Looge uus Rails-rakendus. Ma olen oma nime pannud rails-react-tutorial.

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

Siit leiate lisateavet --webpack=reactRails 5.1-s kasutusele võetud lipu kohta.

2. samm: Veenduge, et Webpackeri ja React-Rails kalliskivid on installitud

Kontrollige, kas Webpackeri ja React- Railsi kalliskivid on teie kaustasGemfile . Kui kalliskive pole, siis lisage see:

Nüüd käivitage need käsud, et kõik installida.

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 

Jookske rails server -p 3000 ja külastage, //localhost:3000et veenduda, kas meie projekt töötab.

Pro näpunäide nr 1 : käivitage ./bin/webpack-dev-serverkodeerimise ajal eraldi aknas, et muudatused brauseri automaatselt üles ehitaksid ja uuesti laadiksid.

Pro näpunäide nr 2 : Kui saate selle vea can’t activate sqlite3 (~> 1.3.6), already activated sqlite3–1.4.0, siis dd gem ‘sqlite3’, ‘~>Gemfile'ile 1.3.6 '. Lisateabe saamiseks vaadake seda linki.

3. samm: lisage meie rööpme rakendusse kontrolleri klass ja marsruut

Lisage meie Railsi rakendusse uus marsruut. Selles näites lisame GET /v1/thingspunktile config/routes.rb`.

Selle uue marsruudi jaoks on vaja ThingsControllerit. Looge uus app/controllers/v1/things_controller.rbfail. Pidage meeles, et see peaks olema v1kaustas, kuna see kuulub meie Rails API-le.

Meie asjade kontroller tagastab kõvakodeeritud vastuse GET /v1/things.

Sel hetkel peaksite saama uuesti joosta rails server -p 3000ja külastada //localhost:3000/v1/things.

Järgmisena loome uue komponendi React.

4. samm: genereerige uus React-komponent

Looge komponent HelloWorld React, mis aktsepteerib Stringi parameetrit greeting, käivitades järgmise käsu:

rails generate react:component HelloWorld greeting:string

Fail tuleks luua: app/javascript/components/HelloWorld.js.

5. samm: kasutage meie HelloWorldi komponenti

Uue HelloWorldi komponendi kasutamiseks ja nägemiseks peame tegema kaks asja: looma vaate loomine kinnistab selle komponendi ja lisama sellele vaatele suunamise marsruudi.

Vaate loomiseks looge fail app/views/static/index.html.erbja lisage järgmine:

Uue marsruudi jaoks lisage routes.rbfaili järgmine rida ja selle toetamiseks tühi StaticController.

Lisage see kausta app/controllers/static_controller.rb:

Nüüd peaksite saama oma uue Reacti komponendi uuesti käivitada rails server -p 3000ja seda külastada //localhost:3000/(pidage meeles, et peate käivitama ./bin/webpack-dev-servereraldi aknas, et Javascripti muudatused pakendataks automaatselt veebipaketti).

Nüüd, kui meil on meie vaates renderdav komponent React, laiendame oma rakendust, et toetada mitut vaadet react-router.

6. samm: lisage React-ruuter

Kõigepealt käivitage lisamiseks see käsk react-router-dom, mis sisaldab ja eksportib kõiki react-routerja mõningaid täiendavaid abikomponente veebi sirvimiseks. Lisateave siin.

npm install --save react-router-domyarn install

See käsk peaks teie package.jsonfailile lisama järgmise rea . Pange tähele, et siin kasutati 4.2.2, kuid teie versioon võib olla erinev.

Nüüd kasutame React Routerit, et teha mõned marsruudid meie React Front-Endile.

6. samm: React-ruuteri kasutamine

react-routervõimaldab meil kõiki oma kasutajaliidese marsruute hallata rangelt Javascripti abil. See tähendab, et vajame ühte rakenduse komponenti, mis ümbritseb kogu meie rakenduse. Rakendus kasutab ka React-Routerit, et esitada taotletava URL-i jaoks õige komponent „Lehekülg“.

Alustamiseks käivitage see käsk, et lisada rakenduse komponent, mis esindab kogu meie esiotsa rakendust.

rails generate react:component App

Järgmisena avage vastloodud komponendi React fail app/javascript/components/App.jsja lisage järgmine ...

Nüüd muutke index.html.erboma uuele rakenduse komponendile osutamiseks.

Lõpuks muutke, routes.rbet Rails saadaks kõik taotlused, mis pole API-le, meie rakenduse komponendile (via StaticController#index).

Nüüd saame joosta rails server -p 3000ja külastada //localhost/ning //localhost/hellonäha, kuidas React-Router töötab (pidage meeles, et ./bin/webpack-dev-serverautomaatne veebipakkimine lubab).

Järgmisena peame installima mõned täiendavad sõltuvused, enne kui saame oma Reacti esiosa ühendada meie Rails API-ga.

7. samm: lisage Redux, Sagas, Babel Polyfill ja Axios

Lisame nüüd oma esiotsa järgmised Javascripti teegid.

  • Redux meie rakenduse globaalse oleku haldamiseks.
  • Babel-Polyfill lubab väljamõeldud Javascripti funktsioone, mis muidu ei pruugi vanemates veebibrauserites saadaval olla.
  • Reduxiga töötamise hõlbustamiseks valige uuesti ja reageerige Redux.

Kõigi installimiseks käivitage järgmine:

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

Nüüd kasutame neid tööriistu Reduxi osariigi poe seadistamiseks, seejärel lisame selle kasutamiseks mõned toimingud ja reduktorid.

8. samm: seadistage Redux State Store

Selles etapis seadistame oma rakenduse jaoks järgmise malliga Redux State Store (lisame ja eemaldame järgmistes toimingutes "asjad").

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

Kõigepealt looge configureStore.jsfail. See vormistab meie Redux Store'i.

Nüüd importige ja kasutage configureStore()rakenduse komponendis Reduxi oleku loomiseks ja ühendage see meie rakendusega.

Nüüd on teie rakendusse installitud Redux! Järgmisena loome tegevuse ja reduktori ning hakkame kirjutama ja lugema meie Reduxi olekust.

9. samm: lisage toiming ja reduktor

Nüüd, kui rakendusel on Reduxi olek, lisame 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!