Rails APIを使用してReactアプリケーションを構築するための詳細な手順

バックエンド: Rails API部分

Rails API を作成する前の前提条件として、SQLite よりも簡単にデプロイできるため、Postgres を使用してデータベースを構成することをお勧めします。次に、次のように入力して、ディレクトリ内で新しいプロジェクトを見つけて作成します。

rails new <アプリ名> --api --database=postgresql 
cd ` `<アプリ名>

--database フラグはデータベースエンジンを選択するためのもので、ここでは Postgresql を使用します。また、--api は Rails ベースの API を作成して必要なものを使用し、使用しない余分な構成をスキップするためのものです。

エディターを使用してプロジェクトを開きます。次に、Gemfile を開いて rack-cors を追加します。

gem 'rack-cors'、:require => 'rack/cors'

次に、「bundle install」を実行します。

新しい Rails アプリケーションを実行する前に、まずデータベースに接続する必要があります。次のステップでは、新しく作成した Rails アプリケーションを PostgreSQL データベースに接続して、必要に応じてレシピデータを保存および取得できるようにします。このステップでは入力が必要です: `rails db:create`

出力は次のようになります。

データベース「app_name_development」を作成しました
データベース「app_name_test」を作成しました

ターミナルを開き、次のコマンドを実行してコントローラーとモデルを作成します。

レールはモデルを生成する 映画名の評価:整数 
レール コントローラーの生成 ムービー インデックス 作成 更新 破棄 
レールdb:移行

次に、API が適切に動作するように、コントローラーに空のメソッドを実装します。

モデルを管理するコントローラーができたので、いくつかのムービーを seed.rb ファイルにコピーしてブラウザーに表示し、データを JSON 形式に変換できるかどうかをテストします。次のムービーをコピーします:

Movie.create(名前: "タイタニック", 評価: 5) 
Movie.create(名前:「We were soldiers」、評価: 4) 
Movie.create(name: "私たちが愛しているのは誰か", 評価: 5) 
Movie.create(名前:「Nobody's Fool」、評価: 2)

その後、次の4つの要素をプロジェクトに貼り付けて実行します: rails db:seed

これでコードを書き始めることができます。まずはroutes.rbから始めましょう。そのファイルを開くと、コントローラー用に自動的に生成されたルートが見つかります。 API 用に独自のルートを定義するため、それらを削除して新しいルート/API を定義します。

Rails.application.routes.drawを実行する 
リソース:映画 
終わり

アプリケーションを表示するには、ブラウザウィンドウを開き、http://localhost:3000 に移動します。 Rails のデフォルトのウェルカムページが表示されます。しかし、ルートを追加すると、http://localhost:3000/movies はデータベースにあるすべての映画を取得することになります。ブラウザに任意の JSON ビューアー拡張機能をインストールして、フォーマットされたデータを表示することもできます。

フロントエンド: React部分

基本的な API ができたので、それを使用してフロントエンドの React アプリケーションをセットアップしてみましょう。

npx 作成_react アプリ

Create React App は、設定なしで React アプリケーションをすぐに使い始めることができる Facebook のプロジェクトです。

まず、Node.js と npm がインストールされていることを確認します。次に、Rails ディレクトリの外にいることを確認し、次のコマンドを実行して react アプリを作成します。

npx 作成-react-app my_react

これにより、API と通信する React アプリケーションが作成されます。ディレクトリに cd my_react と入力し、npm start を実行すると、http://localhost:3000 が開きます。

Reactコンポーネント

React の主な利点の 1 つはコンポーネントの概念です。以下に示すように、必要なコンポーネントを作成し、不要なコンポーネントを削除します。

ソースディレクトリに、新しいフォルダー **components** を作成し、そこに表示するファイルを配置します。

最初のコンポーネントを作成しましょう。 todo-app/src/components/Movie.js に新しいファイルを作成しましょう。

React をインポートします。{ コンポーネント } から 'react' をインポートします。 
クラスSongはComponentを拡張します{ 
与える（） { 
戻る （ 
<div> 
<h1>映画</h1> 
</div> 
); 
} 
} 
デフォルトの曲をエクスポートします。

これが私たちのコンポーネントです。次に、ブラウザに表示できるようにアプリケーションファイルにインポートします。

'./App.css' をインポートします。 
'./components/Song' から Song をインポートします。 
関数App() { 
戻る （ 
<div className="アプリ"> 
<歌 /> 
</div> 
); 
} 
デフォルトのアプリをエクスポートします。

axiosを使用してAPIデータを取得する

バックエンドからデータをロードする時が来ました。任意のパッケージを使用してデータを取得/保存できます。今回はaxiosを使います。

axios をインストールし、Movie コンポーネントにインポートします。

npm インストール axios --save

まず、コンストラクターで状態を空の配列に初期化します。

コンストラクタ(props) { 
スーパー(小道具) 
この状態 = { 
映画: [] 
} 
}

コンポーネントの状態はすでに初期化されているので、API からデータを読み込むための componentDidMount() メソッドを実装しましょう。

コンポーネントマウント() { 
axios.get('http://localhost:3000/movies') 
.then(応答 => { 
console.log(応答) 
this.setState({movies: response.data}) 
}) 
.catch(エラー => console.log(エラー)) 
} 
 
'axios' から axios をインポートします

axios をインポートすることを忘れないでください:

'axios' から axios をインポートします

この時点では、cors によってブロックされ、データを取得できなくなります。これを回避するには、config/appcation.rb の API を使用する必要があります。

config.middleware.insert_before 0、Rack::Corsは 
許可する 
オリジン 'http://localhost:3000' リソース '*'、:headers => :any、:methods => [:get、:post、:put、:delete、:options] 
終わり 
終わり

API からアイデアを取得できることがわかったので、それを React コンポーネントで使用してみましょう。レンダリング関数を変更して、状態からのアイデアのリストを反復処理し、それぞれを表示することができます。

与える（） { 
戻る （ 
<div> 
 
{this.state.movies.map((映画) => { 
 
戻る（ 
 
<div className="tile" キー={movie.id} > 
 
<h2>{映画名}:<span>{映画の評価}</span></h2> 
 
</div> 
） 
})} 
</div> 
); 
}

これでブラウザでデータを見ることができます。

Rails API を使用して React アプリケーションを構築する方法についての記事はこれで終わりです。Rails API を使用して React アプリケーションを構築する方法の詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: