Како створити пројекат Раилс са Реацт-ом и Редук-ом

Комплетан водич за постављање апликације на једној страници Јавасцрипт са Реацт-ом и Редук-ом унутар пројекта Раилс.

Ажурирање (17. марта 2019): Додан је Типесцрипт последњем кораку овог пројекта.

Овај водич ће вам показати како да креирате апликацију на једној страници са Реацт-ом (и Редук-ом и Семантичким корисничким интерфејсом) у оквиру пројекта Раилс.

Овај водич ће такође садржати:

  • Редук
  • Реацт Роутер
  • Поново изаберите
  • Редук Тхинк
  • Семантички кориснички интерфејс

Напомена бр. 1. Недавно сам видео овај диван водич и надахнуо ме је да напишем један за Раилс.

Напомена бр. 2. Ево завршеног водича. Историја урезивања (врста) одговара корацима у овом водичу.

Преглед

Да бисте добили осећај шта ћемо градити и како ће ствари функционисати, погледајте 2 дијаграма испод.

Дијаграм 1: Руковање првим ХТТП захтевом (тј. Захтеви прегледача до наше апликације Раилс)

Дијаграм у наставку илуструје вашу Реацт апликацију унутар вашег пројекта Раилс и путању (пуна црна линија) којом иде први захтев за враћање Реацт апликације натраг клијенту (прегледачу).

Дијаграм 2: Руковање накнадним ХТТП захтевима (тј. Захтеви из наше апликације Реацт у нашу апликацију Раилс)

Након што се апликација Реацт учита у корисников прегледач, апликација Реацт биће одговорна за слање захтева у вашу апликацију Раилс (пуна црна линија). Другим речима, када се Реацт учита, захтеви за Раилс долазе из Јавасцрипт кода, а не из прегледача.

