react spring bootダウンロード-ReactSpringBoot react spring bootコードのダウンロード

反応とスプリングブートの最初のセットアップ

作成：11-04-2020
最終更新：ジョーディコーダーによる10-09-2021

貢献者：
Jeffrey Spaan（Full Stack Developer @ CodeBean）
Jordy Hamwijk（Full Stack Developer @ CodeBean）

ようこそ開発者。これは、ReactとSpring Bootを使用した最初のWebアプリケーションを開発する最初のチュートリアルです。
今後、このリポジトリをGitHubに投稿するリポジトリを追加するための出発点として使用します。
このチュートリアルでは、基本をカバーし、スプリングブートバックエンドでReact Frontendをセットアップします。

反応とは何ですか？

Reactは、単一ページアプリケーション専用のユーザーインターフェイスの構築に使用されるオープンソースJavaScriptライブラリです。
Webおよびモバイルアプリのビューレイヤーの処理に使用されます。また、 Reactは再利用可能なUIコンポーネントを作成することもできます。
UIコンポーネントを使用すると、開発が緩和され、アプリケーションの開発時間が短縮されます。

Spring Bootとは何ですか？

Spring Bootは、マイクロサービスの作成に使用されるJavaベースのフレームワークです。
アプリケーションのバックエンドの構成は、スプリングブート依存関係を使用することで簡素化されます。これにより、必要な依存関係を選択して、アプリケーションのバックエンドをすばやくセットアップできます。
そういえば、すぐにバックエンドを作成することから始めましょう。

はじめる

ブラウザでは、https：//start.spring.ioを開きます

プロジェクト： Maven Project
言語： Java
Spring Boot（バージョン）：最新の安定バージョンを使用します： 2.2.6
グループ：これはあなたのインターネットドメインであり、後方です。 CodeBeanの場合： nl.codebeanを使用します
Artifact：これはあなたのプロジェクトの名前です。このプロジェクトでは、 react-spring-bootを使用します
説明：これはあなたのプロジェクトに関する簡単な説明です。このプロジェクトでは、 React and Spring Boot Tutorialを使用します
パッケージ： JAR
Java：バージョン8
依存関係： Spring Web

事前に生成されたSpring Bootアプリケーションを作成するには、クリック：生成します

ハードドライブにzipファイルがダウンロードされます。 zipファイルを開き、プロジェクトフォルダーを抽出します。
お気に入りのIDEでプロジェクトフォルダーを開きます。

pom.xml

プロジェクトオブジェクトモデルまたはPOMは、Mavenの基本的な作業単位です。
これは、プロジェクトを構築するためにMavenが使用するプロジェクトと構成の詳細に関する情報を含むXMLファイルです。

次のリストは、Mavenプロジェクトを選択するときに作成されたPOM.xmlファイルを示しています。

<? xml version = " 1.0 " encoding = " UTF-8 " ?>
< project xmlns = " http://maven.apache.org/POM/4.0.0 " xmlns : xsi = " http://www.w3.org/2001/XMLSchema-instance "
  xsi : schemaLocation = " http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd " >
  < modelVersion >4.0.0</ modelVersion >
  < parent >
    < groupId >org.springframework.boot</ groupId >
    < artifactId >spring-boot-starter-parent</ artifactId >
    < version >2.2.6.RELEASE</ version >
    < relativePath /> <!-- lookup parent from repository -->
  </ parent >
  < groupId >nl.codebean</ groupId >
  < artifactId >react-spring-boot</ artifactId >
  < version >0.0.1-SNAPSHOT</ version >
  < name >react-spring-boot</ name >
  < description >React and Spring Boot Tutorial</ description >

  < properties >
    < java .version>1.8</ java .version>
  </ properties >

  < dependencies >
    < dependency >
      < groupId >org.springframework.boot</ groupId >
      < artifactId >spring-boot-starter-web</ artifactId >
    </ dependency >

    < dependency >
      < groupId >org.springframework.boot</ groupId >
      < artifactId >spring-boot-starter-test</ artifactId >
      < scope >test</ scope >
      < exclusions >
        < exclusion >
          < groupId >org.junit.vintage</ groupId >
          < artifactId >junit-vintage-engine</ artifactId >
        </ exclusion >
      </ exclusions >
    </ dependency >
  </ dependencies >

  < build >
    < plugins >
      < plugin >
        < groupId >org.springframework.boot</ groupId >
         < artifactId >spring-boot-maven-plugin</ artifactId >
      </ plugin >
    </ plugins >
  </ build >

