by Mark Hopson

马克·霍普森(Mark Hopson)

如何使用React和Redux前端(加上Typescript！)创建Rails项目 (How to create a Rails project with a React and Redux front-end (plus Typescript!))

在Rails项目中使用React和Redux设置单页Javascript App的完整指南。 (A complete guide to setting up a single-page Javascript App with React and Redux inside a Rails project.)

Update (Mar 17, 2019): Added Typescript to the last step of this project.

更新(2019年3月17日)：在此项目的最后一步中添加了打字稿 。

This tutorial will show you how to create a single-page app with React (and Redux and Semantic UI) inside a Rails project.

本教程将向您展示如何在Rails项目中使用React(以及Redux和Semantic UI )创建单页应用程序 。

This tutorial will also include:

本教程还将包括：

• Redux

  Redux

• React Router

  React路由器

• Reselect

  重新选择

• Redux Think

  Redux Think

• Semantic UI

  语义UI

Side note #1. I saw this wonderful guide recently and it inspired me to write one for Rails.

旁注1。 我最近看到了这个很棒的指南 ，它启发了我为Rails编写指南 。

Side note #2. Here is the finished tutorial. The commit history corresponds (kind of) with the steps in this guide.

旁注2。 这是完成的教程 。 提交历史记录与本指南中的步骤相对应(类似)。

总览 (Overview)

To give you a sense of what we’re going to build and how things will work, see the 2 diagrams below.

为了让您大致了解我们将要构建的内容以及它们将如何工作，请参见下面的2个图表。

图1：处理第一个HTTP请求(即，从浏览器到我们的Rails App的请求) (Diagram 1: Handling the first HTTP request (i.e. requests from the browser to our Rails App))

The diagram below illustrates your React App inside your Rails project, and the path (solid black line) that the first request takes to return the React App back to the client (browser).

下图说明了Rails项目中的React App，以及第一个请求将React App返回给客户端(浏览器)的路径(实线)。

图2：处理后续的HTTP请求(即，从我们的React App到Rails App的请求) (Diagram 2: Handling subsequent HTTP requests (i.e. requests from our React App to our Rails App))

After the React App is loaded in the user’s browser, the React App will be responsible for sending requests to your Rails App (solid black line). In other words, once React is loaded, requests to Rails will come from Javascript code, and not the browser.

在用户浏览器中加载React App之后，React App将负责向您的Rails App发送请求(黑色实线)。 换句话说，一旦React被加载，对Rails的请求将来自Javascript代码，而不是浏览器。

开始编码之前的其他重要说明 (Other Important notes before we start coding)

• Think of your React App as being separate from your Rails App. The React App is strictly for the front-end and runs in the user’s browser. The Rails part is strictly for the back-end and runs on the server. The Rails App does not know anything about the React App except for when to return its static assets (Webpack compiled HTML, JS, and CSS).
  将您的React App与Rails App分开。 React App严格用于前端，并在用户的浏览器中运行。 Rails部分严格用于后端，并在服务器上运行。 除了何时返回静态资产(Webpack编译HTML，JS和CSS)外，Rails应用程序对React应用程序一无所知。
• Once your React App is loaded by your browser, all the logic to make HTTP requests (retrieve data, and turn that data into a view) is done in the front-end (i.e. browser).
  一旦浏览器加载了您的React App，所有发出HTTP请求(检索数据并将其转换为视图)的逻辑都在前端(即浏览器)中完成。

• Your Rails App effectively does not serve any views except for the one that serves your React App. In this tutorial, the only Rails view is /app/views/static/index.html.erb

  除了为您的React App提供服务的视图外，您的Rails应用程序实际上不会提供任何视图。 在本教程中，唯一的Rails视图是/app/views/static/index.html.erb

