{"componentChunkName":"component---src-pages-index-js","path":"/","result":{"data":{"codeExamples":{"edges":[{"node":{"id":"a-component-using-external-plugins","code":"class MarkdownEditor extends React.Component {\n constructor(props) {\n super(props);\n this.md = new Remarkable();\n this.handleChange = this.handleChange.bind(this);\n this.state = { value: 'Ciao, **mondo**!' };\n }\n\n handleChange(e) {\n this.setState({ value: e.target.value });\n }\n\n getRawMarkup() {\n return { __html: this.md.render(this.state.value) };\n }\n\n render() {\n return (\n
\n

Input

\n \n \n

Output

\n \n
\n );\n }\n}\n\nroot.render();\n","mdAbsolutePath":"/vercel/path0/content/home/examples/a-component-using-external-plugins.md"}},{"node":{"id":"a-simple-component","code":"class HelloMessage extends React.Component {\n render() {\n return
Ciao {this.props.name}
;\n }\n}\n\nroot.render();\n","mdAbsolutePath":"/vercel/path0/content/home/examples/a-simple-component.md"}},{"node":{"id":"a-stateful-component","code":"class Timer extends React.Component {\n constructor(props) {\n super(props);\n this.state = { seconds: 0 };\n }\n\n tick() {\n this.setState(state => ({\n seconds: state.seconds + 1\n }));\n }\n\n componentDidMount() {\n this.interval = setInterval(() => this.tick(), 1000);\n }\n\n componentWillUnmount() {\n clearInterval(this.interval);\n }\n\n render() {\n return (\n
\n Secondi: {this.state.seconds}\n
\n );\n }\n}\n\nroot.render();\n","mdAbsolutePath":"/vercel/path0/content/home/examples/a-stateful-component.md"}},{"node":{"id":"an-application","code":"class TodoApp extends React.Component {\n constructor(props) {\n super(props);\n this.state = { items: [], text: '' };\n this.handleChange = this.handleChange.bind(this);\n this.handleSubmit = this.handleSubmit.bind(this);\n }\n\n render() {\n return (\n
\n

TODO

\n \n
\n \n \n \n \n
\n );\n }\n\n handleChange(e) {\n this.setState({ text: e.target.value });\n }\n\n handleSubmit(e) {\n e.preventDefault();\n if (this.state.text.length === 0) {\n return;\n }\n const newItem = {\n text: this.state.text,\n id: Date.now()\n };\n this.setState(state => ({\n items: state.items.concat(newItem),\n text: ''\n }));\n }\n}\n\nclass TodoList extends React.Component {\n render() {\n return (\n
    \n {this.props.items.map(item => (\n
  • {item.text}
    • \n ))}\n
\n );\n }\n}\n\nroot.render();\n","mdAbsolutePath":"/vercel/path0/content/home/examples/an-application.md"}}]},"examples":{"edges":[{"node":{"fileAbsolutePath":"/vercel/path0/content/home/examples/a-simple-component.md","fields":{"slug":"/home/examples/a-simple-component.html"},"frontmatter":{"title":"Un Componente Semplice","domid":"hello-example"},"html":"

I componenti React implementano un metodo render() che riceve dati in input e ritorna cosa deve visualizzare. Questo esempio usa una sintassi simile ad XML chiamata JSX. I dati passati in input al componente possono essere acceduti da render() via this.props.

\n

JSX è opzionale e non richiesto per utilizzare React. Prova il tool Babel REPL per vedere il codice JavaScript grezzo generato nel processo di compilazione JSX.

"}},{"node":{"fileAbsolutePath":"/vercel/path0/content/home/examples/a-stateful-component.md","fields":{"slug":"/home/examples/a-stateful-component.html"},"frontmatter":{"title":"Un Componente Stateful","domid":"timer-example"},"html":"

Oltre a ricevere dati in input (accessibili via this.props), un componente può mantenere i dati del suo stato interno (accessibili via this.state). Quando lo stato di un componente cambia, il codice markup generato viene aggiornato invocando di nuovo render(), ciò avviene automaticamente.

"}},{"node":{"fileAbsolutePath":"/vercel/path0/content/home/examples/an-application.md","fields":{"slug":"/home/examples/an-application.html"},"frontmatter":{"title":"Una Applicazione","domid":"todos-example"},"html":"

Usando props e state, possiamo costruire una piccola applicazione Todo (lista delle cose da fare). Questo esempio usa state per tracciare la lista corrente degli elementi oltre a cosa ha inserito l’utente. Anche se gli event handlers sembrano renderizzati inline, essi vengono raccolti ed implementati mediante delegati.

"}},{"node":{"fileAbsolutePath":"/vercel/path0/content/home/examples/a-component-using-external-plugins.md","fields":{"slug":"/home/examples/a-component-using-external-plugins.html"},"frontmatter":{"title":"Un Componente con Plugin Esterni","domid":"markdown-example"},"html":"

React ti permette di interfacciarti con altre librerie e frameworks. Questo esempio usa remarkable, una libreria esterna Markdown, per convertire il contenuto di una <textarea> in tempo reale.

"}}]},"marketing":{"edges":[{"node":{"frontmatter":{"title":"Dichiarativo"},"html":"

React rende la creazione di UI interattive facile e indolore. Progetta interfacce per ogni stato della tua applicazione. Ad ogni cambio di stato React aggiornerà efficientemente solamente le parti della UI che dipendono da tali dati.

\n

La natura dichiarativa dell’UI rende il tuo codice più prevedibile e facile da debuggare.

"}},{"node":{"frontmatter":{"title":"Componenti"},"html":"

Crea componenti in isolamento e componili per creare UI complesse.

\n

Dato che interazioni e logica per i componenti sono implementate in JavaScript puoi facilmente passare ed accedere strutture dati complesse in vari punti della tua applicazione senza dover salvare informazioni sul DOM.

"}},{"node":{"frontmatter":{"title":"Imparalo una volta, usalo ovunque"},"html":"

Non facciamo supposizioni sulle tecnologie che utilizzi correntemente. In questo modo puoi sviluppare nuove funzionalità in React senza riscrivere codice esistente.

\n

React può inoltre effettuare rendering lato server con Node e in applicazioni mobile grazie a React Native.

"}}]}},"pageContext":{}},"staticQueryHashes":[]}