React-----02 react JSX文法(1)
49169 ワード
1復習:JavaScriptの中の類の定義 1.1 ES 5クラスの定義 .ES 6クラスの定義 1.3 ES 6クラスの継承 コード冗長性を減らす: 2.1.1 reactを使用して映画リストをレンダリングする(配列の最初の書き方を遍歴する) .reactを使用して映画リストをレンダリングする 2.1.3 reactを使って映画リスト(完全コード)をレンダリングする 2.1.4 reactを使用してカウンタ(完全コード) を完成しました. 1.1 JSX文法
どうしてreactはjsを選んだのですか?reactは、レンダリングロジックが他のUI論理と本質的に内在的に結合されていると考えている.UIはイベントを結合する必要があり、UIではデータを動的に表示する必要がある.彼らの間は切っても切れないほど密で、reactは彼らを組み合わせて、つまりコンポーネントです.
JSX文法の要求1.JSXの最上階には1つの元素しかないので、私達は多くの時に外層にdiv元素を包む.2.読みやすくするために、私たちは普通JSXの外側に小さい括弧()を包んでいます.JSXの改行もサポートしています.3.JSXにはダブルラベルを書いてもいいし、シングルラベルを書いてもいいです.ラベルは必ず最後にします..JSX注釈文法 1.3 JSX文法-変数の埋め込み方法 1.3.1、{}正常に表示できるタイプ 1.3.2{}に正常に表示されないタイプ 1.1.3これらのデータを示す必要があるときはStering()を使って直接変換します.または空の文字列をつなぎ合わせたり、toString()メソッドの種類を変換したりします. 1.3.4オブジェクトは、jsxのサブクラス(直接レンダリングできません)としてはいけません. 1.4 JSX文法-式 を埋め込む方法
// ES5
function Person(name,age){
this.name = name;
this.age = age;
}
//
Person.prototype.say = function(){
console.log(this.name,this.age,'say');
}
var p = new Person('kobe','40');
console.log(p.name, p.age); //kobe 40
p.say(); //kobe 40 say
// ES6
class Person{
constructor(name,age){
this.name = name;
this.age = age;
}
say(){
console.log(this.name, this.age, 'say');
}
}
var p = new Person('sunwukong',500);
console.log(p.name,p.age); //sunwukong 500
p.say(); //sunwukong 500 say
// ES6
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
say() {
console.log(this.name, this.age, 'say');
}
}
class Student {
constructor(name,age,num){
this.name = name;
this.age = age;
this.num = num;
}
}
class Teacher {
constructor(name,age,skill){
this.name = name;
this.age = age;
this.skill = skill;
}
}
// ES6
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
say() {
console.log(this.name, this.age, 'say');
}
}
// student Person
class Student extends Person {
constructor(name,age,num) {
// name，age， say
super(name,age);
this.num = num;
}
}
const st1 = new Student('kobe',18,'04183006');
console.log(st1);
//{name: "kobe", age: 18, num: "04183006"}
st1.say();
// kobe 18 say
// Teacher Person
class Teacher extends Person {
constructor(name,age,skill) {
super(name,age);
this.skill = skill;
}
}
const te1 = new Teacher('mr,wang',40,'sing');
console.log(te1);
//{name: "mr,wang", age: 40, skill: "sing"}
te1.say();
//mr,wang 40 say
render() {
return (
<div>
<h2> </h2>
<ul>
{
this.state.movieList.map((item) => {
return <li>{item}</li>
})
}
</ul>
</div>
)
}
render() {
let liArray = [];
for(let movie of this.state.movieList) {
liArray.push(<li>{movie}</li>)
}
return (
<div>
<h2> </h2>
<ul>
{liArray}
</ul>
</div>
)
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="" id="app">app</div>
<!-- 1. -->
<script src="../react/react.development.js"></script>
<script src="../react/react-dom.development.js"></script>
<script src="../react/babel.min.js"></script>
<!-- 2. -->
<script type="text/babel">
class APP extends React.Component {
constructor() {
super();
this.state = {
message:'Hello World!',
movieList:[' ',' ',' ',' ']
}
}
render() {
let liArray = [];
for(let movie of this.state.movieList) {
liArray.push(<li>{movie}</li>)
}
return (
<div>
<h2> </h2>
<ul>
{liArray}
</ul>
</div>
)
}
}
ReactDOM.render(<APP/>,document.getElementById('app'));
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="" id="app">app</div>
<script src="../react/react.development.js"></script>
<script src="../react/react-dom.development.js"></script>
<script src="../react/babel.min.js"></script>
<script type="text/babel">
class APP extends React.Component {
constructor(props) {
super(props);
this.state = {
counter:1
}
}
render() {
return (
<div>
<h2> ：{this.state.counter}</h2>
<button onClick={this.increament.bind(this)}>+1</button>
<button onClick={this.decreament.bind(this)}>-1</button>
</div>
)
}
//
increament(){
this.setState({
counter: this.state.counter + 1
})
}
decreament(){
this.setState({
counter: this.state.counter - 1
})
}
}
ReactDOM.render(<APP/>,document.getElementById('app'));
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="" id="app">app</div>
<script src="../react/react.development.js"></script>
<script src="../react/react-dom.development.js"></script>
<script src="../react/babel.min.js"></script>
<script type="text/babel">
//JSX
const element = <h2>hello world!</h2>
ReactDOM.render(element,document.getElementById('app'));
</script>
</body>
</html>
どうしてreactはjsを選んだのですか?reactは、レンダリングロジックが他のUI論理と本質的に内在的に結合されていると考えている.UIはイベントを結合する必要があり、UIではデータを動的に表示する必要がある.彼らの間は切っても切れないほど密で、reactは彼らを組み合わせて、つまりコンポーネントです.
JSX文法の要求1.JSXの最上階には1つの元素しかないので、私達は多くの時に外層にdiv元素を包む.2.読みやすくするために、私たちは普通JSXの外側に小さい括弧()を包んでいます.JSXの改行もサポートしています.3.JSXにはダブルラベルを書いてもいいし、シングルラベルを書いてもいいです.ラベルは必ず最後にします.
render() {
return (
<div>
{/* */}
hello world!
</div>
)
}
this.state = {
name:'mr.wang', //String
age:18, //Number
names:['abc','bnc','ppp'] //Array
}
this.state = {
test1:null, //Null
test2:undefined, //Undefined
test3:true //Boolean
}
render() {
const {firstName, lastName, isLogin} = this.state;
return (
<div>
{/* */}
{/* */}
<h2>{firstName + ' ' + lastName}</h2>
{/* */}
<h2>{20 * 50}</h2>
{/* */}
<h2>{ isLogin? ' ~': ' ~'}</h2>
{/* */}
<h2>{this.getFullName()}</h2>
</div>
)
}
getFullName(){
return this.state.firstName + " " + this.state.lastName
}