Hướng dẫn React trung gian: 3 bước

2024 Tác giả: John Day | [email protected]. Sửa đổi lần cuối: 2024-01-30 13:31

Hướng dẫn về React Intermediate

Xem thành phẩm tại đây.

Bạn sẽ học cái gì?

Bạn sẽ tạo một danh sách việc cần làm đơn giản với React.js và tìm hiểu về các phần phức tạp hơn của react. Điều kiện tiên quyết (rất được khuyến khích) hoàn thành hướng dẫn bắt đầu react.js Kiến thức về HTML Kiến thức về CSS Các lệnh shell cơ bản Kiến thức cơ bản về JavaScript

Quân nhu

Tất cả các phần mềm sẽ được đề cập trong hướng dẫn.

Bạn sẽ cần một máy tính có cài đặt phần mềm sau:

• npm / sợi
• Một IDE hỗ trợ js
• Một trình duyệt web

Bước 1: Hướng dẫn React Trung gian

Bắt đầu

Tại sao lại sử dụng React.js?

Với React.js, vấn đề là sử dụng lại mã. Ví dụ: giả sử bạn có một thanh điều hướng mà bạn có trong 100 trang. Nếu bạn cần thêm một trang mới, thì bạn cần thay đổi thanh điều hướng trên mọi trang, nghĩa là bạn phải làm điều tương tự cho 100 trang. Ngay cả với macro, điều này cũng trở nên rất tẻ nhạt.

Cài đặt phần mềm / gói cần thiết

Bạn sẽ cần:

npm / sợi

Cài đặt thế nào:

1. Đi và cài đặt LTS mới nhất của Node.js
2. TÙY CHỌN: nếu bạn thích sợi làm trình quản lý gói của mình, hãy cài đặt sợi bằng cách nhập vào sợi powershell npm install -g
3. Mở powershell / cmd.exe
4. Điều hướng đến thư mục mà bạn muốn tạo dự án của mình trong đó
5. Nhập npx create-react-app.

Bạn đã hoàn thành giai đoạn thiết lập. để kiểm tra nó, hãy mở powershell, điều hướng đến thư mục dự án của bạn và nhập npm start. bạn sẽ tải một trang web trên trình duyệt mặc định của mình.

Bước 2: Bước 1: Bắt đầu

Để bắt đầu, hãy xóa các tệp sau khỏi thư mục / src của bạn:

• App.test.js
• index.css
• logo.svg
• serviceWorker.js
• setupTests.js

Chúng tôi không cần những tệp này.

Hãy cũng tổ chức hệ thống tệp của chúng tôi. Tạo các thư mục này trong / src /:

• js
• css

đưa App.js vào dir js và App.css vào dir css.

Tiếp theo, hãy tổ chức lại các phụ thuộc.

trong index.js, xóa các nhập cho serviceWorker và index.css. Xóa serviceWorker.register (). Định tuyến lại các đường dẫn cho Ứng dụng.

trong App.js, hãy xóa nhập cho logo.svg, vì chúng tôi không cần nó nữa. Định tuyến lại App.css. xóa chức năng App () và xuất cho Ứng dụng.

Trong React, chúng ta có 2 cách xác định các phần tử. Chúng ta có các hàm và các lớp. các hàm dành cho các mục ít phức tạp hơn và các lớp thường dành cho các thành phần phức tạp hơn. Bởi vì một danh sách việc cần làm phức tạp hơn một loạt HTML, chúng tôi sẽ sử dụng cú pháp lớp.

Thêm cái này vào mã của bạn:

pastebin.com/nGXeCpaH

html sẽ nằm trong 2 div.

hãy xác định phần tử.

pastebin.com/amjd0jnb

lưu ý cách chúng tôi xác định giá trị trong trạng thái. Chúng tôi sẽ cần điều này sau.

trong hàm kết xuất, hãy thay thế hi bằng {this.state.value}

chúng tôi đang hiển thị giá trị được chuyển qua từ trạng thái mà chúng tôi đã xác định.

vì vậy chúng ta hãy kiểm tra nó!

trong chức năng kết xuất của Ứng dụng, hãy thay thế nó bằng:

pastebin.com/aGLX4jVE

nó sẽ hiển thị một giá trị: "test".

hãy xem liệu chúng ta có thể kết xuất nhiều Nhiệm vụ không!

thay vì yêu cầu React chỉ hiển thị một phần tử, chúng ta có thể tạo một mảng và cho biết phản ứng để hiển thị mảng thay thế.

thay đổi chức năng kết xuất của thành này:

pastebin.com/05nqsw71

điều này sẽ hiển thị 10 tác vụ khác nhau. Lưu ý cách chúng tôi đã thêm khóa. Những khóa này được sử dụng làm định danh cho phản ứng và chúng tôi, nếu chúng tôi cần chúng.

