첫 번째 리액션.js에 Todo 응용 프로그램 설치
16887 단어 ReactJavaScript
참고 자료
디테일은 여기 다 써있어요.
첫 번째 리액션.js에 Todo 응용 프로그램 설치
브라우저
이루어지다
복사하여 붙여넣기 작업
index.html
<!DOCTYPE html>
<meta charset="UTF-8">
<html lang="ja">
<head>
<!-- 参考記事 https://www.kirupa.com/react/simple_todo_app_react.htm -->
<!-- タイトルを決める -->
<title>リアクトでtodoリストを作ろう！!</title>
<!-- スクリプトを読み込む -->
<script src="https://unpkg.com/[email protected]/dist/react.js"></script>
<script src="https://unpkg.com/[email protected]/dist/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<style>
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;
}
.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;
}
</style>
</head>
<body>
<!-- div要素を定義する -->
<div id="container">
</div>
<!-- スクリプトを埋め込む
バベルを使う -->
<script type="text/babel">
// divid#containerに対してリアクトを作用させるよという事を決める
var destination = document.querySelector("#container");
var TodoItems = React.createClass({
render: function() {
//todoEntriesという変数を追加し、渡されたエントリpropの値をTodoListコンポーネントのthis.state.items値に基づいて格納します。甘い！さて、私たちのtodoEntries変数は、それぞれがタスクとキーを格納するオブジェクトの束を含む配列を格納します。残りの部分は、データを表示するために使用されるHTML要素を作成することだけです。
var todoEntries = this.props.entries;
//マップ関数を使用してtodoEntries内のすべてのアイテムを繰り返し処理し、createTasks関数を呼び出して各エントリのリスト要素を作成します。
//これらのリスト要素は動的に作成されるため、以前に作成したポイントを繰り返し表示するには、キー属性を指定し、それぞれに固有の値を与えることで、Reactがそれらを追跡できるようにする必要があります。最初にタスクを保存したときに、この問題のこの部分をすでに解決しました。
function createTasks(item) {
return <li key={item.key}>{item.text}</li>
}
var listItems = todoEntries.map(createTasks);
//list要素のこのコレクションは、listItems変数/配列によって完全に処理され、格納されます。この時点で残っているのは、配列内のリスト要素から画面上にレンダリングされた要素をリストすることだけです。これを達成するには、次の強調表示された行を追加してください：
return (
<ul className="theList">
{listItems}
</ul>
);
}
});
var TodoList = React.createClass({
getInitialState: function() {
//getInitialStateはコンポーネントがレンダリングされる前に呼び出される
//ライフサイクルメソッドを指定しています。
//このメソッドの内部では、itemsという空の配列を作成し、
//このコンポーネント内のどこからでもthis.state.itemsを介してアクセスできます。
return {
// 配列を返す
//todoListが画面に描画されている状態です
//その状態で、todoListは空っぽの配列を返しています
items: []
};
},
addItem: function(e) {
//<form onSubmit={this.addItem}>が見張ってる関数
// まず、状態オブジェクトのitemsプロパティへの参照を格納するitemArrayという配列を作成します。
var itemArray = this.state.items;
//この配列を取得したら、入力要素から最近提出されたテキスト入力を追加します：
itemArray.push(
//console.log("要素を配列に追加！")
{
text: this._inputElement.value,
key: Date.now()
}
);
this.setState({
items: itemArray
});
//サブミットしたらテキストを空白にする
this._inputElement.value = "";
//preventDefaultメソッドは、デフォルトのonSubmitイベントをオーバーライドするようにします。これを行う理由は少しわかりにくいですが、次のことを確認することです：フォームを送信するときにやりたいことは、addItemメソッドを呼び出すことです。デフォルトの動作を停止しなかった場合、フォームを送信するときに、アプリケーションは必要に応じてaddItemを正しく呼び出します。また、ブラウザのデフォルトのPOST動作がトリガされます。これは間違いありません。 onSubmitイベントがデフォルトの動作を行わないようにすることで、ページを更新する不要なPOSTアクションのような不要な副作用なしにaddItemメソッドを呼び出すことができます。
e.preventDefault();
//サブミットするたびに起動する
console.log("発火！！！！");
console.log(itemArray);
},
render: function() {
return (
<div className="todoListMain">
<div className="header">
<form onSubmit={this.addItem}>
<input ref={(a) => this._inputElement = a}
placeholder="todoリストを作ろう！">
</input>
<button type="submit">追加！</button>
</form>
</div>
<TodoItems entries={this.state.items}/>
</div>
);
}
});
ReactDOM.render(
<div>
<TodoList/>
</div>,
// さっき指定した変数を返す的な
destination
);
</script>
</body>
</html>
Reference
이 문제에 관하여(첫 번째 리액션.js에 Todo 응용 프로그램 설치), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/rh_/items/31494aaf9fb34efa36a3
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
이루어지다
복사하여 붙여넣기 작업
index.html
<!DOCTYPE html>
<meta charset="UTF-8">
<html lang="ja">
<head>
<!-- 参考記事 https://www.kirupa.com/react/simple_todo_app_react.htm -->
<!-- タイトルを決める -->
<title>リアクトでtodoリストを作ろう！!</title>
<!-- スクリプトを読み込む -->
<script src="https://unpkg.com/[email protected]/dist/react.js"></script>
<script src="https://unpkg.com/[email protected]/dist/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<style>
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;
}
.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;
}
</style>
</head>
<body>
<!-- div要素を定義する -->
<div id="container">
</div>
<!-- スクリプトを埋め込む
バベルを使う -->
<script type="text/babel">
// divid#containerに対してリアクトを作用させるよという事を決める
var destination = document.querySelector("#container");
var TodoItems = React.createClass({
render: function() {
//todoEntriesという変数を追加し、渡されたエントリpropの値をTodoListコンポーネントのthis.state.items値に基づいて格納します。甘い！さて、私たちのtodoEntries変数は、それぞれがタスクとキーを格納するオブジェクトの束を含む配列を格納します。残りの部分は、データを表示するために使用されるHTML要素を作成することだけです。
var todoEntries = this.props.entries;
//マップ関数を使用してtodoEntries内のすべてのアイテムを繰り返し処理し、createTasks関数を呼び出して各エントリのリスト要素を作成します。
//これらのリスト要素は動的に作成されるため、以前に作成したポイントを繰り返し表示するには、キー属性を指定し、それぞれに固有の値を与えることで、Reactがそれらを追跡できるようにする必要があります。最初にタスクを保存したときに、この問題のこの部分をすでに解決しました。
function createTasks(item) {
return <li key={item.key}>{item.text}</li>
}
var listItems = todoEntries.map(createTasks);
//list要素のこのコレクションは、listItems変数/配列によって完全に処理され、格納されます。この時点で残っているのは、配列内のリスト要素から画面上にレンダリングされた要素をリストすることだけです。これを達成するには、次の強調表示された行を追加してください：
return (
<ul className="theList">
{listItems}
</ul>
);
}
});
var TodoList = React.createClass({
getInitialState: function() {
//getInitialStateはコンポーネントがレンダリングされる前に呼び出される
//ライフサイクルメソッドを指定しています。
//このメソッドの内部では、itemsという空の配列を作成し、
//このコンポーネント内のどこからでもthis.state.itemsを介してアクセスできます。
return {
// 配列を返す
//todoListが画面に描画されている状態です
//その状態で、todoListは空っぽの配列を返しています
items: []
};
},
addItem: function(e) {
//<form onSubmit={this.addItem}>が見張ってる関数
// まず、状態オブジェクトのitemsプロパティへの参照を格納するitemArrayという配列を作成します。
var itemArray = this.state.items;
//この配列を取得したら、入力要素から最近提出されたテキスト入力を追加します：
itemArray.push(
//console.log("要素を配列に追加！")
{
text: this._inputElement.value,
key: Date.now()
}
);
this.setState({
items: itemArray
});
//サブミットしたらテキストを空白にする
this._inputElement.value = "";
//preventDefaultメソッドは、デフォルトのonSubmitイベントをオーバーライドするようにします。これを行う理由は少しわかりにくいですが、次のことを確認することです：フォームを送信するときにやりたいことは、addItemメソッドを呼び出すことです。デフォルトの動作を停止しなかった場合、フォームを送信するときに、アプリケーションは必要に応じてaddItemを正しく呼び出します。また、ブラウザのデフォルトのPOST動作がトリガされます。これは間違いありません。 onSubmitイベントがデフォルトの動作を行わないようにすることで、ページを更新する不要なPOSTアクションのような不要な副作用なしにaddItemメソッドを呼び出すことができます。
e.preventDefault();
//サブミットするたびに起動する
console.log("発火！！！！");
console.log(itemArray);
},
render: function() {
return (
<div className="todoListMain">
<div className="header">
<form onSubmit={this.addItem}>
<input ref={(a) => this._inputElement = a}
placeholder="todoリストを作ろう！">
</input>
<button type="submit">追加！</button>
</form>
</div>
<TodoItems entries={this.state.items}/>
</div>
);
}
});
ReactDOM.render(
<div>
<TodoList/>
</div>,
// さっき指定した変数を返す的な
destination
);
</script>
</body>
</html>
Reference
이 문제에 관하여(첫 번째 리액션.js에 Todo 응용 프로그램 설치), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/rh_/items/31494aaf9fb34efa36a3
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<!DOCTYPE html>
<meta charset="UTF-8">
<html lang="ja">
<head>
<!-- 参考記事 https://www.kirupa.com/react/simple_todo_app_react.htm -->
<!-- タイトルを決める -->
<title>リアクトでtodoリストを作ろう！!</title>
<!-- スクリプトを読み込む -->
<script src="https://unpkg.com/[email protected]/dist/react.js"></script>
<script src="https://unpkg.com/[email protected]/dist/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<style>
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;
}
.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;
}
</style>
</head>
<body>
<!-- div要素を定義する -->
<div id="container">
</div>
<!-- スクリプトを埋め込む
バベルを使う -->
<script type="text/babel">
// divid#containerに対してリアクトを作用させるよという事を決める
var destination = document.querySelector("#container");
var TodoItems = React.createClass({
render: function() {
//todoEntriesという変数を追加し、渡されたエントリpropの値をTodoListコンポーネントのthis.state.items値に基づいて格納します。甘い！さて、私たちのtodoEntries変数は、それぞれがタスクとキーを格納するオブジェクトの束を含む配列を格納します。残りの部分は、データを表示するために使用されるHTML要素を作成することだけです。
var todoEntries = this.props.entries;
//マップ関数を使用してtodoEntries内のすべてのアイテムを繰り返し処理し、createTasks関数を呼び出して各エントリのリスト要素を作成します。
//これらのリスト要素は動的に作成されるため、以前に作成したポイントを繰り返し表示するには、キー属性を指定し、それぞれに固有の値を与えることで、Reactがそれらを追跡できるようにする必要があります。最初にタスクを保存したときに、この問題のこの部分をすでに解決しました。
function createTasks(item) {
return <li key={item.key}>{item.text}</li>
}
var listItems = todoEntries.map(createTasks);
//list要素のこのコレクションは、listItems変数/配列によって完全に処理され、格納されます。この時点で残っているのは、配列内のリスト要素から画面上にレンダリングされた要素をリストすることだけです。これを達成するには、次の強調表示された行を追加してください：
return (
<ul className="theList">
{listItems}
</ul>
);
}
});
var TodoList = React.createClass({
getInitialState: function() {
//getInitialStateはコンポーネントがレンダリングされる前に呼び出される
//ライフサイクルメソッドを指定しています。
//このメソッドの内部では、itemsという空の配列を作成し、
//このコンポーネント内のどこからでもthis.state.itemsを介してアクセスできます。
return {
// 配列を返す
//todoListが画面に描画されている状態です
//その状態で、todoListは空っぽの配列を返しています
items: []
};
},
addItem: function(e) {
//<form onSubmit={this.addItem}>が見張ってる関数
// まず、状態オブジェクトのitemsプロパティへの参照を格納するitemArrayという配列を作成します。
var itemArray = this.state.items;
//この配列を取得したら、入力要素から最近提出されたテキスト入力を追加します：
itemArray.push(
//console.log("要素を配列に追加！")
{
text: this._inputElement.value,
key: Date.now()
}
);
this.setState({
items: itemArray
});
//サブミットしたらテキストを空白にする
this._inputElement.value = "";
//preventDefaultメソッドは、デフォルトのonSubmitイベントをオーバーライドするようにします。これを行う理由は少しわかりにくいですが、次のことを確認することです：フォームを送信するときにやりたいことは、addItemメソッドを呼び出すことです。デフォルトの動作を停止しなかった場合、フォームを送信するときに、アプリケーションは必要に応じてaddItemを正しく呼び出します。また、ブラウザのデフォルトのPOST動作がトリガされます。これは間違いありません。 onSubmitイベントがデフォルトの動作を行わないようにすることで、ページを更新する不要なPOSTアクションのような不要な副作用なしにaddItemメソッドを呼び出すことができます。
e.preventDefault();
//サブミットするたびに起動する
console.log("発火！！！！");
console.log(itemArray);
},
render: function() {
return (
<div className="todoListMain">
<div className="header">
<form onSubmit={this.addItem}>
<input ref={(a) => this._inputElement = a}
placeholder="todoリストを作ろう！">
</input>
<button type="submit">追加！</button>
</form>
</div>
<TodoItems entries={this.state.items}/>
</div>
);
}
});
ReactDOM.render(
<div>
<TodoList/>
</div>,
// さっき指定した変数を返す的な
destination
);
</script>
</body>
</html>
Reference
이 문제에 관하여(첫 번째 리액션.js에 Todo 응용 프로그램 설치), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/rh_/items/31494aaf9fb34efa36a3텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
