Demo React JS Trên Client

Bài đăng này đã không được cập nhật trong 3 năm

Hello MN Đang tập tành code angularjs để viết tiếp phần 2 thì vô tình lượm được 1 tutorial Reactjs với Nodejs khá hay đọc xong khá thích nên nghĩ là mình phải viết ngay lên đây để chia sẽ với mn về điều này Chỉ là vô tình thôi nhé, nhưng mà hay thật Rồi ok nói nhảm đủ rồi mình sẽ bắt đầu nhé I. Giới Thiệu -Đầu tiên là mô hình hoạt động của ReactJs, thực ra thì ReactJS hoạt động theo mô hình MVVM (Model-View-View-Model). Tức là có bất kỳ sự thay đổi nào từ model nó sẽ lập tức thay đổi ở view và ngược lại. -Cách thức hoạt động của ReactJs: Để tìm hiểu sâu thì sẽ khá tốn thời gian nên mình sẽ chia sẽ ngắn gọn 1 những gì mình hiểu, ReactJs hoạt động theo 2 cách: 1, Là khi user gửi request lên server -> server nhận request -> xử lý request bằng PHP/ROR/Nodejs.. -> trả về Client code ReactJS -> Lúc này ReactJS sẽ chạy code và render ra những gì mà server gửi ra 2,Là khi user gửi request lên server -> server nhận request -> xử lý request bằng PHP/ROR/Nodejs..-> lúc này ReactJS sẽ nhận dữ liệu và render ra html -> gửi về client II. Bắt Đầu: 1, Nhúng thư viện ReactJS vào html `<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.js"></script>

` Chúng ta sẽ thực hiện demo ReactJS trên client Dev html & ReactJS:

<body>
	<div id="demo">
			<script type="text/babel">
				ReactDOM.render(<h1 className= "abc">Demo ReactJs</h1>, document.getElementById("demo"));
			</script>
	</div>
</body>

Kết quả khi render ra: Đoạn code ReactDOM.render(<h1 className= "abc">Demo ReactJs</h1>, document.getElementById("demo")); Vậy tại sao lại đang đứng trong cặp thẻ script mà có thể gọi được html như vậy. Đó là nhờ thư viện babel-core/5.8.24/browser.js Mình sẽ code lại đúng chuẩn của ReactJS đoạn trên

ReactDOM.render(React.createElement("h1", {className: "abc"}, "Demo ReactJs"), document.getElementById("demo"));

Như đoạn trên React sẽ thực hiện create 1 đối tượng là thẻ h1 với thuộc tính làclass = "abc" và content 2, Component reactjs

Component là đối tượng quan trọng nhất trong React Component ta sẽ thực hiện khai báo như sau:

var Demo = React.createClass({
    render: function(){
        return(
            <h1 className= "abc">Demo ReactJs</h1>
        );
    }
});

Thực hiện triệu gọi Component ra ReactDOM ReactDOM.render(<Demo/>, document.getElementById("demo")); OR ReactDOM.render(<Demo></Demo>, document.getElementById("demo")); Lưu ý: Khi sửa dụng render React. bắt buộc phải tồn tại 1 thành phần cha bao các thành phần con còn lại. Nếu không React sẽ không chạy 3, Component lồng nhau:

var Test = React.createClass({
    render: function(){
        return(
            <h1 className= "abc">Test Component ReactJs</h1>
        );
    }
});

var Demo = React.createClass({
    render: function(){
        return(
            <div>
              <h1 className= "abc">Demo ReactJs</h1>
              <Test/>
            </div>
        );
    }
});

4, Props Props là thuộc tính dành cho 1 component và có thể tồn tại nhiều props

ReactDOM.render(<Demo demoprop="Demo Prop" />, document.getElementById("demo"));

Chúng ta sẽ triệu gọi props vào component

<h1 className= "abc">Demo ReactJs {this.props.demoprop}</h1>

Ta sửa dụng cặp {} để thực hiện gọi các function trong đó Kết quả: --Props children

ReactDOM.render(<Demo demoprop="Demo Prop">Test props children</Demo>,

Component:

var Demo = React.createClass({
    render: function(){
        return(
            <div>
              <h1 className= "abc">Demo ReactJs {this.props.demoprop}</h1>
              <h3>Result: {this.props.children}</h3>
              <Test/>
            </div>
        );
    }
});

5, State Trái ngược với Props , State lại có thể thay đổi được. Ta có thể hiểu Props là thuộc tính thì State chính là trạng thái của nó Ta sẽ init 1 state và new 1 function addString nhằm nuối chuỗi khi thực hiện click button

getInitialState(){
    return {str: "Test state"};
},
addString(){
    this.setState({str: this.state.str + 1});
},

Viết 1 button trong component Demo với event onClick sẽ thực hiện gọi hàm addString trong cùng component

<button onClick={this.addString}>button</button>

III.Kết Đây chỉ là 1 ít mình lượm nhặt được và chia sẽ ra cho các bạn. Sẽ cố gắng đọc hiểu và share nhiều hơn trong tương lai Thanks you

Mục lục