---
# System prepended metadata

title: 'Series SolidJS - Tập 2: Khởi tạo project SolidJS và cùng xem có gì trong đó nhé.'

---

# Series SolidJS - Tập 2: Khởi tạo project SolidJS và cùng xem có gì trong đó nhé.
 
## Giới thiệu
Hi everyone, chúng ta lại gặp nhau nữa rồi ✌️

Tập trước trong series mình đã chia sẻ những thông tin xung quanh quanh công nghệ **[SolidJS](https://www.solidjs.com/)**.

Ở tập này mình và các bạn sẽ cùng nhau khởi tạo project cơ bản bằng **[SolidJS](https://www.solidjs.com/)** và phân tích vào các chức năng đã được giới thiệu ở tập trước nhé.
 
## Nội dung

Đây là nội dung mình sẽ giới thiệu trong tập này, let's go 🔥

* 🖥️ Khởi tạo project **SolidJS** (sử dụng **Vite**): https://github.com/solidjs/templates
* 🎬 Vọc vạch về **[JSX - Javascript XML](https://www.solidjs.com/tutorial/introduction_jsx)** trong **SolidJS** 
* 🚛 Cách hoạt động cơ bản của ứng dụng **SolidJS**

-----

###  🖥️ Khởi tạo project **SolidJS** (sử dụng **Vite**):

Mình sẽ tạo project **[SolidJS](https://www.solidjs.com/)** (sử dụng **[Vite](https://vitejs.dev/)**) đi với **Javascript** thuần nhé.

📝 Note: **[Vite](https://vitejs.dev/)** là một **Frontend Build Tool** giúp thực hiện việc khởi tạo và setup các project FE nhanh chóng và dễ dàng ⚡️ (Vite được tạo ra bởi cha đẻ của **VueJS** - **Evan You**)


```bash
# Create an app from a Solid template (Tạo mới ứng dụng từ Solid template)
npx degit solidjs/templates/js my-app
 
# Change directory to the project created (Di chuyển đến thư mục ứng dụng đã tạo)
cd my-app
 
# Install dependencies (Cài đặt các thành phần cần thiết để start ứng dụng)
npm i # or yarn or pnpm
 
# Start the dev server (Chạy ứng dụng trên môi trường dev)
npm run dev
```

>  https://github.com/solidjs/templates có hỗ trợ TypeScript, vì vậy nếu bạn muốn bắt đầu tạo project với TypeScript, hãy thay đổi câu lệnh thành `npx degit solidjs/templates/ts my-app`.


Đây là thành quả sau khi đã chạy lệnh `npm run dev` thành công nhé (truy cập vào đường dẫn http://localhost:3000/)

![](https://i.imgur.com/2keXn3G.png)


*Cấu trúc thư mục:*
![](https://i.imgur.com/WhyeNJr.png)


Nếu bạn đã từng học qua **[ReactJS](https://reactjs.org/)** và có biết đến câu thần chú `create-react-app` thì sẽ thấy cấu trúc source code, syntax của **[SolidJS](https://www.solidjs.com/)** quen thuộc đúng không nào?

Đúng vậy bạn không nhầm đâu, cả **ReactJS** lẫn **SolidJS** đều khá giống nhau đấy kkk 😂


### 🎬 Vọc vạch về **[JSX - Javascript XML](https://www.solidjs.com/tutorial/introduction_jsx)** trong **SolidJS** 

Hãy cùng mình xem 1 ví dụ bên dưới nhé

```jsx
import { render } from "solid-js/web";
 
const HelloEveryone = () => {
    return <div>Hello everyone, my name is Pate Kem.</div>;    
}
 
render(
 () => <HelloEveryone/>,
 document.getElementById("root")
);
```

Trong hỉnh trên bạn hãy chú ý đến hàm **`HelloEveryone`**, nó trực tiếp trả về một thẻ **`<div> nội dung...  </div>`** có chứa nội dụng bên trong.

Mỗi ứng dụng **SolidJS** sẽ bao gồm các chức năng được gọi là các thành phần (**Components**).

Đó là sự kết hợp giữa **HTML** và **JavaScript** được gọi là **JSX**. Solid sẽ vận chuyển chúng đi qua một trình biên dịch để biến các thẻ này thành các nút DOM (DOM nodes) hiển thị lên giao diện.

**JSX** cho phép bạn sử dụng hầu hết các phần tử **HTML**, nó cũng cho phép bạn tạo ra các phần tử mới. Khi chúng ta đã khai báo hàm **`HelloEveryone`**, chúng ta có thể sử dụng nó làm thẻ **`<HelloEveryone>`** trong chính ứng dụng của mình (*hay còn gọi là **Component***).


### 🚛 Cách hoạt động cơ bản của ứng dụng **SolidJS**

Mình sẽ dùng lại code mẫu ở trên để miêu tả cụ thể cách thức hoạt động đơn giản của nó nhé.


```jsx
import { render } from "solid-js/web";
 
const HelloEveryone = () => {
    return <div>Hello everyone, my name is Pate Kem.</div>;    
}
 
render(
 () => <HelloEveryone/>,
 document.getElementById("root")
);
```

Ở đây chúng ta sẽ thấy được hàm **`render`** có cú pháp (syntax) tương tự như hàm **`render`** trong **ReactJS** 👀

Đây là hàm chức năng chính của **SolidJS** để kết xuất lại **Components** sau đấy thể hiện trên giao diện ứng dụng (**DOM - Document Object Model**)

Chúng ta cần cung cấp **2 đối số** cho hàm **`render`**:

* Một **Component** đóng gói mã ứng dụng
* Một phần tử hiện có trong giao diện **HTML** để gắn vào

```jsx
render(
 () => <HelloEveryone/>, // đối số 1
 document.getElementById("root") // đối số 2
);
```

![](https://i.imgur.com/xinzTH3.png)
> Các bạn hãy mở file `index.jsx` + file `index.html` trong source vừa tạo và bạn sẽ thấy thẻ `<div id="root"></div>`, đó chính là nơi sẽ render ra ứng dụng của bạn.


Dựa theo đoạn code trên, nó sẽ được **SolidJS** biên dịch ⚙️ thành các biểu thức trên DOM thực, trông nó sẽ giống như sau:

```jsx
import { template, render, createComponent } from "solid-js/web";

const _tmpl = template(`<div>Hello everyone, my name is Pate Kem.</div>`, 2);

const HelloEveryone = () => {
  return _tmpl.cloneNode(true);
};

render(
  () => createComponent(HelloEveryone, {}),
  document.getElementById("root")
);
```

> [Solid Playground](https://playground.solidjs.com/) khá thú vị khi cho ta thấy **SolidJS** có nhiều cách khác nhau để `render`: *CSR - Client side rendering, SSR - Server side rendering, Client side rendering with hydration.*


## Tổng kết lại tập 2 thôi nào

Ở tập 2 này chúng ta đã bắt đầu tìm hiểu về syntax code và cách 1 ứng dụng SolidJS hoạt động cơ bản như thế nào 😎

Trong tập sau mình sẽ cùng đi tiếp vào các phần tiếp theo:
* 📥 **[Reactivity primitives](https://www.solidjs.com/guides/reactivity)** 
    - *Signals*
    - *Effects*
    - *Memo*
* 🔄 **[Lifecycle methods](https://www.solidjs.com/docs/latest/api#lifecycles)**
    - *onMount*
    - *onCleanup*
    - *onError*
* **Stores + Control Flow trong SolidJS**

Cảm ơn các bạn đã theo dõi tập 2 trong series về **[SolidJS](https://www.solidjs.com/)**. Nếu các bạn có thắc mắc hoặc góp ý về bài viết hãy **comment** giúp mình nhé, cảm ơn các bạn 😘