Basic ReactJs (P2)

Đáp án của câu hỏi phần 1 là b, d, c, e, a

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 ...

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 DOM
• class MyComponentClass extends React.Component : khai báo một component class. Một component class giố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.Component của thư viện React. MyComponentClass là tên component của bạn (nó phải được bắt đầu bằng kí tự viết hoa)
• Một component class muốn render ra một cái gì đó thì phải thông qua hàm render(). 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

1. <MyComponent foo="bar" /> : bạn truyền cho component một biến myProp với giá trị Hello
2. const stringProps = JSON.stringify(this.props);: bạn chuyển đoạn JSON của props thành dạng string. 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 setState sẽ tự động gọi lại hàm render()

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àm render

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