anuário
1: Abra o projeto usando a ferramenta compilador vscode criado (index.html é o arquivo de entrada)
2: reagir diretório do projeto:
3: Criar o componente ({} dados podem ligar-se)
3: A diferença entre o Estado e Props
4: dados de ligao e de ligao objectos
4: reagir propriedades de ligação (classe e estilo)
1: class: classe classname vez
4: Imagens reagir introduzindo
2: a introdução de imagem remota
2: As variáveis personalizadas render, e, em seguida, exibir as variáveis em div
3: atravessar a matriz directamente em troca
1: Definir métodos e chamadas de método
2: parâmetros passados durante a chamada (para alterar os três tipos de pontos de este método)
1: Ao chamar este por ligação de ligao
3: Modificação do valor de estado
2: valor do parâmetro mudança dinâmica
1: Abra o projeto usando a ferramenta compilador vscode criado (index.html é o arquivo de entrada)
Em vscode para executar projetos
2: reagir diretório do projeto:
Reagir reagem é uma biblioteca central
ReactDOM está associada com as funções DOM virtuais
App importação de './App': montagem incorporada App
ReactDOM.render (<App />, document.getElementById ( 'raiz')); App montagem é processado para o nó raiz
3: Criar o componente ({} dados podem ligar-se)
1: Criar
1: A função Planta Stateless
2: ES6 de classe
2: referências e chamada:
1: Citações:
2: Chamada:
3: A diferença entre o Estado e Props
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>菜鸟教程 React 实例</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
class WebSite extends React.Component {
constructor() {
super();
this.state = {
name: "菜鸟教程",
site: "https://www.runoob.com"
}
}
render() {
return (
<div>
<Name name={this.state.name} />
<Link site={this.state.site} />
</div>
);
}
}
class Name extends React.Component {
render() {
return (
<h1>{this.props.name}</h1>
);
}
}
class Link extends React.Component {
render() {
return (
<a href={this.props.site}>
{this.props.site}
</a>
);
}
}
ReactDOM.render(
<WebSite />,
document.getElementById('example')
);
</script>
</body>
</html>4: dados de ligao e de ligao objectos
4: reagir propriedades de ligação (classe e estilo)
1: class: classe classname vez
2: estilo:
3: para em htmlfor
4: Imagens reagir introduzindo
1: introdução da imagem local
2: a introdução de imagem remota
5: Array de Loop
1: Uma matriz é rótulo
2: As variáveis personalizadas render, e, em seguida, exibir as variáveis em div
3: atravessar a matriz directamente em troca
5: reagir eventos e métodos
1: Definir métodos e chamadas de método
2: parâmetros passados durante a chamada (para alterar os três tipos de pontos de este método)
1: Ao chamar este por ligação de ligao
corre(){
alert (this.state.name)
}
<Button onclick = {this.run.bind (this)}> 按钮 </ button>
2: Especifica o construtor
No construtor: this.run = this.run.bind (este)
<Button onclick = {this.run}> 按钮 </ button>
3: função por uma seta
executar = () => {
alert (this.state.name)
}
<Button onclick = {this.run}> 按钮 </ button>
3: Modificação do valor de estado
1: Alteração estática
2: valor do parâmetro mudança dinâmica
