Skip to content

Translated "Add React to an existing project" page content; fixed TOC's heading & sidebar #425

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Apr 27, 2023
Merged

Translated "Add React to an existing project" page content; fixed TOC's heading & sidebar #425

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1cd34c9
Translated page content; fixed TOC heading & sidebar
Th3Wall Apr 27, 2023
30ee848
Apply suggestions from code review
Th3Wall Apr 27, 2023
26ada2a
Reviewed PR comments
Th3Wall Apr 27, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Reviewed PR comments
  • Loading branch information
@Th3Wall
Th3Wall committed Apr 27, 2023
commit 26ada2ad94ed46ea0398a24b50157936ddb702ac
18 changes: 9 additions & 9 deletions src/content/learn/add-react-to-an-existing-project.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ Se vuoi aggiungere della interattività al tuo progetto esistente, non serve che

<Note>

**È necessario installare [Node.js](https://nodejs.org/en/) per lo sviluppo locale.** Sebbene tu possa [provare React](/learn/installation#try-react) online o con una semplice pagina HTML, realisticamente la maggior parte degli strumenti JavaScript che vorrai utilizzare per lo sviluppo richiedono Node.js.
**È necessario installare [Node.js](https://nodejs.org/it/) per lo sviluppo locale.** Sebbene tu possa [provare React](/learn/installation#try-react) online o con una semplice pagina HTML, realisticamente la maggior parte degli strumenti JavaScript che vorrai utilizzare per lo sviluppo richiedono Node.js.

</Note>

Expand Down Expand Up @@ -62,18 +62,18 @@ Poi aggiungi queste linee di codice in cima al tuo file JavaScript principale (p
<html>
<head><title>My app</title></head>
<body>
<!-- Your existing page content (in this example, it gets replaced) -->
<!-- Il contenuto esistente della tua pagina (in questo esempio viene sostituito) -->
</body>
</html>
```

```js index.js active
import { createRoot } from 'react-dom/client';

// Clear the existing HTML content
// Pulisci il contenuto HTML esistente
document.body.innerHTML = '<div id="app"></div>';

// Render your React component instead
// Sostituiscilo renderizzando il tuo componente React
const root = createRoot(document.getElementById('app'));
root.render(<h1>Hello, world</h1>);
```
Expand All @@ -95,10 +95,10 @@ Nello step precedente, hai inserito questo codice all'inizio del tuo file princi
```js
import { createRoot } from 'react-dom/client';

// Clear the existing HTML content
// Pulisci il contenuto HTML esistente
document.body.innerHTML = '<div id="app"></div>';

// Render your React component instead
// Sostituiscilo renderizzando il tuo componente React
const root = createRoot(document.getElementById('app'));
root.render(<h1>Hello, world</h1>);
```
Expand All @@ -110,9 +110,9 @@ Cancella questo codice.
Invece, probabilmente vorrai renderizzare i tuoi componenti React in punti specifici del tuo codice HTML. Apri la tua pagina HTML (oppure i template server che la generano) ed aggiungi un attributo [`id`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id) univoco ad un qualsiasi tag, per esempio:

```html
<!-- ... somewhere in your html ... -->
<!-- ... da qualche parte nel tuo html ... -->
<nav id="navigation"></nav>
<!-- ... more html ... -->
<!-- ... altro html ... -->
```

Questo ti permette di trovare quell'elemento HTML tramite [`document.getElementById`](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById) e di passarlo al metodo [`createRoot`](/reference/react-dom/client/createRoot) così da poter renderizzare il tuo componente React al suo interno:
Expand All @@ -135,7 +135,7 @@ Questo ti permette di trovare quell'elemento HTML tramite [`document.getElementB
import { createRoot } from 'react-dom/client';

function NavigationBar() {
// TODO: Actually implement a navigation bar
// TODO: Implementa una vera barra di navigazione
return <h1>Hello from React!</h1>;
}

Expand Down
2 changes: 1 addition & 1 deletion src/sidebarLearn.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@
"path": "/learn/start-a-new-react-project"
},
{
"title": "Aggiungere React ad un progetto esistente",
"title": "Aggiungere React ad un Progetto Esistente",
"path": "/learn/add-react-to-an-existing-project"
},
{
Expand Down