The long road of react

Time:2020-11-22

Learning react is not an easy thing, and it seems that the introduction is not so simple. But I think it’s all worth it.
This is my experience in learning react, I hope to help you!

React can use two styles, one is normal CSS, the other is the style defined in react.
Common CSS style, which is referenced by classname
<! — common CSS Style — >

<style>
    .style_2{
        background-color: #6699ff;
        font-size: 24px;
        padding: 3px 5px 3px 5px;
        color: #FFFFFF;
    }
    .Separate{
        height: 10px;
    }
</style>
<span className="style_ 2 "> account number:</span>
Styles defined in react are referenced by style = {}
//CSS style of react
    var style_1={
        color:'#9900ff',
        padding:3,
    }

assembly

In this case, I construct a component named getboard with the initial letter. adopt ReactDOM.render Load into the HTML page. If ReactDOM.render If there are more than one component or tag in, you need to wrap it with a div tag.

var Board = React.createClass({
        //Initial data
        getInitialState: function(){
            return ({
                Comments: [{account: "123456", name: "fallen leaves, fly"}, {account: "111111", name: "Lala"}]
            });
         
       },
//Initialization
        eachComment: function(text,i){
            return (
                <Comment deleteFromBoard={this.removeComment} updateCommentText={this.updateComment} key={i} index={i}>
                    <br className="Separate"></br>
                    <span className="style_ 2 "> account number:</span>
                    <span className="style_2">{text.account}</span>
                    <br></br>
                    <span className="style_ 2 "> User Name:</span>
                    <span className="style_2">{text.name}</span>
                </Comment>
            );
        },
ReactDOM.render(
        //It needs to be wrapped with a div tag
        <div>
            <h1 style={style_ 1} > leaf falling, fly's react station</h1>
            <Board />
        </div>,
        document.getElementById('container')
    );
Props and state

State: react treats a component as a state machine. Through the interaction with users, different states are realized, and then the UI is rendered to keep the user interface and data consistent. In react, you just need to update the state of the component, and then re render the user interface according to the new state (do not operate the DOM).

Props: the main difference between state and props is that props are immutable, while state can be changed according to user interaction. This is why some container components need to define state to update and modify data. However, sub components can only pass data through props.

function

The button click event in react is similar to ordinary JavaScript, but you should note that the C in onclick should be capitalized, otherwise an error will be reported. In this paper, we change the Boolean value of editing by clicking the button, and update it with the set state function, so as to switch between the normal mode and the editing mode.

<button onClick={ this.edit }>Edit < / button >
        //Editor
        edit: function(){
            this.setState({editing: true});
        },
        //Preservation
        save: function(){
            var val = this.refs.new_account.value;
            var val1 = this.refs.new_name.value;
            console.log ("the value obtained is:" Val + Val + val1);
            this.props.updateCommentText(val,val1,this.props.index)
            this.setState({editing: false});
        },
        //Normal mode
        renderNormal:function(){
            return (
                <div>
                    <div>{this.props.children}</div>
                    <button onClick={ this.edit }>Edit < / button >
                    <button onClick={ this.remove }>Remove < / button >
                </div>
            );
        },
        //Editor模式
        renderForm:function(){
            let children = this.props.children
            return (
                <div>
                    <input ref="new_account" type="text" defaultValue = {children[2].props.children} />
                    <div></div>
                    <input ref="new_name" type="text" defaultValue = {children[5].props.children} />
                    <div></div>
                    <button onClick={ this.save }>Save < / button >
                </div>
            )
        },
        //Mode change
        render: function (){
            //console.log(this.props)
            if(this.state.editing){
                return this.renderForm();
            }else{
                return this.renderNormal();
            }
        }
Full code
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>React-Template</title>
  <script type="text/javascript" ></script>
  <script type="text/javascript" ></script>
  <script type="text/javascript" ></script>
</head>
<! -- common CSS Style -- >
<style>
    .style_2{
        background-color: #6699ff;
        font-size: 24px;
        padding: 3px 5px 3px 5px;
        color: #FFFFFF;
    }
    .Separate{
        height: 10px;
    }
</style>
<body>
    <! -- container -- >
    <div id="container"></div>
<script type="text/babel">
    //CSS style of react
    var style_1={
        color:'#9900ff',
        padding:3,
    }
    
    var Board = React.createClass({
        //Initial data
        getInitialState: function(){
            return ({
                Comments: [{account: "123456", name: "fallen leaves, fly"}, {account: "111111", name: "Lala"}]
            });
        },
        //Modify and update data
        updateComment: function(new_account,new_name,i){
            console.log(new_account+":"+new_name);
            var arr = this.state.comments;
            arr[i].account = new_account;
            arr[i].name = new_name;
            this.setState({comments: arr});
        },
        //Delete data
        removeComment: function(i){
            var arr = this.state.comments;
            arr.splice(i,1);
            this.setState({comments: arr});
        },
        //Initialization
        eachComment: function(text,i){
            return (
                <Comment deleteFromBoard={this.removeComment} updateCommentText={this.updateComment} key={i} index={i}>
                    <br className="Separate"></br>
                    <span className="style_ 2 "> account number:</span>
                    <span className="style_2">{text.account}</span>
                    <br></br>
                    <span className="style_ 2 "> User Name:</span>
                    <span className="style_2">{text.name}</span>
                </Comment>
            );
        },
        //New users
        add: function(text){
            var arr = this.state.comments;
            arr.push(text);
            console.log('arr', this.state.comments)
            this.setState({comments: arr});
        },
        render: function(){
            return (
                <div>
                    <button onClick={ this.add.bind (null, {account: "account", name: "name"})} > new user < / button >
                    <div>
                    {
                        this.state.comments.map(this.eachComment)
                    }
                    </div>
                </div>
            );
        }
    });
 
 
    //Editor保存移除状态
    var Comment = React.createClass({
        getInitialState: function(){
            return ({editing: false});
        },
        //Editor
        edit: function(){
            this.setState({editing: true});
        },
        //Remove
        remove: function(){
            // alert("removing comment!");
            this.props.deleteFromBoard(this.props.index);
        },
        //Preservation
        save: function(){
            var val = this.refs.new_account.value;
            var val1 = this.refs.new_name.value;
            console.log ("the value obtained is:" Val + Val + val1);
            this.props.updateCommentText(val,val1,this.props.index)
            this.setState({editing: false});
        },
 
 
        //Normal mode
        renderNormal:function(){
            return (
                <div>
                    <div>{this.props.children}</div>
                    <button onClick={ this.edit }>Edit < / button >
                    <button onClick={ this.remove }>Remove < / button >
                </div>
            );
        },
        //Editor模式
        renderForm:function(){
            let children = this.props.children
            return (
                <div>
                    <input ref="new_account" type="text" defaultValue = {children[2].props.children} />
                    <div></div>
                    <input ref="new_name" type="text" defaultValue = {children[5].props.children} />
                    <div></div>
                    <button onClick={ this.save }>Save < / button >
                </div>
            )
        },
        //Mode change
        render: function (){
            //console.log(this.props)
            if(this.state.editing){
                return this.renderForm();
            }else{
                return this.renderNormal();
            }
        }
    });
    
    ReactDOM.render(
        //It needs to be wrapped with a div tag
        <div>
            <h1 style={style_ 1} > leaf falling, fly's react station</h1>
            <Board />
        </div>,
        document.getElementById('container')
    );
</script>
</body>
</htm>