More Related Content
Similar to React js入門教學 (20)
More from TaiShunHuang (9)
React js入門教學
- 9. 建立正常開發環境
1. CDN ⽅方式
2. Browserify + Gulp + Babelify
3. Webpack
⼀一看就懂的 React 開發環境建置與 Webpack 入⾨門教學
http://blog.techbridge.cc/2016/07/30/react-dev-enviroment-webpack-browserify/
- 15. <!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<h1>Hello world</h1>,
document.getElementById('root')
);
- 17. 寫⼀一個 Todo List app
https://www.kirupa.com/react/simple_todo_app_react.htm
- 19. 加入CSS檔
body {
padding: 50px;
background-color: #66CCFF;
font-family: sans-serif;
}
.todoListMain .header input {
padding: 10px;
font-size: 16px;
border: 2px solid #FFF;
}
.todoListMain .header button {
padding: 10px;
font-size: 16px;
margin: 10px;
background-color: #0066FF;
color: #FFF;
border: 2px solid #0066FF;
}
.todoListMain .header button:hover {
background-color: #003399;
border: 2px solid #003399;
cursor: pointer;
}
- 20. 刻畫⾯面
import React, { Component } from 'react';
class App extends Component {
render() {
return (
<div className="todoListMain">
<div className="header">
<input type="text" />
<button>加入</button>
</div>
</div>
);
}
}
export default App;
- 21. 輸入的⽂文字 1.抓 2.存
import React, { Component } from 'react';
class App extends Component {
constructor(props){
super(props);
this.state = {
text : "",
item: []
}
this.handleChange = this.handleChange.bind(this);
}
handleChange(event){
console.log(event.target.value);
this.setState({text: event.target.value});
}
render() {
return (
<div className="todoListMain">
<div className="header">
<input type="text"
value={this.state.text}
onChange={this.handleChange}
/>
<button>加入</button>
</div>
</div>
);
}
解釋
onChange、bind
state
- 30. 加入美觀⾊色
.todoListMain .theList {
list-style: none;
padding-left: 0;
width: 255px;
}
.todoListMain .theList li {
color: #333;
background-color: rgba(255,255,255,.5);
padding: 15px;
margin-bottom: 15px;
border-radius: 5px;
}