Bây giờ danh sách nhiệm vụ của chúng tôi đang hoạt động, chúng tôi tìm cách tải các tác vụ. Đây là nơi mà nhà nước của chúng tôi đi vào.

hãy thêm một hàm tạo vào của chúng tôi.

pastebin.com/9jHAz2AS

Trong hàm tạo này, chúng tôi đã chuyển taskArray khỏi hàm kết xuất sang trạng thái. xóa taskArray và vòng lặp for trong hàm render. thay đổi taskArray trong div thành this.state.taskArray.

Bây giờ, mã App.js của bạn sẽ giống như sau:

pastebin.com/1iNtUnE6

Bước 3: Thêm một cách để thêm và loại bỏ các đối tượng

Hãy thêm một cách để thêm và loại bỏ các đối tượng. Hãy lên kế hoạch.

Chúng ta cần gì?

• Một cách để người dùng thêm các đối tượng
• Nơi cất giữ đồ vật
• Một cách để lấy các đối tượng

Chúng ta sẽ sử dụng cái gì?

• Một yếu tố
• API localstorage w / JSON

Hãy bắt đầu với phần tử đầu vào.

bên dưới {this.state.taskArray}, thêm đầu vào và nút vào mã của bạn

Thêm vào

Sẽ có một đầu vào văn bản và nút Thêm ngay bây giờ.

Nó không có gì ngay bây giờ, vì vậy hãy thêm 6 phương thức vào phương thức Ứng dụng của chúng tôi.

Chúng ta cần một phương thức cho thời điểm nút được nhấp và cũng như khi ai đó nhập đầu vào. Chúng tôi cũng cần một cách để tạo mảng tác vụ, cũng như lưu, tải và xóa tác vụ.

hãy thêm 6 phương pháp sau:

buttonClick ()

inputTyped (evt)

createTaskArray ()

saveTasks (nhiệm vụ)

getTasks ()

removeTask (id)

chúng ta cũng hãy thêm biến này vào trạng thái của chúng ta:

đầu vào

Chúng tôi cũng cần ràng buộc các chức năng của mình với điều này.

pastebin.com/syx465hD

Hãy bắt đầu thêm chức năng.

thêm 2 thuộc tính tương tự như vậy:

điều này làm cho nó để khi người dùng nhập bất kỳ thứ gì vào đầu vào, nó sẽ thực thi chức năng.

thêm thuộc tính onClick vào Add like so:

Thêm vào

khi người dùng nhấp vào nút, chức năng sẽ thực thi.

Bây giờ phần html đã xong, hãy bắt đầu với chức năng.

Tôi đã viết trước giao diện API localStorage, vì vậy hãy thay thế các hàm saveTasks, getTasks và removeTask bằng:

pastebin.com/G02cMPbi

hãy bắt đầu với hàm inputTyped.

khi người dùng nhập, chúng ta cần thay đổi giá trị bên trong của đầu vào.

hãy làm điều đó bằng cách sử dụng hàm setState được cung cấp với phản ứng.

this.setState ({input: evt.target.value});

bằng cách này, chúng ta có thể nhận được giá trị của đầu vào.

sau khi hoàn tất, chúng tôi có thể làm việc trên chức năng buttonClick.

chúng ta cần thêm một nhiệm vụ vào danh sách nhiệm vụ. trước tiên chúng ta kéo danh sách nhiệm vụ từ localStorage, chỉnh sửa nó, rồi lưu nó. Sau đó, chúng tôi gọi một kết xuất của taskList để cập nhật nó.

var taskList = this.getTasks ();

taskList.tasks.push (this.state.input);

this.saveTasks (taskList);

this.generateTaskArray ();

chúng tôi nhận các tác vụ, đẩy giá trị đầu vào vào các tác vụ và sau đó lưu nó. Sau đó, chúng tôi tạo mảng nhiệm vụ.

bây giờ, hãy làm việc với hàm createTaskArray ().

chúng ta cần phải:

• nhận nhiệm vụ
• tạo một mảng các thành phần tác vụ
• chuyển các thành phần tác vụ để kết xuất

chúng ta có thể nhận các nhiệm vụ và lưu trữ chúng trong một biến với getTasks ()

var task = getTasks (). task

sau đó chúng ta cần tạo một mảng và điền nó vào.

pastebin.com/9gNXvNWe

nó sẽ hoạt động ngay bây giờ.

MÃ NGUỒN:

github.com/bluninja1234/todo_list_instructables

Ý TƯỞNG THÊM:

Chức năng xóa (rất đơn giản, thêm một cú nhấp chuột và xóa bằng removeTask khỏi chỉ mục chính)

CSS (cũng đơn giản, viết của riêng bạn hoặc sử dụng bootstrap)