TIP - REACTJS ❤️✅

( structure + custom component )

~~~~~

—————————————————————————————————————

***Structure❤️

✅Directory structure (dựa vào dự án có bố cục ntn)

~ Folder::

+ Assets\Chứa file ảnh và tập tin (css, images)

+ Layouts\Chứa bố cục dự án (header, sidebar, content, footer...)

+ Components\Là các component dùng trong dự án (like button, input, modals...)

+ Pages\Là các trang đính đến

+ Middleware\Là các tá vụ trung gian nhằm lấy data (kết hợp redux)

+ Routes\Bao gồm file config router, private, protected, you can call sub-route

+ Config\Bao gồm các file environment, thiết lập cấu hình multi-environment

+ Services\Thêm thư mục này khi sử dụng với redux, có 3 thư mục nữa để quản lý state project

actions, reducers :: sẽ được gọi hầu hết trong các trang, vì thế ta sẽ đặt tên theo (tên vs page sử dụng)

constant

+ utils\Gồm chức năng được sử dùng lại nhiều lần trong dự án

✅React Component Library

~ React Bootstrap (

https://react-bootstrap.github.io/⁠

)

~ Material UI React (

https://mui.com/⁠

)

~ Ant Design React (

https://ant.design/⁠

)

~ React Router (

https://reactrouter.com/⁠

)

~ React Hook Form (

https://react-hook-form.com/⁠

)

~ Redux (

https://redux.js.org/⁠

)

—————————————————————————————————————

***Concepts❤️

✅Reactjs là gì::

+ Là thư viện javascript khai báo, hiệu quả và linh hoạt để xây dựng giao diện người dùng

+ Cho phép soạn UIs phức tạp từ các đoạn mã nhỏ và bị cô lập lại gọi là “component”

+ Reactjs có vài comp khác nhau, nhưng đều bắt đầu đối vs lớp con React.component

~ Nâng cao thì tìm hiểu context & refs

✅Có 2 cách viết component trong reactjs.

~ Dùng function:: functional comp thường dùng để tạo nên những presentional component.

+ Presentational component: là comp đơn giản, ko thay đổi props, ko có state, ko có lifecycle hooks

+ Nhận props để render UI & bắn event cho container comp khi cần thiết

~ Dùng class:: class comp để tạo nên những container component

+ Container component: là những comp có state, có lifecycle hooks

+ Là trung tâm xử lý có tổ chức, có nhiệm vụ nhận event, xử lý logic, quản lý state

~> Nhìn chung là 2 cách viết giống nhau, tùy vào dự án đang code theo cách nào!

✅React sẽ tách ra 2 loại thư viện (React & React-DOM)

~ React: Là thư viện javascript, được thiết kế để xây dựng UI tốt hơn (like component, elements, class)

~ React-DOM: là cầu nối giữa react và browser DOM (render(), findDOMNode())

~ React-DOM binds the idea of React to a web browser

+ React không liên quan gì với browser web, like react-native, react-canvas, react-three

✅JSX là gì?

~ Javascript XML

~ Là cú pháp (syntax) khác không phải một chuỗi hay một html

~ Là bản mở rộng của javascript.

~ Có thể nhắc nhở về 1 ngôn ngữ mẫu, tuy nhiên nó đi kèm toàn bộ sức mạnh của javascript

~ Cách viết cả 2 logic và html vào cùng 1 file gọi là jsx

~ JSX gần với javascript hơn nên React DOM use quy ước đặt tên thuộc tính Camelcase thay vì tên thuộc tính HTML

~ JSX ngăn chặn việc inject vào comp

+ Mặc định React DOM bỏ qua any value embedded in JSX trước khi render.

~ Babel sẽ compiles JSX xuống để cho React.createElement() call (JSX đại diện cho object)

+ Syntax:

const element = (

Hello, world!

</h1>

);

Về cơ bản React.createElement() sẽ tạo ra object ntn:

// Note: this structure is simplified

const element = {

type: 'h1',

props: {

className: 'greeting',

children: 'Hello, world!'

}

};

~> Những object này được gọi là React element, React use it to build app & update view.

✅Rendering Element?

~ Các element đều là những khối build nhỏ của app react

~ Không giống như DOM element của brower, react element là các object đơn giản.

~ Syntax: (để render một react element)

+ first: create - const root = ReactDom.createRoot(); then root.render(element)

