You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/content/learn/add-react-to-an-existing-project.md
+35-35
Original file line number
Diff line number
Diff line change
@@ -1,59 +1,59 @@
1
1
---
2
-
title: Add React to an Existing Project
2
+
title: 既存プロジェクトに React を追加する
3
3
---
4
4
5
5
<Intro>
6
6
7
-
If you want to add some interactivity to your existing project, you don't have to rewrite it in React. Add React to your existing stack, and render interactive React components anywhere.
**You need to install [Node.js](https://nodejs.org/en/)for local development.**Although you can [try React](/learn/installation#try-react) online or with a simple HTML page, realistically most JavaScript tooling you'll want to use for development requires Node.js.
13
+
**ローカル環境で開発するには [Node.js](https://nodejs.org/en/)をインストールする必要があります。**React を[オンライン](/learn/installation#try-react)や単純な HTML ページで試すことも可能ですが、現実的には開発時に利用する大抵の JavaScript ツールには Node.js が必要です。
14
14
15
15
</Note>
16
16
17
-
## Using React for an entire subroute of your existing website {/*using-react-for-an-entire-subroute-of-your-existing-website*/}
Let's say you have an existing web app at `example.com`built with another server technology (like Rails), and you want to implement all routes starting with `example.com/some-app/`fully with React.
1.**Build the React part of your app** using one of the [React-based frameworks](/learn/start-a-new-react-project).
24
-
2.**Specify`/some-app`as the *base path*** in your framework's configuration (here's how: [Next.js](https://nextjs.org/docs/api-reference/next.config.js/basepath), [Gatsby](https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting/path-prefix/)).
25
-
3.**Configure your server or a proxy** so that all requests under `/some-app/`are handled by your React app.
This ensures the React part of your app can [benefit from the best practices](/learn/start-a-new-react-project#can-i-use-react-without-a-framework) baked into those frameworks.
Many React-based frameworks are full-stack and let your React app take advantage of the server. However, you can use the same approach even if you can't or don't want to run JavaScript on the server. In that case, serve the HTML/CSS/JS export ([`next export`output](https://nextjs.org/docs/advanced-features/static-html-export) for Next.js, default for Gatsby) at`/some-app/` instead.
Let's say you have an existing page built with another technology (either a server one like Rails, or a client one like Backbone), and you want to render interactive React components somewhere on that page. That's a common way to integrate React--in fact, it's how most React usage looked at Meta for many years!
1.**Set up a JavaScript environment** that lets you use the [JSX syntax](/learn/writing-markup-with-jsx), split your code into modules with the [`import`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) / [`export`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export)syntax, and use packages (for example, React) from the [npm](https://www.npmjs.com/)package registry.
38
-
2.**Render your React components** where you want to see them on the page.
A modular JavaScript environment lets you write your React components in individual files, as opposed to writing all of your code in a single file. It also lets you use all the wonderful packages published by other developers on the [npm](https://www.npmjs.com/)registry--including React itself! How you do this depends on your existing setup:
***If your app is already split into files that use `import`statements,** try to use the setup you already have. Check whether writing `<div />`in your JS code causes a syntax error. If it causes a syntax error, you might need to [transform your JavaScript code with Babel](https://babeljs.io/setup), and enable the [Babel React preset](https://babeljs.io/docs/babel-preset-react)to use JSX.
***If your app doesn't have an existing setup for compiling JavaScript modules,** set it up with [Vite](https://vitejs.dev/). The Vite community maintains [many integrations with backend frameworks](https://github.com/vitejs/awesome-vite#integrations-with-backends), including Rails, Django, and Laravel. If your backend framework is not listed, [follow this guide](https://vitejs.dev/guide/backend-integration.html) to manually integrate Vite builds with your backend.
48
+
***JavaScript モジュールをコンパイルする既存のセットアップがない場合**は、[Vite](https://vitejs.dev/) を使ってセットアップします。Vite コミュニティは、Rails、Django、Laravel をはじめ、[多くのバックエンドフレームワークとのインテグレーション](https://github.com/vitejs/awesome-vite#integrations-with-backends)をメンテナンスしています。あなたのバックエンドフレームワークがリストされていない場合は、[このガイドに従って](https://vitejs.dev/guide/backend-integration.html)手動で Vite ビルドをバックエンドと統合してください。
49
49
50
-
To check whether your setup works, run this command in your project folder:
Integrating a modular JavaScript environment into an existing project for the first time can feel intimidating, but it's worth it! If you get stuck, try our [community resources](/community) or the [Vite Chat](https://chat.vitejs.dev/).
Of course, you don't actually want to clear the existing HTML content!
106
+
もちろん、実際には既存の HTML コンテンツを削除したい訳ではありません！
107
107
108
-
Delete this code.
108
+
なので上記のコードは削除してください。
109
109
110
-
Instead, you probably want to render your React components in specific places in your HTML. Open your HTML page (or the server templates that generate it) and add a unique [`id`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id)attribute to any tag, for example:
110
+
代わりに、あなたの HTML 内の特定の場所に React コンポーネントをレンダーしたいはずです。HTML ページ（またはそれを生成しているサーバテンプレート）を開き、次のようにして、任意のタグに一意の [`id`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id)属性を追加します：
111
111
112
112
```html
113
113
<!-- ... somewhere in your html ... -->
114
114
<navid="navigation"></nav>
115
115
<!-- ... more html ... -->
116
116
```
117
117
118
-
This lets you find that HTML element with [`document.getElementById`](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById)and pass it to [`createRoot`](/reference/react-dom/client/createRoot)so that you can render your own React component inside:
118
+
これにより、[`document.getElementById`](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById)で HTML 要素を検索して [`createRoot`](/reference/react-dom/client/createRoot)に渡すことができ、その内部にあなたの React コンポーネントをレンダーできるようになります：
Notice how the original HTML content from `index.html`is preserved, but your own `NavigationBar` React component now appears inside the `<nav id="navigation">`from your HTML. Read the [`createRoot`usage documentation](/reference/react-dom/client/createRoot#rendering-a-page-partially-built-with-react)to learn more about rendering React components inside an existing HTML page.
149
+
`index.html`にあるオリジナルの HTML コンテンツはそのままに、自分の `NavigationBar`という React コンポーネントが、HTML の `<nav id="navigation">`内に表示されるようになりました。React コンポーネントを既存の HTML ページの内部にレンダーする方法の詳細については、[`createRoot`使用方法のドキュメント](/reference/react-dom/client/createRoot#rendering-a-page-partially-built-with-react)を参照してください。
150
150
151
-
When you adopt React in an existing project, it's common to start with small interactive components (like buttons), and then gradually keep "moving upwards" until eventually your entire page is built with React. If you ever reach that point, we recommend migrating to [a React framework](/learn/start-a-new-react-project) right after to get the most out of React.
[React Native](https://reactnative.dev/)can also be integrated into existing native apps incrementally. If you have an existing native app for Android (Java or Kotlin) or iOS (Objective-C or Swift), [follow this guide](https://reactnative.dev/docs/integration-with-existing-apps) to add a React Native screen to it.
0 commit comments