Latest web development tutorials

reagir JSX

Reagem para substituir o uso convencional JSX JavaScript.

JSX parece XML é uma extensão da sintaxe JavaScript.

Nós não necessariamente usar o JSX, mas tem as seguintes vantagens:

  • JSX executar mais rápido porque ele é compilado em código JavaScript após a otimização.
  • É tipo seguro, ele pode ser encontrado durante a erros de compilação.
  • Use modelo de autoria JSX mais fácil e mais rápido.

Use JSX

JSX é semelhante ao HTML, podemos olhar para exemplos: 

ReactDOM.render(
	<h1>Hello, world!</h1>,
	document.getElementById('example')
);

Podemos ser aninhadas no código acima várias tags HTML, você precisa usar um elemento div que o rodeia, casos p elemento adiciona atributo personalizadodata-MyAttribute, adicionar atributos customizados precisa usar de dadosprefixo. 

ReactDOM.render(
	<div>
	<h1>本教程</h1>
	<h2>欢迎学习 React</h2>
    <p data-myattribute = "somevalue">这是一个很不错的 JavaScript 库!</p>
    </div>
	,
	document.getElementById('example')
);

tente »

ficheiro independente

Seu código Reagir JSX pode ser colocado em um documento separado, por exemplo, criamos um helloworld_react.js arquivo, como segue: 

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('example')
);

Então introduzido no arquivo JS no arquivo HTML: 

<body>
  <div id="example"></div>
<script type="text/babel" src="helloworld_react.js"></script>
</body>

tente »

expressão JavaScript

Podemos usar expressões JavaScript na JSX. Escreva uma expressão entre chaves{}.Exemplos são os seguintes: 

ReactDOM.render(
	<div>
	  <h1>{1+1}</h1>
	</div>
	,
	document.getElementById('example')
);

tente »

Você não pode usarse else em JSX, um único pode usar a expressão condicional (operador ternário)em vez. O exemplo a seguir, se a variáveli éigual a1navegador saída seráverdadeiro,se você modificar o valor de i, a saída seráfalsa.

ReactDOM.render(
	<div>
	  <h1>{i == 1 ? 'True!' : 'False'}</h1>
	</div>
	,
	document.getElementById('example')
);

tente »

estilo

Reagir recomendo usar estilos inline. Podemos usar sintaxecamelCase para definir estilos inline. Reagir acrescenta pxautomaticamente após um número de elemento especificado. O exemplo a seguir demonstra como adicionar estilo alinhadomyStyle para elementos h1:

var myStyle = {
	fontSize: 100,
	color: '#FF0000'
};
ReactDOM.render(
	<h1 style = {myStyle}>本教程</h1>,
	document.getElementById('example')
);

tente »

nota

Nota precisa escrever em chaves, os exemplos são os seguintes: 

ReactDOM.render(
	<div>
    <h1>本教程</h1>
    {/*注释...*/}
 	</div>,
	document.getElementById('example')
);

tente »

ordem

JSX permite a inserção na matriz modelo, a matriz irá expandir automaticamente para todos os membros: 

var arr = [
  <h1>本教程</h1>,
  <h2>学的不仅是技术，更是梦想！</h2>,
];
ReactDOM.render(
  <div>{arr}</div>,
  document.getElementById('example')
);

tente »

tags HTML vs Reagir assembly

Reagir pode processar tags HTML (cordas) ou reagir componentes (classes).

Para renderizar HTML tags, basta usar o nome da marca em letras minúsculas no JSX. 

var myDivElement = <div className="foo" />;
ReactDOM.render(myDivElement, document.getElementById('example'));

Para renderizar Reagir componente, basta criar um início variável local com uma letra maiúscula. 

var MyComponent = React.createClass({/*...*/});
var myElement = <MyComponent someProperty={true} />;
ReactDOM.render(myElement, document.getElementById('example'));

Reagir a JSX usar convenções maiúsculas e minúsculas para distinguir classes de componentes locais e tags HTML.

Nota:

Porque JSX é JavaScript, um número de identificadores, como a class e for que não sejam recomendados como um nome de atributo XML. Como alternativa, Reagir DOM usar className e htmlFor fazer a propriedade correspondente.