~ Update rendered element:

+ Cách duy nhất là create element and root.render(element);

const root =...

function a (){

const element =<></>

return root.render(element);

}

+ Then call it in setInterval(()=>{}, 1000)

✅Components & Props

+ Compoents sẽ chia UI thành nhiều mảng độc lập để dễ tái sd

+ Conceptually, components giống như các hàm js, access any input (called props)

*Function & Class Component

+ The simplest way to define a component is write a js function

function Welcome(props) {

return <h1>{props.name}</h1>

}

~> This function is a valid React components, component access một đối số object props và return về 1 react element

+ In ES6 class:

class Welcome extends React.Component {

render() {

return <h1>{this.props.name}</h1>

}

~> 2 component trên là tương dương nhau

*Render a component

~ Elements có thể đại diện cho 1 component

const element = <Welcome name="name" />

~ React sẽ chuyển property for JSX & childrent dưới dạng 1 object, called this object “props”

~ React call the Welcome component with {name: ‘name’} as the props

*Composing COmponents

~ Components can refer to other components in their output → điều này cho phép sd cùng một component abstraction

~ a Button, a Form, a dialog, in React tất cả được viết dưới dạng component

*Extracting Component

~ Don’t be afraid to split components into smaller components (Đừng ngại chia component thành những component nhỏ hơn)

function Comment(props) {

return (

</div>

)

}

refactor

function Avatar(props) {

return (

)

}

function Comment(props) {

return (

</div>

)

}

*Props are Read-Only

~ Hiểu đơn giản là những tham số pass thì sẽ ko thay đổi được

~ React is pretty flexible but it há a single strict rule (React khá linh hoạt nhưng nó có quy tắc nghiêm ngặt)

All React components must act like pure functions with repoct to their props

✅State & Lifecycle

~ Adding lifecycle methods to a class

+ Declare method on the component when a component mounts & unmounts

class Clock extends React.Component {

constructor(props) {

super(props);

this.state = {date: new Date()};

}

componentDidMount() { }

componentWillUnmount() { }

render() {

return (

<div>

<h1>Hello, world!</h1>

<h2>It is {this.state.date.toLocaleTimeString()}.</h2>

</div>

);

}

~> This methods are called “lifecycle methods

+ The componentDidMount() method runs after the component output has been rendered to the DOM

+ componentWillUnmount() lifecycle method:

*Using State Correctly

~ Không trực tiếp sửa đổi state

~ State updates may be asynchronous (state có thể cập nhật không đồng bộ)

+ Because this.props & this,state may be updated asynchronously → bạn không nên dựa vào giá trị để xử lý

~ State updates are merged

+ When you call setState(), React merges the object you provide into the current state

✅Handling Events

~ Xử lý sự kiện với React elements sẽ giống với xử lý sự kiện trên Dom elements, chỉ khác nhau ở cú pháp (syntax)

onclick="activateLasers()" in handling event DOM element

onClick={activateLasers} in React

function handleSubmit(e) {

e.preventDefault();

}

onSubmit={handleSubmit}

~> Handling event use e.preventDefault() thay vì onsubmit="return false"

~> e là một sự kiện tổng hợp (synthetic event)

~> React, không cần gọi AddEventListener to add listeners to a DOM element after it is created. Instead, chỉ cần cung cấp 1 lắng nghe khi element được khỏi tạo lần đầu

✅Conditional Rendering

~ Conditional rendering của react giống như conditions work in javascript, use operators like if or the conditional operator to create element đại diện cho curent state

*Inline If with Logical && Operator

~ Ex:

{unreadMessages.length > 0 &&

<h2>You have {unreadMessages.length} unread messages.</h2>}

*Inline If-Else with Conditional Operator

Syntax: condition ? true : false

*Preventing Component from Rendering

~ Đôi khi sẽ use case component tự ẩn bằng cách

Gán 1 variable vào props cho component child, sau đó check và return null thay vì return element

~> Khi đó lifecycle methods vẫn sẽ được gọi componentDidUpdate()

✅Lits & Keys

*Rendering Multiple Components

~ You can use curly braces {}

~ Ex:

const listItems = numbers.map((number) => <li>{number}</li>);

<ul>{listItems}</ul>

*Basic List Component

~ Có thể tạo 1 componet và truyền vào đối số là 1 array number[]

*Keys

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.