• All /api/* paths gets handled by the Rails App, while all other paths gets handled by React inside the browser (after your browser has loaded the first request). For example, http://your-app.com/something will be sent to the Rails App, and then returned back to your React App (the HTML/JS/CSS that has already loaded in the browser), which will decide what to show on the screen.

  所有/api/*路径均由Rails App处理，而其他所有路径均由浏览器内部的React处理(在浏览器加载第一个请求之后)。 例如， http://your-app.com/something将被发送到Rails App，然后返回到您的React App(已经在浏览器中加载HTML / JS / CSS)，这将决定显示在屏幕上。

• Considerations for building a single-page app. Not necessary for this tutorial but useful.

  构建单页应用程序的注意事项 。 本教程不是必需的，但很有用。

• React Component design patterns. Again, not necessary but useful.

  React组件设计模式 。 同样，没有必要，但有用。

系统要求 (System Requirements)

FYI here’s my system config. Not saying you need this, but something similar will make this tutorial experience smoother.

仅供参考，这是我的系统配置。 并不是说您需要这样做，但是类似的操作会使本教程的体验更流畅。

• macOS 10.13.6 (High Sierra)
  macOS 10.13.6(High Sierra)
• Ruby 2.5.1
  Ruby 2.5.1
• Rails 5.2.1 (and Bundler 1.16.6)
  Rails 5.2.1(和Bundler 1.16.6)
• - gem install bundler -v 1.16.6
  -gem install bundler -v 1.16.6
• Node 9.8.0
  节点9.8.0

Finally, on to the code!

最后，继续执行代码！

第1步：使用Webpack和React创建一个新的Rails项目 (Step 1: Create a new Rails project with Webpack and React)

Create a new Rails app. I’ve named mine rails-react-tutorial.

创建一个新的Rails应用程序。 我将其命名为mine rails-react-tutorial 。

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

See here for more info on the --webpack=react flag introduced in Rails 5.1.

有关在Rails 5.1中引入的--webpack=react标志的更多信息，请参见此处 。

步骤2：确保已安装Webpacker和React-Rails gem (Step 2: Make sure the Webpacker and React-Rails gems are installed)

Check if the Webpacker and React-Rails gems are in your Gemfile. If the gems are not there, then add it:

检查Webpacker和React-Rails宝石是否在您的Gemfile 。 如果宝石不存在，则添加它：

Now run these commands to install everything.

现在运行这些命令以安装所有内容。

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

Now run rails server -p 3000 and visit http://localhost:3000 to make sure our project is working.

现在运行rails server -p 3000并访问http://localhost:3000以确保我们的项目正在运行。

Pro Tip #1: run ./bin/webpack-dev-server in a separate window while coding to have any changes automatically build and reload the browser.

专家提示1 ：在单独的窗口中运行./bin/webpack-dev-server ，同时进行编码以自动构建并重新加载浏览器，以进行任何更改。

Pro Tip #2: If you get this error can’t activate sqlite3 (~> 1.3.6), already activated sqlite3–1.4.0 then add gem ‘sqlite3’, ‘~> 1.3.6’ to Gemfile. See this link for more info.

专家提示2 ：如果收到此错误， can't activate sqlite3 (~> 1.3.6), already activated sqlite3–1. 4.0，然后将dd gem 'sqlite3', '~> gem'sqlite3 dd gem 'sqlite3', '~> 1.3.6'转换为Gemfile。 有关更多信息，请参见此链接。

步骤3：将Controller类和Route添加到我们的Rails应用中 (Step 3: Add a Controller class, and Route, to our Rails app)

Add a new route to our Rails app. For this example, we will add GET /v1/things endpoint to config/routes.rb`.

向我们的Rails应用添加新路线。 对于此示例，我们将GET /v1/things端点添加到config/routes.rb 。

This new route will require a ThingsController. Create a new app/controllers/v1/things_controller.rb file. Remember, it should be in the v1 folder because it belongs to our Rails API.

这条新路线将需要一个ThingsController。 创建一个新的app/controllers/v1/things_controller.rb文件。 请记住，它应该位于v1文件夹中，因为它属于我们的Rails API。

Our Things controller will return a hard-coded response for GET /v1/things.

我们的Things控制器将返回GET /v1/things的硬编码响应。

At this point, you should be able to re-run rails server -p 3000 and visit http://localhost:3000/v1/things.

此时，您应该能够重新运行rails server -p 3000并访问http://localhost:3000/v1/things 。

Next, we will create a new React component.

接下来，我们将创建一个新的React组件。

步骤4：生成一个新的React组件 (Step 4: Generate a new React component)

Create a HelloWorld React component that accepts a String parameter named greeting by running the following command:

通过运行以下命令，创建一个HelloWorld React组件，该组件接受名为greeting的String参数：

rails generate react:component HelloWorld greeting:string

A file should be created: app/javascript/components/HelloWorld.js.

应该创建一个文件： app/javascript/components/HelloWorld.js 。

步骤5：使用我们的HelloWorld组件 (Step 5: Use our HelloWorld component)

To use and see our new HelloWorld component we need to 2 things: create a view embeds this component, and add a route to point to this view.

要使用和查看新的HelloWorld组件，我们需要做两件事：创建一个嵌入该组件的视图，并添加指向该视图的路径。

To create a view, create the file app/views/static/index.html.erb and add the following:

要创建视图，请创建文件app/views/static/index.html.erb并添加以下内容：

For our new route, add the following line to our routes.rb file, and an empty StaticController to support it.

对于我们的新路由， routes.rb添加到routes.rb文件中，并添加一个空的StaticController来支持它。

Add this to app/controllers/static_controller.rb:

将此添加到app/controllers/static_controller.rb ：

You should now be able to re-run rails server -p 3000 and visit http://localhost:3000/ to see your new React component (remember to run ./bin/webpack-dev-server in a separate window to have an Javascript changes automatically get packaged by webpack).

现在，您应该能够重新运行rails server -p 3000并访问http://localhost:3000/来查看新的React组件(记住要在单独的窗口中运行./bin/webpack-dev-server ，以使JavaScript更改将自动由webpack打包)。

Now that we have a React component that renders in our view, let’s expand our app to support multiple views with react-router.

现在我们有了一个可在视图中呈现的React组件，让我们扩展应用程序以使用react-router支持多个视图。

第6步：添加React-Router (Step 6: Add React-Router)

First, run this command to add react-router-dom, which includes and exports all of react-router and some additional helper components for web browsing. More info here.

首先，运行此命令以添加react-router-dom ，其中包括并导出所有react-router和一些其他辅助组件以进行网络浏览。 更多信息在这里 。

npm install --save react-router-domyarn install

This command should add the following line to your package.json file. Note, 4.2.2 was used here, but your version could be different.

此命令应将以下行添加到package.json文件。 注意，此处使用的是4.2.2，但您的版本可能有所不同。

Now let’s use React Router to make some routes for our React Front-End.

现在，让我们使用React Router为我们的React前端创建一些路由。

第6步：使用React-Router (Step 6: Using React-Router)

react-router allows us to manage all our UI routes strictly with Javascript. This means that we will need a single “App” component that encapsulates our entire application. “App” will also use React-Router to present the correct “Page” component for the URL being requested.

react-router允许我们严格使用Javascript管理所有UI路由。 这意味着我们将需要一个封装整个应用程序的“应用程序”组件。 “应用程序”还将使用React-Router为请求的URL呈现正确的“页面”组件。

To start, run this command to add an App component that will represent our entire front-end application.

首先，运行此命令以添加一个App组件，该组件将代表我们的整个前端应用程序。

rails generate react:component App

Next, open the file for the newly created React component, app/javascript/components/App.js, and add the following …

接下来，打开新创建的React组件的文件app/javascript/components/App.js ，并添加以下内容……

Now change index.html.erb to point to our new App component.

现在更改index.html.erb以指向我们的新App组件。

Lastly, edit your routes.rb to have Rails send all requests that are not for the API to our App component (via StaticController#index).

最后，编辑您的routes.rb以使Rails将所有非该API的请求发送到我们的App组件(通过StaticController#index )。

We can now run rails server -p 3000 and visit http://localhost/ and http://localhost/hello to see React-Router working (remember ./bin/webpack-dev-server enables auto-webpacking).

我们现在可以运行rails server -p 3000并访问http://localhost/和http://localhost/ hello来查看React-Router的工作情况(记住./bin/webpack-dev-server启用自动webpacking)。

Next, we’ll need to install some additional dependencies before we can connect our React front-end to our Rails API.

接下来，我们需要安装一些其他的依赖关系，然后才能将React前端连接到Rails API。

步骤7：添加Redux，Sagas，Babel Polyfill和Axios (Step 7: Adding Redux, Sagas, Babel Polyfill, and Axios)

Now let’s add the following Javascript libraries for our front-end.

现在让我们为前端添加以下Javascript库。

• Redux to manage the global state of our application.

  Redux用于管理应用程序的全局状态。

• Babel-Polyfill to enable fancy Javascript features that might not otherwise be available on older web browsers.
  Babel-Polyfill可启用花哨的Javascript功能，而这些功能在旧的Web浏览器上可能无法使用。

• Reselect and React-Redux to make working with Redux easier.

  重新选择和React-Redux ，使使用Redux更加容易。

To install everything, run the following:

要安装所有内容，请运行以下命令：

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

Now we will use these tools to set up a Redux State Store, then add some Actions and Reducers to use it.

现在，我们将使用这些工具来设置Redux状态存储，然后添加一些操作和Reducer来使用它。

步骤8：设置Redux State Store (Step 8: Set up Redux State Store)

In this step, we will set up the Redux State Store for our app with the following template (we will add and remove “things” in the next steps).

在此步骤中，我们将使用以下模板为我们的应用设置Redux State Store(在接下来的步骤中，我们将添加和删除“事物”)。

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

First, create a configureStore.js file. This will initialize our Redux Store.

首先，创建一个configureStore.js文件。 这将初始化我们的Redux Store。

Now import and use configureStore() in the App Component to create a Redux State and hook it up to our App.

现在，在应用程序组件中导入并使用configureStore()来创建Redux状态并将其连接到我们的应用程序。

Now you have Redux installed in your app! Next, we will create an Action and a Reducer, and begin to write and read from our Redux State.

现在，您已在应用程序中安装了Redux！ 接下来，我们将创建一个Action和一个Reducer，并开始从Redux State进行读写。

步骤9：添加动作和减速器 (Step 9: Add an Action and a Reducer)

Now that the App has a Redux State, we will add a <button> to HelloWorld that dispatches an Action (that we will define here) that will be received by the rootReducer().

现在，该应用程序具有Redux状态，我们将向HelloWorld添加<butt on>，以调度一个Action(我们将在此处定义)，该Action将通过y the rootRed ucer()接收。

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.

首先，添加getThings()动作定义，并将createStructuredSelector()和connect()导入到HelloWorld组件中。 这会将Redux State和Actions(即调度getThings() )的一部分getThings()到HelloWorld的prop。

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

接下来，在HelloWorld上添加一个<butt on>，它在每次单击时都会hes a getTh ()动作(来自./actions/index.js)。

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

将所有内容添加到HelloWorld之后，请转到http://localhost:3000/hello ，打开控制台，然后单击“ getThings”按钮以查看您的Action和Reducer函数正在被调用。

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

现在您可以发送一个可以被Reducer接收的动作，让我们让Reducer更改Redux State。

步骤10：让HelloWorld读取React 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.

在HelloWorld中插入列表< ul>，并用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.

现在，我们已经完成了一个简单的Action和Reducer的工作，我们将对其进行扩展，以便Action查询我们的Rails API，并且Reducer通过API响应设置“事物”的内容。

第11步：安装Redux-Thunk (Step 11: Install Redux-Thunk)

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

我们将需要Redux-Thunk来允许异步工作流(例如HTTP请求)来分派Action。

Install redux-thunk by running this command:

通过运行以下命令来安装redux-thunk ：

npm install --save redux-thunkyarn install

Now, let’s use Thunk in our Action!

现在，让我们在动作中使用Thunk！

第12步：使用redux-thunk和fetch()查询API并使用结果设置React State (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.

首先，让我们在configureStore.js导入redux-thunk并将其安装到我们的Redux Store中，以便我们的应用程序可以处理“ Thunk”操作。

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):

接下来，让我们更改getThings()操作以返回执行以下操作的函数(而不是返回Action对象)：

1. Dispatch the original Action object
   派发原始的Action对象
2. Make a call to our Rails API.
   调用我们的Rails API。

3. Dispatch a new Action getThingsSuccess(json) when the call succeeds.

   调用成功时，调度新的Action getThingsSuccess(json) 。

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

对于此步骤，我们还需要添加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).

当然，这对Redux State没有任何作用，因为我们的Reducer并未进行任何更改。 要解决此问题，请更改Reducer以处理GET_THINGS_SUCCESS操作并返回新的State(带有Rails API的响应)。

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

现在，如果您启动您的应用程序，请导航至localhost:3000/hello并单击按钮，您的列表应会更改！

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

你有它。 Rails API已连接到React + Redux应用程序。

(奖金)第13步：安装Redux开发工具 ((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.

也许我应该早点采取这一步骤，但是Redux Dev Tools对于调试您的应用正在发送的动作以及这些动作如何改变您的状态至关重要。

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

这就是您的安装方式。 首先，为您的浏览器安装适当的扩展程序( 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.

现在，使用它来初始化您的Redux状态存储。

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.

完成所有这些操作后，您应该能够在Chrome(或Firefox)开发工具中看到一个新的标签Redux，该标签可让您查看分配了哪些操作，以及每个操作如何更改应用程序的状态。 React选项卡还将显示所有组件及其道具和状态。

Happy debugging!

调试愉快！

(奖金)第14步：语义UI ((Bonus) Step 14: Semantic UI)

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

语义是用于UI组件的出色库，它使真正快速构建美观的网站变得非常容易。

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:

将此添加到app/javascript/packs/application.js ：

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

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

并将其添加到app/views/static/index.html.erb ：

<%= stylesheet_pack_tag "application", :media => 'all' %

(奖励)步骤15：使用合理的目录结构 ((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:

因此，您可能会猜到，将Action填充到与Components相同的文件中，并且为整个App配备一个reducer时，随着App的增长，伸缩性不会很好。 这是我建议的文件结构：

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

(奖金-2019年3月17日更新)第16步：安装打字稿！ ((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.

Typescript就像Javascript一样，但是带有类型！ 它被描述为“ 严格的Java语法语法超集 ”，这意味着Javascript被视为有效的Typescript，并且“ type features”都是可选的。

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.

IMO Typescript对于大型Javscript项目(例如大型React前端)而言非常理想。 以下是有关如何安装它的说明，以及在我们的项目中的小演示。

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

首先，运行以下命令(摘自Webpacker自述文件 )：

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:

现在，要查看它的实际效果，让我们将app/javascript/reducers/things.js重命名为things.tsx并将以下行添加到文件顶部：

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).

添加interface Thing ，让我们使用const initialState使用该类型(在上面的屏幕快照中看到)，并指定它让thingsReducer返回Thing类型的数组(在屏幕快照中也可以看到)来使用它。

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:

一切仍然应该正常工作，但是要查看Typescript的实际效果，我们可以向thingsReducer添加default大小写并添加return 1 。 由于1不是Thing类型，我们将看到./bin/webpack-dev-server的输出失败，并显示以下内容：

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

就是这样！ 现在，您可以将Typescript .tsx文件添加到项目中，并开始在项目中使用Types。

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

这是Typescript的概述，以及为什么要使用它 。

结束 (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.

你做到了！ 您已经制作了一个使用React和Redux的Rails应用程序。 对于本教程来说就差不多了。 希望您玩得开心，并从中学到一些东西。

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.

如果您使用React和Rails进行构建，请在下面的评论中分享它-以及您可能对我有的任何问题或评论。

Thanks for reading!

谢谢阅读！

翻译自: https://www.freecodecamp.org/news/how-to-create-a-rails-project-with-a-react-and-redux-front-end-8b01e17a1db/