</ project >

スプリングブートコントローラー

サービスを追加して、アプリケーションにデータを出力します。
これを行うには、 GreetController.javaという名前のコントローラーを追加します

コントローラーsrc/main/java/nl/codebean/reactspringboot/GreetController.javaで保存します

 package nl . codebean . reactspringboot ;

import org . springframework . web . bind . annotation . RequestMapping ;
import org . springframework . web . bind . annotation . RestController ;

@ RestController
public class GreetController {

  @ RequestMapping ( "/api/greet" )
  public String greet () {
    return "Greetings from CodeBean!" ;
  }
}

@RestController ：これは、クラスをコントローラーとしてマークするスプリングブートアノテーションです。

@RequestMapping ：これは、 greet()メソッドに"/api/greet"をマップするスプリングブートアノテーションです。ブラウザから呼び出された場合、またはコマンドラインでCurlを使用すると、メソッドはテキストのみを返します。これは、 @RestControllerが@Controllerと@ResponseBodyを組み合わせているためです。

それでは、ターミナルでアプリケーションを実行しましょう。

Spring Bootアプリケーションを実行します

アプリケーションを開始するには、コマンド端子を開き、次のタスクを実行します（その出力で表示）：
このチュートリアルでは、端末コマンドは元のコマンドの前に>>でマークされています。

> mvn spring-boot:run

2020-04-12 10:42:20.303  INFO 2232 --- [           main] o.s.b.w.embedded.tomcat.TomcatWebServer  : Tomcat initialized with port(s): 8080 (http)
2020-04-12 10:42:20.311  INFO 2232 --- [           main] o.apache.catalina.core.StandardService   : Starting service [Tomcat]
2020-04-12 10:42:20.312  INFO 2232 --- [           main] org.apache.catalina.core.StandardEngine  : Starting Servlet engine: [Apache Tomcat/9.0.33]
2020-04-12 10:42:20.378  INFO 2232 --- [           main] o.a.c.c.C.[Tomcat].[localhost].[/]       : Initializing Spring embedded WebApplicationContext
2020-04-12 10:42:20.378  INFO 2232 --- [           main] o.s.web.context.ContextLoader            : Root WebApplicationContext: initialization completed in 896 ms
2020-04-12 10:42:20.503  INFO 2232 --- [           main] o.s.s.concurrent.ThreadPoolTaskExecutor  : Initializing ExecutorService 'applicationTaskExecutor'
2020-04-12 10:42:20.610  INFO 2232 --- [           main] o.s.b.w.embedded.tomcat.TomcatWebServer  : Tomcat started on port(s): 8080 (http) with context path ''
2020-04-12 10:42:20.612  INFO 2232 --- [           main] n.c.r.ReactSpringBootApplication         : Started ReactSpringBootApplication in 1.444 seconds (JVM running for 1.78)

アプリケーションが開始されたら、サービスを実行してみましょう（別のコマンド端末）。次のタスクを実行します（出力で表示）：

> curl http://localhost:8080/api/greet
Greetings from CodeBean!

素晴らしい仕事！ Spring Boot RESTサービスは現在稼働しています。
バックエンドデータをフロントエンドに取得し続けましょう。

React Frontendを作成します

次に、 Reactと呼ばれるJavaScriptライブラリを使用してフロントエンドを構築します。
フロントエンドでは、バックエンドによって生成されるデータを取得できます。始めましょう！

> npx create-react-app frontend

Creating a new React app in ../react-spring-boot/frontend

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...
Installing template dependencies using npm...
Removing template package using npm...

Success! Created frontend at ../react-spring-boot/frontend

We suggest that you begin by typing:

  cd frontend
  npm start

指示は明確です。続けて、それを続けましょう（その出力で示されています）：

> cd frontend
> npm start

Compiled successfully!

You can now view frontend in the browser.

  Local:            http://localhost:3000

ブラウザを開き、http：// localhost：3000にアクセスして、 Reactアプリケーションを表示します。
このように見えるはずです：

React FrontendのSpring BootからRESTサービスを表示

