1. Introdução ao ReactJS
React é uma estrutura de desenvolvimento front-end muito popular recentemente. O React se originou dos projetos internos do Facebook, porque a empresa não estava satisfeita com todas as estruturas do JavaScript MVC no mercado, por isso decidiu escrever um conjunto para configurar um site do Instagram. Depois que consegui, descobri que esse conjunto de coisas era muito útil e foi aberto em maio de 2013. Como a ideia de design da React é extremamente única, é revolucionária e inovadora, com excelente desempenho, mas sua lógica de código é muito simples. Portanto, mais e mais pessoas estão começando a prestar atenção e usá -lo, acreditando que pode ser a ferramenta convencional para o futuro desenvolvimento da Web.
Endereço oficial do site ReactJS: http://facebook.github.io/react/
Endereço do Github: https://github.com/facebook/react
Reactjs Endereço chinês: http://reactjs.cn/react/docs/getting-started.html
O que é react?
O React é uma biblioteca JS desenvolvida por programadores excelentes que trabalham no Facebook para desenvolver interfaces de interação do usuário. Seu código -fonte é mantido por excelentes programadores do Facebook e da comunidade, por isso possui uma equipe técnica muito forte por trás dele para fornecer suporte técnico. O React traz muitas coisas novas, como componente, JSX, DOM virtual, etc. O DOM virtual que ele fornece torna nossos componentes de renderização muito rápido, libertando -nos do trabalho pesado de operar frequentemente o DOM. Qualquer pessoa que saiba a React sabe que se concentra mais na camada V no MVC. Combinado com outras coisas como o Flux, você pode facilmente criar aplicativos poderosos.
2. Recursos de reactjs
1. DOM virtual
Através do algoritmo DOM DIFF, apenas peças diferenciadas serão atualizadas sem renderizar a página inteira, melhorando assim a eficiência
2. Componente
Divida a página em vários componentes, incluindo estruturas e estilos lógicos
Os componentes contêm apenas sua própria lógica, que pode ser prevista ao atualizar componentes, que são propícios à manutenção.
A página divide vários componentes e pode ser reutilizada
3. Fluxo de dados unidirecional
Os dados são passados de componentes de nível superior para subcomponentes
Dados controláveis
3. Começando com o React. Escreva olá, mundo. Primeiro, vamos entender o que é JSX.
Um dos principais mecanismos do React é o Virtual DOM: elementos Virtual DOM que podem ser criados na memória. O React usa DOM virtual para reduzir as operações no DOM real e melhorar o desempenho. Semelhante ao DOM nativo real, o Virtual DOM também pode ser criado através do JavaScript, por exemplo:
var criança1 = react.createElement ('li', null, 'primeiro conteúdo de texto'); var criança2 = react.createElement ('li', nulo, 'segundo conteúdo de texto'); var root2 = react.createElement ('ul', {className: 'my-list'}, criança1, Child1, Child2); react.render (<div> {root2} </div>, document.getElementById ('contêiner5'));Usando esse mecanismo, podemos usar o JavaScript para criar uma árvore de interface completa, assim como podemos usar o JavaScript para criar DOMs reais. No entanto, esse código não é bem legível, então o React inventou o JSX e usou nossa sintaxe HTML familiar para criar um DOM virtual:
var root = (<Ul ClassName = "My-List"> <li> Primeiro conteúdo de texto </li> <li> Conteúdo do segundo texto </li> </ul>); react.render (<div> {root} </div>, document.getElementById ('container6');4. 5 maneiras de começar com o Hello in React
Método 1
<div id = "Exemplo1"> </div> <script type = "text/jsx"> react.render (// direto html <h1 classname = "classn1"> 1 Hellow Direct Html World </h1>, document.getElementById ('Exemplo1'); </script>Método 2
<div id = "Exemplo2"> </div> <script type = "text/jsx"> react.render (// crie elemento diretamente react.createElement ('h1', {className: 'Classn2'}, '2 hello, crie elemento diretamente mundial!Método 3
<div id = "Exemplo3"> </div> <script type = "text/jsx"> var createel = react.createClass ({render: function () {// retorna <h1> criação de componentes hellow html mundial </h1> // retorna ou sem suporte (h1 classname = 'classn3'> </h1>);}}); react.render (// Criar elemento <createel/>, // ou colchetes duplos <Steleel> </createel> document.getElementById ('exemplo3')); </script>Método 4
<div id="example4"></div> <script type="text/jsx">var JsxCreateEl=React.createClass({ // Create render in jsx mode directly:function(){return (React.createElement('h1', {className: "classN4"},"4 Hello, Create world in jsx mode directly! "))}}); React.render (// Criar elemento no método do componente react.createElement (jsxcreateel, null), document.getElementById ('exemplo4'); </script>Método 5
<div id = "Exemplo5"> </div> <script type = "text/jsx"> var hello = react.createclass ({// modelo hello render: function () {return (<pan> {this.Props.data} </span>}}}; var mundial = reencreat.crass.data {/span); Stitching </span>)}}); react.render (// cria elementos em 2 componentes de modelo <h1 classname = "classn5"> <hello data = '5 hello'/> <mundo/> </h1>, document.getElementById ('exemplo5');5. A imagem do resultado acima
Código anexado:
<! doctype html> <html> <head> <meta charset = "utf-8"> <title> unt Documento titulado </title> <meta name = "viewport" content = "scale inicial = 1,0, scalable = não, escala máxima = 1, largura = largura-depósito"/> </> </> </> </corpora </body> <body> preenchimento: 0;} corpo {background:#333;}#caixa {background: url (loveImg/qioa-fxehfqi8208393.jpg) no topo central de repetição; Largura: 550px; Border: 8px Solid #FFFF; -Webkit-box-sizing: Border-box; Margem: 50px automático;}#Exemplo1,#Exemplo2,#Exemplo3,#Exemplo4,#Exemplo5 {margem: 20px Auto; largura: 100%; Antecedentes: RGBA (255.255.255, .3); preenchimento: 5px 10px; Size da fonte: 13px; Cor:#f1f1f1; -webkit-box-sizing: border-box; } </style> <div id = "box"> <div id = "Exemplo1"> </div> <script type = "text/jsx"> react.render (// direto html <h1 className = "Classn1"> 1 Hellow html direto mundial type = "text/jsx"> react.render (// cria diretamente o elemento react.createElement ('h1', {className: 'Classn2'}, '2 Olá, crie diretamente o elemento mundo!'), document.getElementById ('Exemplo2'); Createel = react.createclass ({render: function () {// retorna <h1> O componente Hellow cria HTML World </h1> // retorna com ou sem suportes (<h1 className = 'Classn3'> 3 componente Hellow Cria HTML World </h1>);}}); <leateel> </createel> document.getElementById ('exemplo3')); </script> <div id = "Exemplo4"> </div> <script type = "text/jsx"> var jsxCreateel = react.createclass ({// crie render em jsx diretamente: function () {return (react.Cr (reAt.Cr.Cr ({// Create render em jsx ': function () {return (react.Cret.Cr ({/// Crie render em jsx' diretamente: function () {return (react.CrEt.Cr. "Classn4"}, "4 Olá, Crie World in JSX diretamente!"))}}); react.render (// Crie elemento no método de componente React.CreateElement (JSXCreateel, NULL), Document.getElementById ('Exemplo4'); Hello = react.createclass ({// modelo Hello render: function () {return (<pan> {this.props.data} </span>)}}); var mundial = react.createclass ({// model world render: function () {return (<pan> e o modelo mundial <//spange) componentes <h1 className = "Classn5"> <Hello Data = '5 Hello'/> <orld/> </h1>, document.getElementById ('Exemplo 5'); src = "build/jsxtransformer.js"> </script> </body> </html>Aqui estão alguns conhecimentos adicionais para você:
Reaja termos
Reaja elementos
Um objeto JavaScript que representa elementos HTML. Esses objetos JavaScript são finalmente compilados nos elementos HTML correspondentes.
Componentes
Encapsular elementos do React, incluindo um ou mais elementos de reação. Os componentes são usados para criar módulos de interface do usuário reutilizáveis, como paginação, navegação na barra lateral, etc.
JSX
O JSX é uma extensão de sintaxe JavaScript definida pelo React, semelhante ao XML. O JSX é opcional, podemos usar o JavaScript para gravar aplicativos React, mas o JSX fornece uma maneira mais simples de gravar aplicativos React.
DOM virtual
O Virtual Dom é um objeto JavaScript que simula uma árvore dom. O React usa o Virtual DOM para renderizar a interface do usuário, enquanto ouve mudanças nos dados no DOM virtual e migrando automaticamente essas alterações para a interface do usuário.