Basic ReactJs (P2)
Bài đăng này đã không được cập nhật trong 6 năm
Đáp án của câu hỏi phần 1 là b, d, c, e, a
Event Listener
render() thường chứa những event listener. VD
scream() {
alert('AAAAAAAAHHH!!!!!');
}
render() {
return <button onClick={this.scream}>AAAAAH!</button>;
}
onClick={this.scream} sẽ bắt sự kiện click vào button. Khi user click thì scream() sẽ được gọi. Ở đây ta dùng this để gọi đến những function bên trong của class
Ngoài click, bạn cũng có thể khai báo thêm những event khác tương tự như trong JavaScript: onHover, onChange ...
The Component
Những ứng dụng React được tạo ra từ rất nhiều component
Import
Một Component nhỏ, có thể tái sử dụng lại code trong 1 ứng dụng
// create a variable named React:
import React from 'react';
import ReactDOM from 'react-dom';
class MyComponentClass extends React.Component {
render() {
// First, some logic that must happen
// before rendering:
const n = Math.floor(Math.random()*10+1);
// Next, a return statement
// using that logic:
return <h1>The number is {n}!</h1>;
}
};
ReactDOM.render(
<MyComponentClass />,
document.getElementById('app')
);
Cùng phân tích đoạn code trên:
import React from 'react';Tạo ra 1 biến làReact. Ta sẽ thao tác với thư việc React thông qua biến này (React.Component)import ReactDOM from 'react-dom';: Một thư viện giúp React có thể tương tác được với DOMclass MyComponentClass extends React.Component: khai báo mộtcomponent class. Mộtcomponent classgiống như một nhà máy để tạo ra những component. bạn có thể tạo ra rất nhiều component nếu muốn. Bạn phải extend từReact.Componentcủa thư viện React.MyComponentClasslà tên component của bạn (nó phải được bắt đầu bằng kí tự viết hoa)- Một
component classmuốn render ra một cái gì đó thì phải thông qua hàmrender(). Hàm này phải return về một cái gì đó, thông thường sẽ là một JSX. Bạn có thể xử lí logic phía trên hàm return - Để sử dụng & hiển thị component này. ta sử dụng cú pháp :
<MyComponentClass />. Đây là viết tắt của component instance
Export
Bạn đã được biết cách sử dụng import để gán một biến từ một file bên ngoài. Nhưng những thứ bạn import là từ đâu, tại sao lại có thể import những file đó
Export chính là câu trả lời cho bạn. Export & import thường được sử dụng cùng nhau
Trong một file, đặt keyword export ngay trước những thứ mà bạn muốn export. Đó có thể là var let function hoặc class
Export const
// userProfile.js
export const userProfile = {
name: 'truongbt',
age: 25,
sex: 'male'
};
Ở file khác, muốn sử dụng lại file userProfile.js ta sẽ xài import
// App.js:
// Import userProfile from ./userProfile.js:
import { userProfile } from './userProfile';
// Use faveManifestos:
console.log(`Hello : ${userProfile.name}`);
Export class
Trên là ví dụ export 1 biến cố định. vậy muốn export 1 class như lib của React thì ta làm sao
// NavBar.js
import React from 'react';
export class NavBar extends React.Component {
render() {
const pages = ['home', 'blog', 'pics', 'bio', 'art', 'shop', 'about', 'contact'];
const navLinks = pages.map(page => {
return (
<a href={'/' + page}>
{page}
</a>
)
});
return <nav>{navLinks}</nav>;
}
}
// ProfilePage.js
import React from 'react';
import ReactDOM from 'react-dom';
import { NavBar } from './NavBar.js';
class ProfilePage extends React.Component {
render() {
return (
<div>
<NavBar />
<h1>All About Me!</h1>
</div>
);
}
}
ReactDOM.render(
<ProfilePage />,
document.getElementById('app')
)
Bạn có thể thấy trong file ProfilePage.js ta có import file Navbar.js với biến là NavBar.
Sau đó trong hàm render, muốn gọi đến navbar ta chỉ cần <NavBar /> nó sẽ gọi đến hàm render của NavBar.js
Props
props là cách mà bạn có thể truyền thông tin qua lại giữa các component với nhau
Mỗi component đều có props. Đó là một object. Nó nắm giữ thông tin về component đó
Để xem chi tiết ta dùng cú pháp this.props. Xem qua ví dụ sau đây nhé
import React from 'react';
import ReactDOM from 'react-dom';
class PropsDisplayer extends React.Component {
render() {
const stringProps = JSON.stringify(this.props);
return (
<div>
<h1>CHECK OUT MY PROPS OBJECT</h1>
<h2>{stringProps}</h2>
</div>
);
}
}
// ReactDOM.render goes here:
ReactDOM.render(<PropsDisplayer myProp="Hello"/>, document.getElementById('app'))
Cùng phân tích chút nào
<MyComponent foo="bar" />: bạn truyền cho component một biếnmyPropvới giá trịHelloconst stringProps = JSON.stringify(this.props);: bạn chuyển đoạn JSON của props thành dạngstring. Sau đó là hiển thị ra bằng cách<h2>{stringProps}</h2>
Props với class
Vậy áp dụng vào 1 class thì nó sẽ như thế nào
// Greeting.js
import React from 'react';
export class Greeting extends React.Component {
render() {
console.log(this.props);
return <h1>Hi there, {this.props.name}!</h1>;
}
}
// App.js
<Greeting name="truongbt" />
Props với Event
Thử áp dụng với event xem sao
// Button.js
import React from 'react';
export class Button extends React.Component {
render() {
return (
<button onClick={this.props.onClickBtt}>
Click me!
</button>
);
}
}
// App.js
handleClick() {
alert('You clicked me');
}
render() {
return <Button onClickBtt={this.handleClick} />;
}
defaultProps
Bạn có thể gán giá trị mặc định cho props trong trường hợp props không được truyền giá trị
// defaultProps goes here:
Button.defaultProps = {
text: 'This is defaultProps'
}
State
Một component trong React có 2 cách để lấy thông tin props và state
Không như props, state của 1 component không được truyền từ bên ngoài vào. Một component sẽ tự quyết định state của chính nó
Khai báo
Để tạo ra state cho component, ta sẽ phải khai báo nó trong hàm constructor
constructor(props) {
super(props);
this.state = { mood: 'decent' };
}
Để truy xuất được state ta sẽ dùng cú pháp: this.state.name-of-property
Giống như props. bạn có thể dùng this.state từ bất kì đâu bên trong class
Update State
Một component cũng có thể thay đổi state của chính nó thông qua function this.setState()
this.setState() nhận 2 tham số
Tham số đầu tiên là một object, nó sẽ update state của componet
Tham số thứ 2 là một hàm callback. Nhưng bạn có lẽ sẽ không bao giờ cần đến nó
this.setState({
mood: 'great',
hungry: true
});
Hàm
setStatesẽ tự động gọi lại hàmrender()
changeColor() {
const newColor = this.state.color == green ? yellow : green;
this.setState({ color: newColor });
}
render() {
return (
<div style={{background: this.state.color}}>
<h1>
Change my color
</h1>
<button onClick={this.changeColor}>
Change color
</button>
</div>
);
}
Khi bạn click vào button, hàm changeColor sẽ được gọi, nó sẽ cập nhật state của componet. Sau đó hàm render sẽ được gọi lại 1 lần nữa với state vừa được update. Và bạn sẽ có được đúng cái mà bạn cần
Đó là lí do bạn không thể gọi
this.setState()từ bên trong hàmrender
Kết thúc
Vậy là mình đã giới thiệu qua những điều cơ bản trong React Mình cũng chưa được thực nghiệm trong dự án thực tế nên trong bài viết sẽ còn nhiều thiếu sót Rất mong nhận được những góp ý từ mọi người
Nguồn: CodeCademy
All rights reserved