次のタスクは、フロントエンド（クライアント側）のバックエンド（サーバー側）からのAPIデータを表示することです。
バックエンドはポート8080 http://localhost:8080で実行されています
フロントエンドは、ポート3000 http://localhost:3000で実行されています

両方のポートは、相互接続性なしに互いに並んで実行されています。フロントエンドポートからバックエンドポートへの読み取りおよび書き込みアクセスを許可するには、データ転送を可能にするプロキシをセットアップする必要があります。

これは、ポート3000ポート8080からデータを転送できるようにするfrontend/package.jsonファイルにproxyフィールドを追加することで解決されます。

 "proxy" : " http://localhost:8080 " ,

frontend/package.jsonファイルは次のようになります。

{
  "name" : " frontend " ,
  "version" : " 0.1.0 " ,
  "private" : true ,
  "dependencies" : {
    "@testing-library/jest-dom" : " ^4.2.4 " ,
    "@testing-library/react" : " ^9.5.0 " ,
    "@testing-library/user-event" : " ^7.2.1 " ,
    "react" : " ^16.13.1 " ,
    "react-dom" : " ^16.13.1 " ,
    "react-scripts" : " 3.4.1 "
  },
  "scripts" : {
    "start" : " react-scripts start " ,
    "build" : " react-scripts build " ,
    "test" : " react-scripts test " ,
    "eject" : " react-scripts eject "
  },
  "proxy" : " http://localhost:8080 " ,
  "eslintConfig" : {
    "extends" : " react-app "
  },
  "browserslist" : {
    "production" : [
      " >0.2% " ,
      " not dead " ,
      " not op_mini all "
    ],
    "development" : [
      " last 1 chrome version " ,
      " last 1 firefox version " ,
      " last 1 safari version "
    ]
  }
}

APIリクエストのプロキシの詳細については、Create React Appのドキュメントを参照してください。

フロントエンドのデータにもアクセスできるかどうかをテストしましょう。

まず、フロントエンドを再起動します。現在のセッションを停止するには、IDE端子ウィンドウにCtrl + Cを入力します。
フロントエンドが再起動されたら、新しい端子ウィンドウを開き、次のコマンドを入力します（出力で表示）：

> curl http://localhost:3000/api/greet
Greetings from CodeBean!

React FrontendのSpring Boot Backendからデータを取得する

私たちはほとんどそこにいます。次に、バックエンドからデータを取得して、フロントエンドに表示します。
/frontend/srcフォルダーを開きます。 componentsという名前のフォルダーを追加します。
componentsフォルダーに、 Greet.jsという名前のファイルを追加します

Reactのベストプラクティスによれば、コンポーネントフォルダーには、コンポーネントとして機能するすべてのファイルが含まれます。
Reactのベストプラクティスによると、コンポーネント名は大文字から始まります。

あなたの/srcフォルダー構造は、次のようになります。

 .
├─ ...
├─ components
│   └─ Greet.js
└─ ...

Greet.jsファイルに次のコードを追加します。

 import React , { useState , useEffect } from 'react' ;

const Greet = ( ) => {
  const [ greet , setGreet ] = useState ( "" ) ;

  async function fetchData ( ) {
    let res = await fetch ( '/api/greet' ) ;
    let greet = await res . text ( )
    setGreet ( greet ) ;
  }
  
  useEffect ( ( ) => {
    fetchData ( ) ;
  } , [ ] ) ;
  
  return (
  < div >
    < h4 > { greet } </ h4 >
  </ div >
  )
}

export default Greet ;

/frontend/srcフォルダーにあるApp.jsファイルを開きます。
ここではimport Greet from './components/Greet';を追加して、 Greet.jsコンポーネントをインポートします。 <Greet /> App.jsファイルに。
あなたのコードは次のようになるはずです：

 import React from 'react' ;
import logo from './logo.svg' ;
import './App.css' ;

import Greet from './components/Greet' ;

function App ( ) {
  return (
    < div className = "App" >
      < header className = "App-header" >
        < img src = { logo } className = "App-logo" alt = "logo" />
        < p >
          Edit < code > src/App.js </ code > and save to reload.
        </ p >
        < Greet />
        < a
          className = "App-link"
          href = "https://reactjs.org"
          target = "_blank"
          rel = "noopener noreferrer"
        >
          Learn React
        </ a >
      </ header >
    </ div >
  ) ;
}

export default App ;