External(Harici) React Kullanımı
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>React Basics</title>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
class App extends React.Component {
state = {
name: 'Abdullah',
age: 25,
title: 'Trust me i m enginner'
}
handleMouseOver (e) {
console.log(e.target, e.pageX);
//Don't need binding cause no need access to state
}
handleClick = (e) => {
console.log(e.target);
console.log(this.state);
this.setState({
name: 'Süha'
});
}
handleCopy = (e) => {
console.log('Try being original for once');
}
handleSubmit = (e) => {
e.preventDefault();
alert("Form Changed");
// this.setState ({
// name: e.target.value(name)
// })
}
handleChange = (e) =>{
this.setState ({
name: e.target.value
})
/*
When call the; onChange={this.handleChange} if we didn't binding this point onChange's scope
*/
}
render(){
return(
<div className="app-content">
<h1>Hello, External React</h1>
<p>My name is: { this.state.name } and I am { this.state.age }</p>
<button onClick={this.handleClick}>Click me</button>
<button onMouseOver={this.handleMouseOver}>Hover me</button>
<p onCopy={this.handleCopy}>{this.state.title}</p>
<div>
<form onSubmit={this.handleSubmit}>
<label>Change Name:</label>
<br/>
<input name="name" type='text' onChange={this.handleChange}></input>
<button>Submit</button>
</form>
</div>
</div>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));
</script>
</body>
</html>
Yukarıdaki kod bloğunda bir çok react konusunu görmüş olduk. Bu kodu notdeftarinde .html uzantılı olarak kaydedip çalıştırabilirsiniz. Herşey harici olarak kullanılmıştır.
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
Tarayıcımız kodlarımızı çalıştırabilsin diye babel kullanılmıştır.
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
Tarayıcımız kodlarımızı çalıştırabilsin diye babel kullanılmıştır.
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
React ve ReactDom buradan çekilmiştir. Onchange ve onSubmit Bind edilmiştir.
Yorumlar
Yorum Gönder