{"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: 'Olá, **mundo**!' };\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

Entrada

\n \n \n

Saída

\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
Hello {this.props.name}
;\n }\n}\n\nroot.render();\n","mdAbsolutePath":"/vercel/path0/content/home/examples/a-simple-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

Tarefas

\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 );\n }\n}\n\nroot.render();\n","mdAbsolutePath":"/vercel/path0/content/home/examples/an-application.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 Segundos: {this.state.seconds}\n
\n );\n }\n}\n\nroot.render();\n","mdAbsolutePath":"/vercel/path0/content/home/examples/a-stateful-component.md"}}]},"examples":{"edges":[{"node":{"fileAbsolutePath":"/vercel/path0/content/home/examples/a-simple-component.md","fields":{"slug":"/home/examples/a-simple-component.html"},"frontmatter":{"title":"Um Componente Simples","domid":"hello-example"},"html":"

Os componentes do React implementam um método render() que recebe os dados de entrada e retornam o que deve ser exibido. Este exemplo usa uma sintaxe parecida com XML chamada JSX. Os dados de entrada que são passados para o componente podem ser acessados no render() via this.props.

\n

O JSX é opcional e não é necessário para usar o React. Teste o Babel REPL para ver o código JavaScript bruto produzido pela etapa de compilação do JSX.

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

Além de receber dados de entrada (acessados via this.props), um componente pode manter dados do state interno (acessados via this.state). Quando os dados do state de um componente são alterados, o código renderizado será atualizado invocando o método render() novamente.

"}},{"node":{"fileAbsolutePath":"/vercel/path0/content/home/examples/an-application.md","fields":{"slug":"/home/examples/an-application.html"},"frontmatter":{"title":"Uma Aplicação","domid":"todos-example"},"html":"

Usando props e state, nós podemos montar uma pequena aplicação de Lista de Tarefas. Este exemplo usa state para manter a lista atual de itens, bem como o texto que o usuário inseriu. Apesar de parecer que os event handlers são renderizados inline, eles serão coletados e implementados usando a delegação de eventos (event delegation).

"}},{"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":"Um Componente Usando Plugins Externos","domid":"markdown-example"},"html":"

O React é flexível e facilita a interface com outras bibliotecas e frameworks. Este exemplo usa remarkable, uma biblioteca externa de Markdown, para converter o valor de uma <textarea> em tempo real.

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

React faz com que a criação de UIs interativas seja uma tarefa fácil. Crie views simples para cada estado na sua aplicação, e o React irá atualizar e renderizar de forma eficiente apenas os componentes necessários na medida em que os dados mudam.

\n

Views declarativas fazem com que seu código seja mais previsível e simples de depurar.

"}},{"node":{"frontmatter":{"title":"Baseado em componentes"},"html":"

Crie componentes encapsulados que gerenciam seu próprio estado e então, combine-os para criar UIs complexas.

\n

Como a lógica do componente é escrita em JavaScript e não em templates, você pode facilmente passar diversos tipos de dados ao longo da sua aplicação e ainda manter o estado fora do DOM.

"}},{"node":{"frontmatter":{"title":"Aprenda uma vez, use em qualquer lugar"},"html":"

Não fazemos suposições sobre as outras tecnologias da sua stack, assim você pode desenvolver novos recursos com React sem reescrever o código existente.

\n

O React também pode ser renderizado no servidor, usando Node, e ser usado para criar aplicações mobile, através do React Native.

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