Остале важне напомене пре него што започнемо са кодирањем

  • Схватите да је ваша апликација Реацт одвојена од ваше апликације Раилс. Апликација Реацт је стриктно намењена фронт-енду и ради у корисничком прегледачу. Раилс део је стриктно за позадину и ради на серверу. Апликација Раилс не зна ништа о апликацији Реацт, осим када треба вратити њену статичку имовину (Вебпацк компајлирао ХТМЛ, ЈС и ЦСС).
  • Једном када ваш претраживач учита вашу Реацт апликацију, сва логика за израду ХТТП захтева (преузимање података и претварање тих података у приказ) врши се на предњем делу (тј. Прегледачу).
  • Ваша апликација Раилс ефикасно не приказује ниједан приказ, осим оног који служи вашој апликацији Реацт. У овом водичу једини Раилс приказ је/app/views/static/index.html.erb
  • Свим /api/*путањама управља апликација Раилс, док свим осталим путањама управља Реацт унутар прегледача (након што ваш претраживач учита први захтев). На пример, //your-app.com/somethingбиће послати у апликацију Раилс, а затим враћени у вашу Реацт апликацију (ХТМЛ / ЈС / ЦСС који се већ учитао у прегледачу), која ће одлучити шта ће се приказати на екрану.
  • Разматрања за изградњу апликације на једној страници. Није неопходно за овај водич, али је корисно.
  • Обрасци дизајна реактивне компоненте. Опет, није неопходно, али корисно.

Системски захтеви

ФИИ, ево моје конфигурације система. Не рекавши да вам ово треба, али нешто слично ће учинити овај туториал угоднијим.

  • мацОС 10.13.6 (Хигх Сиерра)
  • Руби 2.5.1
  • Шине 5.2.1 (и Бундлер 1.16.6)
  • - гем инсталл бундлер -в 1.16.6
  • Чвор 9.8.0

Коначно, на код!

Корак 1: Креирајте нови пројекат Раилс помоћу Вебпацк-а и Реацт-а

Направите нову апликацију Раилс. Назвао сам своје rails-react-tutorial.

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

Погледајте овде за више информација о --webpack=reactзастави уведеној у Раилс 5.1.

Корак 2: Уверите се да су инсталирани драгуљи Вебпацкер и Реацт-Раилс

Проверите да ли су драгуљи Вебпацкер и Реацт-Раилс у вашем Gemfile. Ако драгуља нема, додајте га:

Сада покрените ове команде да бисте све инсталирали.

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 

Сада покрените rails server -p 3000 и посетите //localhost:3000како бисте били сигурни да наш пројекат делује.

Про савет бр. 1 : покрените ./bin/webpack-dev-serverу одвојеном прозору док кодирате како би се промене аутоматски изградиле и поново учитале прегледач.

Савет професионалаца бр. 2 : Ако добијете ову грешку can’t activate sqlite3 (~> 1.3.6), already activated sqlite3–1.4.0, онда dd gem ‘sqlite3’, ‘~>1.3.6 'у Гемфиле. Погледајте овај линк за више информација.

Корак 3: Додајте класу Цонтроллер и Роуте у нашу апликацију Раилс

Додајте нову руту у нашу апликацију Раилс. За овај пример ћемо додати GET /v1/thingsкрајњу тачку у config/routes.rb`.

За ову нову руту потребан је ТхингсЦонтроллер. Направите нову app/controllers/v1/things_controller.rbдатотеку. Запамтите, требало би да буде у v1фасцикли јер припада нашем Раилс АПИ-ју.

Наш Тхингс регулатор ће вам дати кодирани одговор за GET /v1/things.

У овом тренутку требало би да будете у могућности да се поново покренете rails server -p 3000и посетите //localhost:3000/v1/things.

Даље, креираћемо нову компоненту Реацт.

Корак 4: Генеришите нову компоненту Реацт

Направите компоненту ХеллоВорлд Реацт која прихвата параметар Стринг именован greetingпокретањем следеће наредбе:

rails generate react:component HelloWorld greeting:string

Фајл треба направити: app/javascript/components/HelloWorld.js.

Корак 5: Користите нашу компоненту ХеллоВорлд

Да бисмо користили и видели нашу нову компоненту ХеллоВорлд, потребно је две ствари: креирање приказа уграђује ову компоненту и додавање руте која води на овај приказ.

Да бисте креирали приказ, креирајте датотеку app/views/static/index.html.erbи додајте следеће:

За нашу нову руту додајте следећи ред у нашу routes.rbдатотеку и празан СтатицЦонтроллер који ће је подржати.

Додајте ово на app/controllers/static_controller.rb:

Сада бисте могли поново да покренете rails server -p 3000и посетите //localhost:3000/да бисте видели своју нову компоненту Реацт (не заборавите да се покренете ./bin/webpack-dev-serverу одвојеном прозору да би веб-пакет аутоматски спаковао промене Јавасцрипта).

Сад кад имамо компоненту Реацт која се приказује у нашем погледу, проширимо нашу апликацију да бисмо подржали више приказа react-router.

Корак 6: Додајте Реацт-Роутер

Прво покрените ову наредбу за додавање react-router-domкоја укључује и извози све react-routerи неке додатне помоћне компоненте за прегледање Веба. Више информација овде.

npm install --save react-router-domyarn install

Ова наредба треба да дода следећи ред у вашу package.jsonдатотеку. Напомена, овде је коришћен 4.2.2, али ваша верзија може бити другачија.

Сада ћемо користити Реацт Роутер да направимо неке руте за наш Реацт Фронт-Енд.

Корак 6: Коришћење Реацт-Роутера

react-routerомогућава нам да свим нашим рутама корисничког интерфејса управљамо стриктно помоћу Јавасцрипта. То значи да ће нам требати једна компонента „Апп“ која обухваћа целокупну нашу апликацију. „Апп“ ће такође користити Реацт-Роутер да би приказао исправну компоненту „Паге“ за тражени УРЛ.

За почетак покрените ову команду да бисте додали компоненту апликације која ће представљати целу нашу фронт-енд апликацију.

rails generate react:component App

Затим отворите датотеку за новостворену компоненту Реацт app/javascript/components/App.jsи додајте следеће ...

Сада index.html.erbпређите на нашу нову компоненту апликације.

И на крају, уредите свој routes.rbналог тако да Раилс шаље све захтеве који нису за АПИ нашој компоненти апликације (путем StaticController#index).

Сада можемо да трчимо rails server -p 3000и посећујемо //localhost/и //localhost/helloда видимо како Реацт-Роутер ради (не заборавите да ./bin/webpack-dev-serverомогућава аутоматско вебпаковање).

Даље, мораћемо да инсталирамо неке додатне зависности пре него што повежемо наш Реацт фронт-енд са нашим Раилс АПИ-јем.

Корак 7: Додавање Редук-а, Сагас-а, Бабел Полифилл-а и Акиоса

Сад ћемо додати следеће Јавасцрипт библиотеке за наш фронт-енд.

  • Редук за управљање глобалним стањем наше апликације.
  • Бабел-Полифилл да омогући фантастичне функције Јавасцрипта које иначе можда неће бити доступне у старијим веб прегледачима.
  • Поново одаберите и реагујте-Редук да бисте олакшали рад са Редук-ом.

Да бисте инсталирали све, покрените следеће:

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

Сада ћемо користити ове алате за постављање Редук Стате Сторе-а, а затим ћемо додати неке акције и редукторе да га користимо.

Корак 8: Подесите Редук Стате Сторе

У овом кораку ћемо поставити Редук Стате Сторе за нашу апликацију са следећим шаблоном (додаћемо и уклонити „ствари“ у следећим корацима).

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

Прво креирајте configureStore.jsдатотеку. Ово ће покренути нашу Редук продавницу.

Сада увезите и користите configureStore()у компоненти апликације да бисте креирали Редук државу и повезали је са нашом апликацијом.

Сада сте инсталирали Редук у својој апликацији! Следеће ћемо створити Ацтион и Редуцер и почети да пишемо и читамо из наше Редук државе.

Корак 9: Додајте радњу и редуктор

Сада када апликација има Редук Стате, додаћемо и 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!