Declarativo
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.
Views declarativas fazem com que seu código seja mais previsível e simples de depurar.
Baseado em componentes
Crie componentes encapsulados que gerenciam seu próprio estado e então, combine-os para criar UIs complexas.
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.
Aprenda uma vez, use em qualquer lugar
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.
O React também pode ser renderizado no servidor, usando Node, e ser usado para criar aplicações mobile, através do React Native.
Um Componente Simples
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.
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.
Carregando o exemplo de código...
Um Componente com Estado (stateful component)
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.
Carregando o exemplo de código...
Uma Aplicação
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).
Carregando o exemplo de código...
Um Componente Usando Plugins Externos
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.