Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
42
Help us understand the problem. What is going on with this article?
@M-ISO

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

More than 1 year has passed since last update.

こちら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'});
42
Help us understand the problem. What is going on with this article?
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
M-ISO
先輩芸人の運転手していた29歳の頃、芸人の中でも何か一芸を身に付けたいと思い、初海外単身インドへ、その後世界から発信したいと思いWebを習い始める。そのうちJavaScriptが好きになり...React/Redux/TypeScript/vim/JavaScript/Apollo/株式会社TerraceTech代表取締役/フロントエンドエンジニア

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
42
Help us understand the problem. What is going on with this article?