d457201862
Full list of changes is at https://jekyllrb.com/docs/upgrading/2-to-3/. The tl;dr of it is: - Relative permalinks were removed, so all the files in the `docs` subdirectory need their permalink to be prefixed with `docs/` - `post` and `page` types were renamed to `posts` and `pages` respectively - `jekyll-paginate`, `pygments` and `redcarpet` are all now optional, so I needed to explicitly add it to the Gemfile. Jekyll now uses `rouge` rather than `pygments` for syntax highlighting, but rouge does not support highlighting individual lines (`hl_lines`) so we need to continue using Pygments. - Layout metadata (eg. `sectionid`) is now on a `layout` variable rather than `page` Tested the following pages and confirmed that they all work: - "Docs" link (getting started page): http://127.0.0.1:4000/react/docs/getting-started.html - Downloads: http://127.0.0.1:4000/react/downloads.html - Tutorial: http://127.0.0.1:4000/react/docs/tutorial.html - A few pages under the "docs" subdirectory, to confirm they're working properly: - http://127.0.0.1:4000/react/docs/addons.html - http://127.0.0.1:4000/react/docs/why-react.html - http://127.0.0.1:4000/react/docs/create-fragment.html - A few tips: - http://127.0.0.1:4000/react/tips/false-in-jsx.html - http://127.0.0.1:4000/react/tips/style-props-value-px.html - Non-English versions of the page: - http://127.0.0.1:4000/react/docs/getting-started-it-IT.html - http://127.0.0.1:4000/react/docs/getting-started-ja-JP.html
3.7 KiB
id, title, permalink, next, redirect_from
| id | title | permalink | next | redirect_from |
|---|---|---|---|---|
| getting-started-it-IT | Primi Passi | docs/getting-started-it-IT.html | tutorial-it-IT.html | docs/index.html |
JSFiddle
La maniera più semplice di cominciare ad hackerare con React è usare i seguenti esempi di Hello World su JSFiddle:
Starter Kit
Scarica lo starter kit per cominciare.
Nella directory principale dello starter kit, crea helloworld.html con il seguente contenuto.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Ciao React!</title>
<script src="build/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Cial, mondo!</h1>,
document.getElementById('example')
);
</script>
</body>
</html>
La sintassi XML all'interno di JavaScript è chiamata JSX; dài un'occhiata alla sintassi JSX per saperne di più. Allo scopo di tradurla in puro JavaScript usiamo <script type="text/babel"> e includiamo Babel per effettuare la trasformazione effettiva nel browser.
File Separato
Il tuo codice React JSX può trovarsi in un file a parte. Crea il seguente src/helloworld.js.
ReactDOM.render(
<h1>Ciao, mondo!</h1>,
document.getElementById('example')
);
Quindi fai riferimento ad esso da helloworld.html:
<script type="text/babel" src="src/helloworld.js"></script>
Nota che in alcuni browsers (Chrome, ad esempio) falliranno nel caricamento del file a meno che non sia servito tramite HTTP.
Trasformazione Offline
Anzitutto installa gli strumenti da riga di comando di Babel (è richiesto npm):
npm install --global babel
Quindi, traduci il tuo file src/helloworld.js a semplice JavaScript:
babel src --watch --out-dir build
Il file build/helloworld.js è generato automaticamente ogni qualvolta effettui un cambiamento. Leggi la documentazione di Babel CLI per un uso più avanzato.
ReactDOM.render(
React.createElement('h1', null, 'Ciao, mondo!'),
document.getElementById('example')
);
Aggiorna il tuo file HTML come segue:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Ciao React!</title>
<script src="build/react.js"></script>
<!-- Non c'è bisogno di Babel! -->
</head>
<body>
<div id="example"></div>
<script src="build/helloworld.js"></script>
</body>
</html>
Vuoi CommonJS?
Se vuoi usare React con browserify, webpack, o un altro sistema modulare compatibile con CommonJS, usa il pacchetto npm react. In aggiunta, lo strumento di build jsx può essere integrato in quasi tutti i sistemi di packaging (non soltanto CommonJS) assai facilmente.
Passi Successivi
Dài un'occhiata al tutorial e agli altri esempi nella directory examples dello starter kit per saperne di più.
Abbiamo anche un wiki al quale la comunità contribuisce con flussi di lavoro, componenti UI, routing, gestione dati etc.
In bocca al lupo, e benvenuto/a!