{"id":48113,"date":"2023-07-20T15:33:29","date_gmt":"2023-07-26T05:04:09","guid":{"rendered":"https:\/\/www.silicloud.com\/zh\/blog\/%e5%b0%9d%e8%af%95%e5%ae%8c%e6%88%90-aws-amplify-%e7%9a%84-react-%e6%95%99%e7%a8%8b%e3%80%82\/"},"modified":"2024-04-30T14:28:17","modified_gmt":"2024-04-30T06:28:17","slug":"%e5%b0%9d%e8%af%95%e5%ae%8c%e6%88%90-aws-amplify-%e7%9a%84-react-%e6%95%99%e7%a8%8b%e3%80%82","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/zh\/blog\/%e5%b0%9d%e8%af%95%e5%ae%8c%e6%88%90-aws-amplify-%e7%9a%84-react-%e6%95%99%e7%a8%8b%e3%80%82\/","title":{"rendered":"\u5c1d\u8bd5\u5b8c\u6210 AWS Amplify \u7684 React \u6559\u7a0b"},"content":{"rendered":"

\u9996\u5148\/\u8d77\u521d<\/h1>\n

\u6211\u5728AWS Amplify\u627e\u5230\u4e86\u4e00\u4e2a\u7b80\u5355\u7684\u6559\u7a0b\uff0c\u6240\u4ee5\u6211\u5c1d\u8bd5\u505a\u4e86\u4e00\u4e0b\u3002
\n\u6211\u4eec\u5c06\u4f7f\u7528React + Amplify + AppSync + DynamoDB\u521b\u5efa\u4e00\u4e2a\u65e0\u670d\u52a1\u5668\u7684ToDo\u5e94\u7528\u7a0b\u5e8f\u3002
\n\u94fe\u63a5\uff1ahttps:\/\/docs.amplify.aws\/start\/q\/integration\/react\/<\/p>\n

AWS Amplify\u662f\u4ec0\u4e48\uff1f<\/h1>\n
\"\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8<\/div>\n

\u7528AWS Amplify\u5c1d\u8bd5\u521b\u5efa\u4e00\u4e2aToDo\u5e94\u7528<\/h1>\n

\u524d\u63d0\u6761\u4ef6<\/h2>\n
    \n
  • \n
      Node.js v12.x\u4ee5\u964d<\/ul>\n<\/li>\n<\/ul>\n

       <\/p>\n

        \n
      • \n
          NPM V5.x \u4ee5\u964d<\/ul>\n<\/li>\n<\/ul>\n

           <\/p>\n

            git v2.14.1\u4ee5\u964d<\/ul>\n

            \u5b89\u88c5\u5e76\u8bbe\u7f6eamplify\/cli\u3002<\/h2>\n

            \u5b89\u88c5amplify\/cli<\/p>\n

            $ <\/span>sudo <\/span>npm install<\/span> -g<\/span> @aws-amplify\/cli\r\n<\/code><\/pre>\n
            \u653e\u5927\/amplify\/cli\u5de5\u5177\u7684\u5b89\u88c5\u8bbe\u7f6e<\/p>\n
            $ <\/span>amplify configure\r\nFollow these steps to set <\/span>up access to your AWS account:\r\n\r\nSign in <\/span>to your AWS administrator account:\r\nhttps:\/\/console.aws.amazon.com\/\r\n<\/code><\/pre>\n
            \"\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8<\/div>\n
            \u5728\u767b\u5f55AWS\u63a7\u5236\u53f0\u540e\uff0c\u8fd4\u56de\u7ec8\u7aef\u5e76\u8f93\u5165\u533a\u57df\u548c\u7528\u6237\u540d\uff0c\u5c31\u4f1a\u5728\u6d4f\u89c8\u5668\u4e2d\u663e\u793aAWS\u63a7\u5236\u53f0\u7684IAM\u754c\u9762\u3002<\/p>\n
            Press Enter to continue\r\n\r\n<\/span>Specify the AWS Region\r\n? region:  us-east-1\r\nSpecify the username of the new IAM user:\r\n? user name:  amplify-user\r\nComplete the user creation using the AWS console\r\nhttps:\/\/console.aws.amazon.com\/iam\/home?region=<\/span>us-east-1#\/users$new<\/span>?step=<\/span>final&accessKey&userNames=<\/span>amplify-user&permissionType=<\/span>policies&policies=<\/span>arn:aws:iam::aws:policy%2FAdministratorAccess\r\n<\/code><\/pre>\n
            \"\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8<\/div>\n
            \u56de\u5230\u7ec8\u7aef\uff0c\u6309\u4e0bEnter\u952e\u3002
            \n\u8f93\u5165\u4e4b\u524d\u5907\u4efd\u7684\u201c\u8bbf\u95ee\u5bc6\u94a5ID\u201d\u548c\u201c\u79d8\u5bc6\u8bbf\u95ee\u5bc6\u94a5\u201d\u3002<\/p>\n
            Press Enter to continue\r\n\r\n<\/span>Enter the access key of the newly created user:\r\n? accessKeyId:  ********************<\/span>\r\n? secretAccessKey:  ****************************************<\/span>\r\nThis would update\/create the AWS Profile in <\/span>your local <\/span>machine\r\n? Profile Name:  default\r\n\r\nSuccessfully set <\/span>up the new user.\r\n<\/code><\/pre>\n
            2. \u5236\u4f5cReact\u5e94\u7528\u7a0b\u5e8f<\/h2>\n
            \u521b\u5efaReact\u5e94\u7528\u7a0b\u5e8f\u3002
            \n*\u622a\u81f32021\u5e7411\u670829\u65e5\uff0c\u5c1d\u8bd5\u5b89\u88c5@latest\u7248\u672c\u5931\u8d25\u3002\u8fd9\u4f3c\u4e4e\u4e0e\u6b64\u9519\u8bef\u62a5\u544a\u6709\u5173\u3002<\/p>\n
            $ <\/span>npx create-react-app@latest react-amplified\r\n~~~\u7701\u7565~~\r\nWe suggest that you begin by typing:\r\n\r\n  cd <\/span>react-amplified\r\n  npm start\r\n\r\nHappy hacking!\r\n<\/code><\/pre>\n
            \u5728\u672c\u5730\u68c0\u67e5\u5c4f\u5e55\u3002<\/p>\n
            $ <\/span>cd <\/span>react-amplified\r\n$ <\/span>npm start\r\n~~\u7701\u7565~~\r\nCompiled successfully!\r\n\r\nYou can now view react-amplified in <\/span>the browser.\r\n\r\n  Local:            http:\/\/localhost:3000\r\n  On Your Network:  http:\/\/192.168.11.6:3000\r\n\r\nNote that the development build is not optimized.\r\nTo create a production build, use npm run build.\r\n<\/code><\/pre>\n
            \"\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8<\/div>\n
            3. \u521d\u59cb\u5316\u540e\u7aef<\/h2>\n
            \u521d\u59cb\u5316\u540e\u7aef
            \n\u6309\u9ed8\u8ba4\u503c\u6309Enter\u786e\u8ba4<\/p>\n
            $ <\/span>amplify init\r\nNote: It is recommended to run this command <\/span>from the root of your app directory\r\n? Enter a name for <\/span>the project reactamplified\r\nThe following configuration will be applied:\r\n\r\nProject information\r\n| Name: reactamplified\r\n| Environment: dev\r\n| Default editor: Visual Studio Code\r\n| App type<\/span>: javascript\r\n| Javascript framework: react\r\n| Source Directory Path: src\r\n| Distribution Directory Path: build\r\n| Build Command: npm run-script build\r\n| Start Command: npm run-script start\r\n\r\n? Initialize the project with the above configuration? Yes\r\nUsing default provider  awscloudformation\r\n? Select the authentication method you want to use: AWS profile\r\n\r\nFor more information on AWS Profiles, see:\r\nhttps:\/\/docs.aws.amazon.com\/cli\/latest\/userguide\/cli-configure-profiles.html\r\n\r\n? Please choose the profile you want to use default\r\nAdding backend environment dev to AWS Amplify app: dxleXXXX\r\n~~\u7701\u7565~~\r\nSome next steps:\r\n\"amplify status\"<\/span> will show you what you've added already and if it'<\/span>s locally configured or deployed\r\n\"amplify add <category>\"<\/span> will allow you to add features like user login or a backend API\r\n\"amplify push\"<\/span> will build all your local <\/span>backend resources and provision it in <\/span>the cloud\r\n\"amplify console\"<\/span> to open the Amplify Console and view your project status\r\n\"amplify publish\"<\/span> will build all your local <\/span>backend and frontend resources (<\/span>if <\/span>you have hosting category added)<\/span> and provision it in <\/span>the cloud\r\n\r\nPro tip:\r\nTry \"amplify add api\"<\/span> to create a backend API and then<\/span> \"amplify publish\"<\/span> to deploy everything\r\n<\/code><\/pre>\n
            \u5b89\u88c5Amplify\u5e93\u3002<\/h2>\n
            \u5b89\u88c5Amplify\u5e93<\/p>\n
            $ <\/span>npm install <\/span>aws-amplify @aws-amplify\/ui-react@1.x.x\r\n<\/code><\/pre>\n
            5. \u8bbe\u5b9a\u524d\u7aef\u754c\u9762<\/h2>\n
            \u8bf7\u5728 src\/index.js \u6587\u4ef6\u7684\u6700\u540e\u4e00\u4e2a import \u8bed\u53e5\u4e0b\u9762\u6dfb\u52a0\u4ee5\u4e0b\u5185\u5bb9\u3002<\/p>\n
            import<\/span> Amplify<\/span> from<\/span> \"<\/span>aws-amplify<\/span>\"<\/span>;<\/span>\r\nimport<\/span> awsExports<\/span> from<\/span> \"<\/span>.\/aws-exports<\/span>\"<\/span>;<\/span>\r\nAmplify<\/span>.<\/span>configure<\/span>(<\/span>awsExports<\/span>);<\/span>\r\n<\/code><\/pre>\n
            src\/index.js \u8ffd\u52a0\u8bb0\u5f55\u540e\u3002<\/p>\n
            import<\/span> React<\/span> from<\/span> '<\/span>react<\/span>'<\/span>;<\/span>\r\nimport<\/span> ReactDOM<\/span> from<\/span> '<\/span>react-dom<\/span>'<\/span>;<\/span>\r\nimport<\/span> '<\/span>.\/index.css<\/span>'<\/span>;<\/span>\r\nimport<\/span> App<\/span> from<\/span> '<\/span>.\/App<\/span>'<\/span>;<\/span>\r\nimport<\/span> reportWebVitals<\/span> from<\/span> '<\/span>.\/reportWebVitals<\/span>'<\/span>;<\/span>\r\nimport<\/span> Amplify<\/span> from<\/span> \"<\/span>aws-amplify<\/span>\"<\/span>;<\/span>\r\nimport<\/span> awsExports<\/span> from<\/span> \"<\/span>.\/aws-exports<\/span>\"<\/span>;<\/span>\r\nAmplify<\/span>.<\/span>configure<\/span>(<\/span>awsExports<\/span>);<\/span>\r\nReactDOM<\/span>.<\/span>render<\/span>(<\/span>\r\n  <<\/span>React<\/span>.<\/span>StrictMode<\/span>><\/span>\r\n    <<\/span>App<\/span> \/><\/span>\r\n  <<\/span>\/React.StrictMode><\/span>,\r\n<\/span>  document<\/span>.<\/span>getElementById<\/span>(<\/span>'<\/span>root<\/span>'<\/span>)<\/span>\r\n);<\/span>\r\n\r\n\/\/ If you want to start measuring performance in your app, pass a function<\/span>\r\n\/\/ to log results (for example: reportWebVitals(console.log))<\/span>\r\n\/\/ or send to an analytics endpoint. Learn more: https:\/\/bit.ly\/CRA-vitals<\/span>\r\nreportWebVitals<\/span>();<\/span>\r\n<\/code><\/pre>\n
            6. \u521b\u5efaGraphQL API\u548c\u6570\u636e\u5e93\u3002<\/h2>\n
            \u521b\u5efa\u4e00\u4e2aGraphQL API\u548c\u6570\u636e\u5e93\u3002\u4fdd\u6301\u9ed8\u8ba4\u8bbe\u7f6e\u5e76\u9009\u62e9\u4e00\u4e2a\u7f16\u8f91\u5668\u3002<\/p>\n
            $ <\/span>amplify add api\r\n? Select from one of the below mentioned services: GraphQL\r\n? Here is the GraphQL API that we will create. Select a setting to edit or continue <\/span>Continue\r\n? Choose a schema template: Single object with fields (<\/span>e.g., \u201cTodo\u201d with ID, name, description)<\/span>\r\n\r\n\u26a0\ufe0f  WARNING: your GraphQL API currently allows public create, read<\/span>, update, and delete access to all models via an API Key. To configure PRODUCTION-READY authorization rules, review: https:\/\/docs.amplify.aws\/cli\/graphql\/authorization-rules\r\n\r\nGraphQL schema compiled successfully.\r\n\r\nEdit your schema at \/XXXX\/react-amplified\/amplify\/backend\/api\/reactamplified\/schema.graphql or place .graphql files in <\/span>a directory at \/XXXX\/react-amplified\/amplify\/backend\/api\/reactamplified\/schema\r\n\u2714 Do you want to edit the schema now? (<\/span>Y\/n)<\/span> \u00b7 yes<\/span>\r\n? Choose your default editor: (<\/span>Use arrow keys)<\/span>\r\n\u276f Visual Studio Code\r\n  Android Studio\r\n  Xcode (<\/span>Mac OS only)<\/span>\r\n  Atom Editor\r\n  Sublime Text\r\n  IntelliJ IDEA\r\n  Vim (<\/span>via Terminal, Mac OS only)<\/span>\r\n(<\/span>Move up and down to reveal more choices)<\/span>\r\n<\/code><\/pre>\n
            \"\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8<\/div>\n
            7. API\u7684\u90e8\u7f72<\/h2>\n
            \u90e8\u7f72API<\/p>\n
            $ amplify push\r\n~~\u7701\u7565~~\r\nGraphQL endpoint: https:\/\/dgsXXXX.appsync-api.us-east-1.amazonaws.com\/graphql\r\nGraphQL API KEY: da2-vkaXXXX\r\n<\/code><\/pre>\n
            \u786e\u8ba4API\u7684\u72b6\u6001<\/p>\n
            $ amplify status\r\n\r\n    Current Environment: dev\r\n\r\n\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u252c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u252c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u252c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\r\n\u2502 Category \u2502 Resource name  \u2502 Operation \u2502 Provider plugin   \u2502\r\n\u251c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u253c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u253c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u253c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524\r\n\u2502 Api      \u2502 reactamplified \u2502 No Change \u2502 awscloudformation \u2502\r\n\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\r\n\r\nGraphQL endpoint: https:\/\/dgsXXXX.appsync-api.us-east-1.amazonaws.com\/graphql\r\nGraphQL API KEY: da2-vkaXXXX\r\n<\/code><\/pre>\n
            8. \u4ece\u524d\u7aef\u8fde\u63a5\u5230API\u5904<\/h2>\n
            \u5c06src\/App.js\u66ff\u6362\u4e3a\u4ee5\u4e0b\u5185\u5bb9<\/p>\n
            \/* src\/App.js *\/<\/span>\r\nimport<\/span> React<\/span>,<\/span> {<\/span> useEffect<\/span>,<\/span> useState<\/span> }<\/span> from<\/span> '<\/span>react<\/span>'<\/span>\r\nimport<\/span> Amplify<\/span>,<\/span> {<\/span> API<\/span>,<\/span> graphqlOperation<\/span> }<\/span> from<\/span> '<\/span>aws-amplify<\/span>'<\/span>\r\nimport<\/span> {<\/span> createTodo<\/span> }<\/span> from<\/span> '<\/span>.\/graphql\/mutations<\/span>'<\/span>\r\nimport<\/span> {<\/span> listTodos<\/span> }<\/span> from<\/span> '<\/span>.\/graphql\/queries<\/span>'<\/span>\r\n\r\nimport<\/span> awsExports<\/span> from<\/span> \"<\/span>.\/aws-exports<\/span>\"<\/span>;<\/span>\r\nAmplify<\/span>.<\/span>configure<\/span>(<\/span>awsExports<\/span>);<\/span>\r\n\r\nconst<\/span> initialState<\/span> =<\/span> {<\/span> name<\/span>:<\/span> ''<\/span>,<\/span> description<\/span>:<\/span> ''<\/span> }<\/span>\r\n\r\nconst<\/span> App<\/span> =<\/span> ()<\/span> =><\/span> {<\/span>\r\n  const<\/span> [<\/span>formState<\/span>,<\/span> setFormState<\/span>]<\/span> =<\/span> useState<\/span>(<\/span>initialState<\/span>)<\/span>\r\n  const<\/span> [<\/span>todos<\/span>,<\/span> setTodos<\/span>]<\/span> =<\/span> useState<\/span>([])<\/span>\r\n\r\n  useEffect<\/span>(()<\/span> =><\/span> {<\/span>\r\n    fetchTodos<\/span>()<\/span>\r\n  },<\/span> [])<\/span>\r\n\r\n  function<\/span> setInput<\/span>(<\/span>key<\/span>,<\/span> value<\/span>)<\/span> {<\/span>\r\n    setFormState<\/span>({<\/span> ...<\/span>formState<\/span>,<\/span> [<\/span>key<\/span>]:<\/span> value<\/span> })<\/span>\r\n  }<\/span>\r\n\r\n  async<\/span> function<\/span> fetchTodos<\/span>()<\/span> {<\/span>\r\n    try<\/span> {<\/span>\r\n      const<\/span> todoData<\/span> =<\/span> await<\/span> API<\/span>.<\/span>graphql<\/span>(<\/span>graphqlOperation<\/span>(<\/span>listTodos<\/span>))<\/span>\r\n      const<\/span> todos<\/span> =<\/span> todoData<\/span>.<\/span>data<\/span>.<\/span>listTodos<\/span>.<\/span>items<\/span>\r\n      setTodos<\/span>(<\/span>todos<\/span>)<\/span>\r\n    }<\/span> catch<\/span> (<\/span>err<\/span>)<\/span> {<\/span> console<\/span>.<\/span>log<\/span>(<\/span>'<\/span>error fetching todos<\/span>'<\/span>)<\/span> }<\/span>\r\n  }<\/span>\r\n\r\n  async<\/span> function<\/span> addTodo<\/span>()<\/span> {<\/span>\r\n    try<\/span> {<\/span>\r\n      if<\/span> (<\/span>!<\/span>formState<\/span>.<\/span>name<\/span> ||<\/span> !<\/span>formState<\/span>.<\/span>description<\/span>)<\/span> return<\/span>\r\n      const<\/span> todo<\/span> =<\/span> {<\/span> ...<\/span>formState<\/span> }<\/span>\r\n      setTodos<\/span>([...<\/span>todos<\/span>,<\/span> todo<\/span>])<\/span>\r\n      setFormState<\/span>(<\/span>initialState<\/span>)<\/span>\r\n      await<\/span> API<\/span>.<\/span>graphql<\/span>(<\/span>graphqlOperation<\/span>(<\/span>createTodo<\/span>,<\/span> {<\/span>input<\/span>:<\/span> todo<\/span>}))<\/span>\r\n    }<\/span> catch<\/span> (<\/span>err<\/span>)<\/span> {<\/span>\r\n      console<\/span>.<\/span>log<\/span>(<\/span>'<\/span>error creating todo:<\/span>'<\/span>,<\/span> err<\/span>)<\/span>\r\n    }<\/span>\r\n  }<\/span>\r\n\r\n  return<\/span> (<\/span>\r\n    <<\/span>div<\/span> style<\/span>=<\/span>{<\/span>styles<\/span>.<\/span>container<\/span>}<\/span>><\/span>\r\n      <<\/span>h2<\/span>><\/span>Amplify<\/span> Todos<\/span><<\/span>\/h2<\/span>>\r\n<\/span>      <<\/span>input<\/span>\r\n        onChange<\/span>=<\/span>{<\/span>event<\/span> =><\/span> setInput<\/span>(<\/span>'<\/span>name<\/span>'<\/span>,<\/span> event<\/span>.<\/span>target<\/span>.<\/span>value<\/span>)}<\/span>\r\n        style<\/span>=<\/span>{<\/span>styles<\/span>.<\/span>input<\/span>}<\/span>\r\n        value<\/span>=<\/span>{<\/span>formState<\/span>.<\/span>name<\/span>}<\/span>\r\n        placeholder<\/span>=<\/span>\"<\/span>Name<\/span>\"<\/span>\r\n      \/><\/span>\r\n      <<\/span>input<\/span>\r\n        onChange<\/span>=<\/span>{<\/span>event<\/span> =><\/span> setInput<\/span>(<\/span>'<\/span>description<\/span>'<\/span>,<\/span> event<\/span>.<\/span>target<\/span>.<\/span>value<\/span>)}<\/span>\r\n        style<\/span>=<\/span>{<\/span>styles<\/span>.<\/span>input<\/span>}<\/span>\r\n        value<\/span>=<\/span>{<\/span>formState<\/span>.<\/span>description<\/span>}<\/span>\r\n        placeholder<\/span>=<\/span>\"<\/span>Description<\/span>\"<\/span>\r\n      \/><\/span>\r\n      <<\/span>button<\/span> style<\/span>=<\/span>{<\/span>styles<\/span>.<\/span>button<\/span>}<\/span> onClick<\/span>=<\/span>{<\/span>addTodo<\/span>}<\/span>><\/span>Create<\/span> Todo<\/span><<\/span>\/button<\/span>>\r\n<\/span>      {<\/span>\r\n        todos<\/span>.<\/span>map<\/span>((<\/span>todo<\/span>,<\/span> index<\/span>)<\/span> =><\/span> (<\/span>\r\n          <<\/span>div<\/span> key<\/span>=<\/span>{<\/span>todo<\/span>.<\/span>id<\/span> ?<\/span> todo<\/span>.<\/span>id<\/span> :<\/span> index<\/span>}<\/span> style<\/span>=<\/span>{<\/span>styles<\/span>.<\/span>todo<\/span>}<\/span>><\/span>\r\n            <<\/span>p<\/span> style<\/span>=<\/span>{<\/span>styles<\/span>.<\/span>todoName<\/span>}<\/span>><\/span>{<\/span>todo<\/span>.<\/span>name<\/span>}<\/span><<\/span>\/p<\/span>>\r\n<\/span>            <<\/span>p<\/span> style<\/span>=<\/span>{<\/span>styles<\/span>.<\/span>todoDescription<\/span>}<\/span>><\/span>{<\/span>todo<\/span>.<\/span>description<\/span>}<\/span><<\/span>\/p<\/span>>\r\n<\/span>          <<\/span>\/div<\/span>>\r\n<\/span>        ))<\/span>\r\n      }<\/span>\r\n    <<\/span>\/div<\/span>>\r\n<\/span>  )<\/span>\r\n}<\/span>\r\n\r\nconst<\/span> styles<\/span> =<\/span> {<\/span>\r\n  container<\/span>:<\/span> {<\/span> width<\/span>:<\/span> 400<\/span>,<\/span> margin<\/span>:<\/span> '<\/span>0 auto<\/span>'<\/span>,<\/span> display<\/span>:<\/span> '<\/span>flex<\/span>'<\/span>,<\/span> flexDirection<\/span>:<\/span> '<\/span>column<\/span>'<\/span>,<\/span> justifyContent<\/span>:<\/span> '<\/span>center<\/span>'<\/span>,<\/span> padding<\/span>:<\/span> 20<\/span> },<\/span>\r\n  todo<\/span>:<\/span> {<\/span>  marginBottom<\/span>:<\/span> 15<\/span> },<\/span>\r\n  input<\/span>:<\/span> {<\/span> border<\/span>:<\/span> '<\/span>none<\/span>'<\/span>,<\/span> backgroundColor<\/span>:<\/span> '<\/span>#ddd<\/span>'<\/span>,<\/span> marginBottom<\/span>:<\/span> 10<\/span>,<\/span> padding<\/span>:<\/span> 8<\/span>,<\/span> fontSize<\/span>:<\/span> 18<\/span> },<\/span>\r\n  todoName<\/span>:<\/span> {<\/span> fontSize<\/span>:<\/span> 20<\/span>,<\/span> fontWeight<\/span>:<\/span> '<\/span>bold<\/span>'<\/span> },<\/span>\r\n  todoDescription<\/span>:<\/span> {<\/span> marginBottom<\/span>:<\/span> 0<\/span> },<\/span>\r\n  button<\/span>:<\/span> {<\/span> backgroundColor<\/span>:<\/span> '<\/span>black<\/span>'<\/span>,<\/span> color<\/span>:<\/span> '<\/span>white<\/span>'<\/span>,<\/span> outline<\/span>:<\/span> '<\/span>none<\/span>'<\/span>,<\/span> fontSize<\/span>:<\/span> 18<\/span>,<\/span> padding<\/span>:<\/span> '<\/span>12px 0px<\/span>'<\/span> }<\/span>\r\n}<\/span>\r\n\r\nexport<\/span> default<\/span> App<\/span>\r\n<\/code><\/pre>\n
            \u5728\u672c\u5730\u8fdb\u884c\u786e\u8ba4<\/p>\n
            $ npm start\r\n<\/code><\/pre>\n
            \"\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8<\/div>\n
            9. \u6dfb\u52a0\u8ba4\u8bc1<\/h2>\n
            \u9ed8\u8ba4\u60c5\u51b5\u4e0b\uff0c\u6dfb\u52a0\u8ba4\u8bc1
            \n\u6309Enter<\/p>\n
            $ amplify add auth\r\n~~\u7701\u7565~~\r\nSome next steps:\r\n\"amplify push\" will build all your local backend resources and provision it in the cloud\r\n\"amplify publish\" will build all your local backend and frontend resources (if you have hosting category added) and provision it in the cloud\r\n<\/code><\/pre>\n
            \u90e8\u7f72<\/p>\n
            $ amplify push\r\n~~\u7701\u7565~~\r\nAll resources are updated in the cloud\r\n<\/code><\/pre>\n
            \u786e\u8ba4\u5728amplify\u7684\u72b6\u6001\u4e2d\u5df2\u6dfb\u52a0\u4e86Auth\u3002<\/p>\n
            $ <\/span>amplify status\r\n~~\u7701\u7565~~\r\n\r\n    Current Environment: dev\r\n\r\n\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u252c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u252c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u252c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\r\n\u2502 Category \u2502 Resource name          \u2502 Operation \u2502 Provider plugin   \u2502\r\n\u251c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u253c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u253c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u253c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524\r\n\u2502 Api      \u2502 reactamplified         \u2502 No Change \u2502 awscloudformation \u2502\r\n\u251c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u253c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u253c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u253c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524\r\n\u2502 Auth     \u2502 reactamplified91c68478 \u2502 No Change \u2502 awscloudformation \u2502\r\n\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\r\n\r\nGraphQL endpoint: https:\/\/dgsXXXX.appsync-api.us-east-1.amazonaws.com\/graphql\r\nGraphQL API KEY: da2-vkaXXXX\r\n<\/code><\/pre>\n
            10. \u521b\u5efa\u767b\u5f55\u9875\u9762<\/h2>\n
            \u4fee\u6539 src\/App.js<\/p>\n
            10-1. \u5728import\u4e2d\u6dfb\u52a0\u4ee5\u4e0b\u5185\u5bb9<\/h3>\n
            import<\/span> {<\/span> withAuthenticator<\/span> }<\/span> from<\/span> '<\/span>@aws-amplify\/ui-react<\/span>'<\/span>\r\n<\/code><\/pre>\n
            \u5c06\u9ed8\u8ba4\u5bfc\u51fa\u9879\u66f4\u6539\u4e3awithAuthenticator\uff0c\u5e76\u5c06\u5176\u5305\u88c5\u5728\u4e3b\u7ec4\u4ef6\u5468\u56f4\u3002<\/h3>\n
            export<\/span> default<\/span> withAuthenticator<\/span>(<\/span>App<\/span>)<\/span>\r\n<\/code><\/pre>\n
            10-3. \u4fee\u6b63\u8fc7\u540e\u7684src\/App.js<\/h3>\n
            \/* src\/App.js *\/<\/span>\r\nimport<\/span> React<\/span>,<\/span> {<\/span> useEffect<\/span>,<\/span> useState<\/span> }<\/span> from<\/span> '<\/span>react<\/span>'<\/span>\r\nimport<\/span> Amplify<\/span>,<\/span> {<\/span> API<\/span>,<\/span> graphqlOperation<\/span> }<\/span> from<\/span> '<\/span>aws-amplify<\/span>'<\/span>\r\nimport<\/span> {<\/span> createTodo<\/span> }<\/span> from<\/span> '<\/span>.\/graphql\/mutations<\/span>'<\/span>\r\nimport<\/span> {<\/span> listTodos<\/span> }<\/span> from<\/span> '<\/span>.\/graphql\/queries<\/span>'<\/span>\r\nimport<\/span> {<\/span> withAuthenticator<\/span> }<\/span> from<\/span> '<\/span>@aws-amplify\/ui-react<\/span>'<\/span>\r\n\r\nimport<\/span> awsExports<\/span> from<\/span> \"<\/span>.\/aws-exports<\/span>\"<\/span>;<\/span>\r\nAmplify<\/span>.<\/span>configure<\/span>(<\/span>awsExports<\/span>);<\/span>\r\n\r\nconst<\/span> initialState<\/span> =<\/span> {<\/span> name<\/span>:<\/span> ''<\/span>,<\/span> description<\/span>:<\/span> ''<\/span> }<\/span>\r\n\r\nconst<\/span> App<\/span> =<\/span> ()<\/span> =><\/span> {<\/span>\r\n  const<\/span> [<\/span>formState<\/span>,<\/span> setFormState<\/span>]<\/span> =<\/span> useState<\/span>(<\/span>initialState<\/span>)<\/span>\r\n  const<\/span> [<\/span>todos<\/span>,<\/span> setTodos<\/span>]<\/span> =<\/span> useState<\/span>([])<\/span>\r\n\r\n  useEffect<\/span>(()<\/span> =><\/span> {<\/span>\r\n    fetchTodos<\/span>()<\/span>\r\n  },<\/span> [])<\/span>\r\n\r\n  function<\/span> setInput<\/span>(<\/span>key<\/span>,<\/span> value<\/span>)<\/span> {<\/span>\r\n    setFormState<\/span>({<\/span> ...<\/span>formState<\/span>,<\/span> [<\/span>key<\/span>]:<\/span> value<\/span> })<\/span>\r\n  }<\/span>\r\n\r\n  async<\/span> function<\/span> fetchTodos<\/span>()<\/span> {<\/span>\r\n    try<\/span> {<\/span>\r\n      const<\/span> todoData<\/span> =<\/span> await<\/span> API<\/span>.<\/span>graphql<\/span>(<\/span>graphqlOperation<\/span>(<\/span>listTodos<\/span>))<\/span>\r\n      const<\/span> todos<\/span> =<\/span> todoData<\/span>.<\/span>data<\/span>.<\/span>listTodos<\/span>.<\/span>items<\/span>\r\n      setTodos<\/span>(<\/span>todos<\/span>)<\/span>\r\n    }<\/span> catch<\/span> (<\/span>err<\/span>)<\/span> {<\/span> console<\/span>.<\/span>log<\/span>(<\/span>'<\/span>error fetching todos<\/span>'<\/span>)<\/span> }<\/span>\r\n  }<\/span>\r\n\r\n  async<\/span> function<\/span> addTodo<\/span>()<\/span> {<\/span>\r\n    try<\/span> {<\/span>\r\n      if<\/span> (<\/span>!<\/span>formState<\/span>.<\/span>name<\/span> ||<\/span> !<\/span>formState<\/span>.<\/span>description<\/span>)<\/span> return<\/span>\r\n      const<\/span> todo<\/span> =<\/span> {<\/span> ...<\/span>formState<\/span> }<\/span>\r\n      setTodos<\/span>([...<\/span>todos<\/span>,<\/span> todo<\/span>])<\/span>\r\n      setFormState<\/span>(<\/span>initialState<\/span>)<\/span>\r\n      await<\/span> API<\/span>.<\/span>graphql<\/span>(<\/span>graphqlOperation<\/span>(<\/span>createTodo<\/span>,<\/span> {<\/span>input<\/span>:<\/span> todo<\/span>}))<\/span>\r\n    }<\/span> catch<\/span> (<\/span>err<\/span>)<\/span> {<\/span>\r\n      console<\/span>.<\/span>log<\/span>(<\/span>'<\/span>error creating todo:<\/span>'<\/span>,<\/span> err<\/span>)<\/span>\r\n    }<\/span>\r\n  }<\/span>\r\n\r\n  return<\/span> (<\/span>\r\n    <<\/span>div<\/span> style<\/span>=<\/span>{<\/span>styles<\/span>.<\/span>container<\/span>}<\/span>><\/span>\r\n      <<\/span>h2<\/span>><\/span>Amplify<\/span> Todos<\/span><<\/span>\/h2<\/span>>\r\n<\/span>      <<\/span>input<\/span>\r\n        onChange<\/span>=<\/span>{<\/span>event<\/span> =><\/span> setInput<\/span>(<\/span>'<\/span>name<\/span>'<\/span>,<\/span> event<\/span>.<\/span>target<\/span>.<\/span>value<\/span>)}<\/span>\r\n        style<\/span>=<\/span>{<\/span>styles<\/span>.<\/span>input<\/span>}<\/span>\r\n        value<\/span>=<\/span>{<\/span>formState<\/span>.<\/span>name<\/span>}<\/span>\r\n        placeholder<\/span>=<\/span>\"<\/span>Name<\/span>\"<\/span>\r\n      \/><\/span>\r\n      <<\/span>input<\/span>\r\n        onChange<\/span>=<\/span>{<\/span>event<\/span> =><\/span> setInput<\/span>(<\/span>'<\/span>description<\/span>'<\/span>,<\/span> event<\/span>.<\/span>target<\/span>.<\/span>value<\/span>)}<\/span>\r\n        style<\/span>=<\/span>{<\/span>styles<\/span>.<\/span>input<\/span>}<\/span>\r\n        value<\/span>=<\/span>{<\/span>formState<\/span>.<\/span>description<\/span>}<\/span>\r\n        placeholder<\/span>=<\/span>\"<\/span>Description<\/span>\"<\/span>\r\n      \/><\/span>\r\n      <<\/span>button<\/span> style<\/span>=<\/span>{<\/span>styles<\/span>.<\/span>button<\/span>}<\/span> onClick<\/span>=<\/span>{<\/span>addTodo<\/span>}<\/span>><\/span>Create<\/span> Todo<\/span><<\/span>\/button<\/span>>\r\n<\/span>      {<\/span>\r\n        todos<\/span>.<\/span>map<\/span>((<\/span>todo<\/span>,<\/span> index<\/span>)<\/span> =><\/span> (<\/span>\r\n          <<\/span>div<\/span> key<\/span>=<\/span>{<\/span>todo<\/span>.<\/span>id<\/span> ?<\/span> todo<\/span>.<\/span>id<\/span> :<\/span> index<\/span>}<\/span> style<\/span>=<\/span>{<\/span>styles<\/span>.<\/span>todo<\/span>}<\/span>><\/span>\r\n            <<\/span>p<\/span> style<\/span>=<\/span>{<\/span>styles<\/span>.<\/span>todoName<\/span>}<\/span>><\/span>{<\/span>todo<\/span>.<\/span>name<\/span>}<\/span><<\/span>\/p<\/span>>\r\n<\/span>            <<\/span>p<\/span> style<\/span>=<\/span>{<\/span>styles<\/span>.<\/span>todoDescription<\/span>}<\/span>><\/span>{<\/span>todo<\/span>.<\/span>description<\/span>}<\/span><<\/span>\/p<\/span>>\r\n<\/span>          <<\/span>\/div<\/span>>\r\n<\/span>        ))<\/span>\r\n      }<\/span>\r\n    <<\/span>\/div<\/span>>\r\n<\/span>  )<\/span>\r\n}<\/span>\r\n\r\nconst<\/span> styles<\/span> =<\/span> {<\/span>\r\n  container<\/span>:<\/span> {<\/span> width<\/span>:<\/span> 400<\/span>,<\/span> margin<\/span>:<\/span> '<\/span>0 auto<\/span>'<\/span>,<\/span> display<\/span>:<\/span> '<\/span>flex<\/span>'<\/span>,<\/span> flexDirection<\/span>:<\/span> '<\/span>column<\/span>'<\/span>,<\/span> justifyContent<\/span>:<\/span> '<\/span>center<\/span>'<\/span>,<\/span> padding<\/span>:<\/span> 20<\/span> },<\/span>\r\n  todo<\/span>:<\/span> {<\/span>  marginBottom<\/span>:<\/span> 15<\/span> },<\/span>\r\n  input<\/span>:<\/span> {<\/span> border<\/span>:<\/span> '<\/span>none<\/span>'<\/span>,<\/span> backgroundColor<\/span>:<\/span> '<\/span>#ddd<\/span>'<\/span>,<\/span> marginBottom<\/span>:<\/span> 10<\/span>,<\/span> padding<\/span>:<\/span> 8<\/span>,<\/span> fontSize<\/span>:<\/span> 18<\/span> },<\/span>\r\n  todoName<\/span>:<\/span> {<\/span> fontSize<\/span>:<\/span> 20<\/span>,<\/span> fontWeight<\/span>:<\/span> '<\/span>bold<\/span>'<\/span> },<\/span>\r\n  todoDescription<\/span>:<\/span> {<\/span> marginBottom<\/span>:<\/span> 0<\/span> },<\/span>\r\n  button<\/span>:<\/span> {<\/span> backgroundColor<\/span>:<\/span> '<\/span>black<\/span>'<\/span>,<\/span> color<\/span>:<\/span> '<\/span>white<\/span>'<\/span>,<\/span> outline<\/span>:<\/span> '<\/span>none<\/span>'<\/span>,<\/span> fontSize<\/span>:<\/span> 18<\/span>,<\/span> padding<\/span>:<\/span> '<\/span>12px 0px<\/span>'<\/span> }<\/span>\r\n}<\/span>\r\n\r\nexport<\/span> default<\/span> withAuthenticator<\/span>(<\/span>App<\/span>)<\/span>\r\n<\/code><\/pre>\n
            \u5728\u672c\u5730\u8fdb\u884c\u786e\u8ba4<\/p>\n
            $ npm start\r\n<\/code><\/pre>\n
            \"\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8<\/div>\n
            11. \u90e8\u7f72App\u3002<\/h2>\n
            \u90e8\u7f72\u5e94\u7528\u7a0b\u5e8f
            \n\u6309\u7167\u9ed8\u8ba4\u8bbe\u7f6e\u76f4\u63a5\u70b9\u51fbEnter<\/p>\n
            $ <\/span>amplify add hosting\r\n? Select the plugin module to execute Hosting with Amplify Console (<\/span>Managed hosting with custom domains, Continuous deployment)<\/span>\r\n? Choose a type <\/span>Manual deployment\r\n\r\nYou can now publish your app using the following command<\/span>:\r\n\r\nCommand: amplify publish\r\n<\/code><\/pre>\n
            12. \u53d1\u5e03\u5e94\u7528\u7a0b\u5e8f<\/h2>\n
            \u53d1\u5e03\u5e94\u7528\u7a0b\u5e8f<\/p>\n
            $ amplify publish\r\n~~\u7701\u7565~~\r\nZipping artifacts completed.\r\nDeployment complete!\r\nhttps:\/\/dev.dxlXXXX.amplifyapp.com\r\n<\/code><\/pre>\n
            \"\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8<\/div>\n
            \u653e\u5927\u63a7\u5236\u53f0<\/h1>\n
            \"\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8<\/div>\n
            \u8d44\u6e90\u6e05\u7406<\/h1>\n
            $ <\/span>amplify delete\r\n$ <\/span>amplify status\r\n<\/code><\/pre>\n
            \u6700\u540e<\/h1>\n
              \n
            • \n
                Cloudformation\u3067\u30a4\u30f3\u30d5\u30e9\u306e\u30b3\u30fc\u30c9\u3092\u4f5c\u6210\u3059\u308b\u3059\u308b\u306e\u306b\u6bd4\u3079\u3001\u6e96\u5099\u3059\u308b\u30b3\u30fc\u30c9\u91cf\u304c\u5c11\u306a\u304f\u4f7f\u3044\u3084\u3059\u3044\u3068\u611f\u3058\u305f<\/ul>\n<\/li>\n<\/ul>\n
                 <\/p>\n
                  \n
                • \n
                    \u8a8d\u8a3c\u5468\u308a\u306a\u3069\u7d30\u304b\u3044\u8a2d\u5b9a\u304c\u3069\u3053\u307e\u3067\u3067\u304d\u308b\u304b\u306f\u307e\u3060\u5206\u304b\u3089\u306a\u3044<\/ul>\n<\/li>\n<\/ul>\n
                     <\/p>\n
                      \n
                    • \n
                        \u6b21\u306fAWS Amplify \u3092\u4f7f\u3063\u3066\u7d99\u7d9a\u7684\u30c7\u30d7\u30ed\u30a4\u30e1\u30f3\u30c8\u74b0\u5883\u3092\u4f5c\u308d\u3046\u3068\u601d\u3046<\/ul>\n<\/li>\n<\/ul>\n
                        https:\/\/docs.aws.amazon.com\/amplify\/latest\/userguide\/multi-environments.html#standard<\/p>\n
                        \u8bf7\u6309\u7167\u4e0b\u9762\u7684\u5185\u5bb9\u7b80\u8ff0\u51fa\u4e00\u4efd\u4e2d\u6587\u7684\u540c\u4e49\u53e5\uff1a<\/h2>\n
                        \u6bd4\u8d5b\u5b8c\u6574\u7684\u7ed3\u679c\u53ef\u4ee5\u770b\u4f5c\u662f\u5bf9\u7403\u961f\u5b9e\u529b\u7684\u4e00\u4e2a\u5f88\u597d\u7684\u53c2\u8003\u3002<\/p>\n
                          \n
                        • \n
                            https:\/\/docs.amplify.aws\/start\/getting-started\/installation\/q\/integration\/react\/#option-1-watch-the-video-guide<\/ul>\n<\/li>\n<\/ul>\n
                             <\/p>\n
                              \n
                            • \n
                                https:\/\/github.com\/facebook\/create-react-app\/issues\/10601<\/ul>\n<\/li>\n<\/ul>\n
                                 <\/p>\n
                                  \n
                                • \n
                                    https:\/\/dev.classmethod.jp\/articles\/react-amplify-appsync-dynamodb-tutorial\/<\/ul>\n<\/li>\n<\/ul>\n
                                     <\/p>\n
                                      https:\/\/docs.aws.amazon.com\/amplify\/latest\/userguide\/multi-environments.html#standard<\/ul>\n","protected":false},"excerpt":{"rendered":"
                                      \u9996\u5148\/\u8d77\u521d \u6211\u5728AWS Amplify\u627e\u5230\u4e86\u4e00\u4e2a\u7b80\u5355\u7684\u6559\u7a0b\uff0c\u6240\u4ee5\u6211\u5c1d\u8bd5\u505a\u4e86\u4e00\u4e0b\u3002 \u6211\u4eec\u5c06\u4f7f\u7528React + A […]<\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-48113","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"\n\u5c1d\u8bd5\u5b8c\u6210 AWS Amplify \u7684 React \u6559\u7a0b - Blog - Silicon Cloud<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.silicloud.com\/zh\/blog\/\u5c1d\u8bd5\u5b8c\u6210-aws-amplify-\u7684-react-\u6559\u7a0b\u3002\/\" \/>\n<meta property=\"og:locale\" content=\"zh_CN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u5c1d\u8bd5\u5b8c\u6210 AWS Amplify \u7684 React \u6559\u7a0b\" \/>\n<meta property=\"og:description\" content=\"\u9996\u5148\/\u8d77\u521d \u6211\u5728AWS Amplify\u627e\u5230\u4e86\u4e00\u4e2a\u7b80\u5355\u7684\u6559\u7a0b\uff0c\u6240\u4ee5\u6211\u5c1d\u8bd5\u505a\u4e86\u4e00\u4e0b\u3002 \u6211\u4eec\u5c06\u4f7f\u7528React + A […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/zh\/blog\/\u5c1d\u8bd5\u5b8c\u6210-aws-amplify-\u7684-react-\u6559\u7a0b\u3002\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog - Silicon Cloud\" \/>\n<meta property=\"article:published_time\" content=\"2023-07-26T05:04:09+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-30T06:28:17+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d8374913a08637a6b372a\/3-0.png\" \/>\n<meta name=\"author\" content=\"\u79d1, \u96c5\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u4f5c\u8005\" \/>\n\t<meta name=\"twitter:data1\" content=\"\u79d1, \u96c5\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 \u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e5%b0%9d%e8%af%95%e5%ae%8c%e6%88%90-aws-amplify-%e7%9a%84-react-%e6%95%99%e7%a8%8b%e3%80%82\/\",\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e5%b0%9d%e8%af%95%e5%ae%8c%e6%88%90-aws-amplify-%e7%9a%84-react-%e6%95%99%e7%a8%8b%e3%80%82\/\",\"name\":\"\u5c1d\u8bd5\u5b8c\u6210 AWS Amplify \u7684 React \u6559\u7a0b - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#website\"},\"datePublished\":\"2023-07-26T05:04:09+00:00\",\"dateModified\":\"2024-04-30T06:28:17+00:00\",\"author\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/41e222757cdd2a3365361328bd79970a\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e5%b0%9d%e8%af%95%e5%ae%8c%e6%88%90-aws-amplify-%e7%9a%84-react-%e6%95%99%e7%a8%8b%e3%80%82\/#breadcrumb\"},\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/zh\/blog\/%e5%b0%9d%e8%af%95%e5%ae%8c%e6%88%90-aws-amplify-%e7%9a%84-react-%e6%95%99%e7%a8%8b%e3%80%82\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e5%b0%9d%e8%af%95%e5%ae%8c%e6%88%90-aws-amplify-%e7%9a%84-react-%e6%95%99%e7%a8%8b%e3%80%82\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"https:\/\/www.silicloud.com\/zh\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u5c1d\u8bd5\u5b8c\u6210 AWS Amplify \u7684 React \u6559\u7a0b\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#website\",\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/\",\"name\":\"Blog - Silicon Cloud\",\"description\":\"\",\"inLanguage\":\"zh-Hans\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/41e222757cdd2a3365361328bd79970a\",\"name\":\"\u79d1, \u96c5\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/1b2d3e00a7df03689797ebd4af8c5827ba5af936849a71050ec331f4cf902c5d?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/1b2d3e00a7df03689797ebd4af8c5827ba5af936849a71050ec331f4cf902c5d?s=96&d=mm&r=g\",\"caption\":\"\u79d1, \u96c5\"},\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/author\/keya\/\"},{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e5%b0%9d%e8%af%95%e5%ae%8c%e6%88%90-aws-amplify-%e7%9a%84-react-%e6%95%99%e7%a8%8b%e3%80%82\/#local-main-organization-logo\",\"url\":\"\",\"contentUrl\":\"\",\"caption\":\"Blog - Silicon Cloud\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"\u5c1d\u8bd5\u5b8c\u6210 AWS Amplify \u7684 React \u6559\u7a0b - Blog - Silicon Cloud","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.silicloud.com\/zh\/blog\/\u5c1d\u8bd5\u5b8c\u6210-aws-amplify-\u7684-react-\u6559\u7a0b\u3002\/","og_locale":"zh_CN","og_type":"article","og_title":"\u5c1d\u8bd5\u5b8c\u6210 AWS Amplify \u7684 React \u6559\u7a0b","og_description":"\u9996\u5148\/\u8d77\u521d \u6211\u5728AWS Amplify\u627e\u5230\u4e86\u4e00\u4e2a\u7b80\u5355\u7684\u6559\u7a0b\uff0c\u6240\u4ee5\u6211\u5c1d\u8bd5\u505a\u4e86\u4e00\u4e0b\u3002 \u6211\u4eec\u5c06\u4f7f\u7528React + A […]","og_url":"https:\/\/www.silicloud.com\/zh\/blog\/\u5c1d\u8bd5\u5b8c\u6210-aws-amplify-\u7684-react-\u6559\u7a0b\u3002\/","og_site_name":"Blog - Silicon Cloud","article_published_time":"2023-07-26T05:04:09+00:00","article_modified_time":"2024-04-30T06:28:17+00:00","og_image":[{"url":"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d8374913a08637a6b372a\/3-0.png"}],"author":"\u79d1, \u96c5","twitter_card":"summary_large_image","twitter_misc":{"\u4f5c\u8005":"\u79d1, \u96c5","\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4":"8 \u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e5%b0%9d%e8%af%95%e5%ae%8c%e6%88%90-aws-amplify-%e7%9a%84-react-%e6%95%99%e7%a8%8b%e3%80%82\/","url":"https:\/\/www.silicloud.com\/zh\/blog\/%e5%b0%9d%e8%af%95%e5%ae%8c%e6%88%90-aws-amplify-%e7%9a%84-react-%e6%95%99%e7%a8%8b%e3%80%82\/","name":"\u5c1d\u8bd5\u5b8c\u6210 AWS Amplify \u7684 React \u6559\u7a0b - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/#website"},"datePublished":"2023-07-26T05:04:09+00:00","dateModified":"2024-04-30T06:28:17+00:00","author":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/41e222757cdd2a3365361328bd79970a"},"breadcrumb":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e5%b0%9d%e8%af%95%e5%ae%8c%e6%88%90-aws-amplify-%e7%9a%84-react-%e6%95%99%e7%a8%8b%e3%80%82\/#breadcrumb"},"inLanguage":"zh-Hans","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/zh\/blog\/%e5%b0%9d%e8%af%95%e5%ae%8c%e6%88%90-aws-amplify-%e7%9a%84-react-%e6%95%99%e7%a8%8b%e3%80%82\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e5%b0%9d%e8%af%95%e5%ae%8c%e6%88%90-aws-amplify-%e7%9a%84-react-%e6%95%99%e7%a8%8b%e3%80%82\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"https:\/\/www.silicloud.com\/zh\/blog\/"},{"@type":"ListItem","position":2,"name":"\u5c1d\u8bd5\u5b8c\u6210 AWS Amplify \u7684 React \u6559\u7a0b"}]},{"@type":"WebSite","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#website","url":"https:\/\/www.silicloud.com\/zh\/blog\/","name":"Blog - Silicon Cloud","description":"","inLanguage":"zh-Hans"},{"@type":"Person","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/41e222757cdd2a3365361328bd79970a","name":"\u79d1, \u96c5","image":{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/1b2d3e00a7df03689797ebd4af8c5827ba5af936849a71050ec331f4cf902c5d?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/1b2d3e00a7df03689797ebd4af8c5827ba5af936849a71050ec331f4cf902c5d?s=96&d=mm&r=g","caption":"\u79d1, \u96c5"},"url":"https:\/\/www.silicloud.com\/zh\/blog\/author\/keya\/"},{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e5%b0%9d%e8%af%95%e5%ae%8c%e6%88%90-aws-amplify-%e7%9a%84-react-%e6%95%99%e7%a8%8b%e3%80%82\/#local-main-organization-logo","url":"","contentUrl":"","caption":"Blog - Silicon Cloud"}]}},"_links":{"self":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/48113","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/comments?post=48113"}],"version-history":[{"count":2,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/48113\/revisions"}],"predecessor-version":[{"id":92458,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/48113\/revisions\/92458"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/media?parent=48113"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/categories?post=48113"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/tags?post=48113"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}