Help us understand the problem. What is going on with this article?

React超入門。propsとstateの動きを理解するコード

こちら6年前の記事です(現在2020/4/30)。今ならもうちょっと説明できるので興味ある方はこちらをご覧ください。

【Reactのstateとpropsの違いが知りたい!(変更・更新の仕方等DEMOあり)】過去のReact初心者の自分にpropsとstateの違いを説明する

以降は当時の記事


GWにReactを完全に理解して、目標を掲げ2日目ですが、
React。
まだ仲良くなれない。。
どうも参考文献が難しい。。簡単に教えて欲しいなあという思いがありました。

とくに肝のpropsとstate
どの文献も同じ事言っているからもうちょっと違う角度で教えて欲しいなあと

一応おライリーのReactの本とか、
2015-05-03 23.55.54.jpg

ここに書いてあるReact入門だったり、本家英語のチュートリアルだったり調べて、写経してのですが、
どうも難しいなあと、
役割はわかったし、理屈は分かるんだけど、やっぱちょっと難しいことやってない??って思っちゃって、
一番わかりやすい動きする部品はないものかとおもっていました。

で、
これが一番わかりやすかったので共有です。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>react0502</title>
<!--    // <script src="build/react.js"></script>
// <script src="build/JSXTransformer.js"></script>
 -->

</head>
<body>
    <div id="content"></div>
    <script src="src/js/react.js"></script>
    <script src="src/js/app.js"></script>

</body>
</html>

htmlは共通です。

props

var Hello = React.createClass({
    render(){
        return (
            <div>Hello!{this.props.name}</div>
        );
    }
});

React.render(
    <Hello name="moritakenji" />,document.getElementById('content')

)

propsを渡す

var Hello = React.createClass({
    render(){
        return (
            <div>myMovieTime!{this.props.fafa}</div>
        );
    }
});
var sub = [{title:'reon',time:'120'}];
React.render(
    <Hello fafa={sub[0].time} />,document.getElementById('content')

)

stateとsetState

ルール
- render()内では値を直接代入してはいけない。
- 変える際はsetState()内で変える

var Hello = React.createClass({
    getInitialState(){
        return{
            name:'morita'
        };
    },
    onClick(){
        this.setState({
            name:this.state.name + '!'
        });
    },
    render(){
        return (
            <div>
            <h1>Hello!{this.state.name}</h1>
                <button onClick={this.onClick}>click</button>
            </div>
        );
    }
});

React.render(
    <Hello name="moritakenji" />,document.getElementById('content')

)

setPropsでコンポーネントのオブジェクトとして

var Hello = React.createClass({
    render(){
        return (
            <div>myMovieTime!{this.props.title}</div>
        );
    }
});
var re = React.render(
    <Hello />,document.getElementById('content')
)
re.setProps({title:'reon',time:'120'});
M-ISO
先輩芸人の運転手していた29歳の頃、芸人の中でも何か一芸を身に付けたいと思い、初海外単身インドへ、その後世界から発信したいと思いWebを習い始める。そのうちJavaScriptが好きになり...React/Redux/TypeScript/vim/JavaScript/Apollo/株式会社TerraceTech代表取締役/フロントエンドエンジニア
https://kenjimorita.jp/aboutme/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした