HTML có cần thiết cho phản ứng gốc không?

Phản ứng bản địa là gì?

React Native là một khung JavaScript được sử dụng để phát triển các ứng dụng di động cho iOS và Android. Nó cho phép bạn xây dựng các ứng dụng di động tương thích chéo chỉ bằng JavaScript và bạn không phải lo lắng về việc học các ngôn ngữ phát triển ứng dụng dành riêng cho nền tảng như Kotlin cho Android hoặc Swift cho iOS.  

Các ứng dụng React Native là các ứng dụng di động thực sự chứ không chỉ là các ứng dụng web. Facebook phát hành phiên bản đầu tiên của React Native vào tháng 3 năm 2015

Quả sung. Phản ứng gốc với nền tảng

Khóa học Lập trình viên Java Full Stack

Tại sao nên sử dụng React Native?

• Đa nền tảng

  Một trong những lợi thế đáng kể nhất của React Native là bạn có thể phát triển đồng thời ứng dụng cho cả hệ sinh thái Android và iOS bằng cách viết cùng một mã chỉ với một vài sửa đổi cho mỗi nền tảng.

• JavaScript

  Không cần biết ngôn ngữ được sử dụng để phát triển ứng dụng dành riêng cho nền tảng, vì React Native chỉ sử dụng JavaScript, có lẽ là ngôn ngữ lập trình phổ biến nhất hiện nay, để phát triển ứng dụng di động.  

• Màn biểu diễn

  React Native cho phép phát triển nhanh các ứng dụng di động vì một mã tương tự được sử dụng cho các ứng dụng cho cả hai nền tảng. Nó cũng tạo điều kiện thuận lợi cho tính năng tải lại nóng để đảm bảo rằng những thay đổi nhỏ được thực hiện đối với ứng dụng sẽ hiển thị ngay lập tức cho nhà phát triển.  

• Cộng đồng nhà phát triển lớn

  Cộng đồng các nhà phát triển khổng lồ đảm bảo rằng tất cả các truy vấn đều được giải quyết kịp thời và do đó, có sẵn hỗ trợ đầy đủ cho khung React Native.  

• Nó tiếp tục trở nên tốt hơn

  Cộng đồng, như đã đề cập ở trên, cũng liên tục cập nhật React Native với các chức năng mới và đảm bảo không xảy ra lỗi.  

• Được Nhiều Công Ty Sử Dụng

  Mặc dù khung tương đối mới, nhưng nhiều công ty đã chuyển các ứng dụng sang khung này. Các công ty khác đang tìm cách sử dụng khuôn khổ để tăng tốc quá trình phát triển và bảo trì.  

• Cơ hội nghề nghiệp xuất sắc

  React Native gần đây đã trở nên rất phổ biến nhờ những ưu điểm như khả năng tương thích chéo. Do đó, sự phổ biến này đã dẫn đến nhu cầu cao đối với các nhà phát triển React Native

Khóa học ReactJS miễn phí cho người mới bắt đầu

Chế độ xem, Trạng thái, Đạo cụ và Phong cách

Lượt xem

View là một thành phần cơ bản của React Native để xây dựng giao diện người dùng. Nó là một vùng chứa hỗ trợ bố cục với flexbox, kiểu, xử lý cảm ứng và điều khiển khả năng truy cập. Nó ánh xạ trực tiếp tới chế độ xem gốc tương tự như bất kỳ nền tảng nào trên ứng dụng React Native đang chạy trên đó

Mã bên trong khối “Chế độ xem” được xuất ra màn hình

Tiểu bang

Có hai loại dữ liệu điều khiển một thành phần trong React Native. đạo cụ và trạng thái. Đối với dữ liệu sẽ thay đổi trong tương lai, chúng tôi sử dụng trạng thái. Trạng thái chứa dữ liệu hoặc thông tin về thành phần. Nó xác định hành vi của thành phần và cách nó sẽ hiển thị

• Đối tượng “trạng thái” chứa dữ liệu được hiển thị trên màn hình
• Khối mã “Văn bản” hiển thị trạng thái trên màn hình

đạo cụ

Props là viết tắt của Thuộc tính. Các thành phần có thể được tùy chỉnh tại thời điểm tạo bằng cách sử dụng các tham số khác nhau và các tham số đó được gọi là đạo cụ. Đạo cụ được truyền từ vùng chứa này sang vùng chứa khác như một phương tiện truyền dữ liệu giữa chúng

• Trong lớp “TVshows”, prop được chuyển đến một thành phần khác gọi là “Watch”
• Trong lớp “Watch”, prop nhận được được sử dụng trong thành phần

Phong cách

React Native sử dụng JavaScript để tạo kiểu cho ứng dụng. Tất cả các thành phần cốt lõi đều sử dụng một giá đỡ có tên là “style. ” Tên kiểu và giá trị tương tự như CSS hoạt động cho web. Để tạo kiểu cho các thành phần của mình, chúng ta có thể sử dụng kiểu dáng nội tuyến hoặc sử dụng StyleSheet, đây là một thành phần React Native

• Kiểu nội tuyến được sử dụng cho văn bản “kiểu nội tuyến”
• Đối tượng biểu định kiểu được tạo để tạo kiểu cho văn bản, “blue” và “bigBlack”

khóa học miễn phí. JavaScript cho người mới bắt đầu

React Ứng dụng gốc VS Ứng dụng dành riêng cho nền tảng

Đây là những khác biệt quan trọng nhất giữa React Native và ứng dụng di động dành riêng cho nền tảng

Phản ứng tự nhiên

Nền tảng cụ thể

Đa nền tảng

Ứng dụng hoạt động trong cả iOS và Android

Ứng dụng được tạo cho một nền tảng cụ thể

Nhà phát triển

Các nhà phát triển có nền tảng phát triển web vững chắc

Các nhà phát triển có kiến ​​thức nền tảng vững chắc

xây dựng thời gian

Nhanh

Chậm

Các ứng dụng

Giản dị

Tổ hợp

Hỗ trợ dài hạn

Không được đề xuất vì khung có thể bị tắt

Khuyến nghị đầu tư dài hạn

Tài nguyên

Tốt nhất cho các nhóm phát triển nhỏ với nguồn lực hạn chế

Tốt nhất cho các nhóm phát triển có kinh nghiệm với đầy đủ nguồn lực

Phản ứng điều kiện tiên quyết bản địa

Dưới đây là một số ý tưởng và khái niệm mà bạn nên làm quen trước khi bắt đầu làm việc với React Native

• Bạn nên làm quen với các khái niệm lập trình như hàm, đối tượng, mảng và ở mức độ thấp hơn là lớp
• Bạn nên có kiến ​​thức cơ bản về JavaScript
• Bạn nên có chút quen thuộc với HTML và CSS
• Cuối cùng, nếu bạn đã từng làm việc với React trước đây, bạn đã biết rất nhiều về React Native và hoàn toàn không có vấn đề gì khi làm việc với nó

Tạo một ứng dụng gốc React. Ứng dụng việc cần làm

Chúng tôi sẽ tạo ứng dụng di động của mình và chúng tôi sẽ gọi nó là Việc cần làm. Ứng dụng này sẽ cho phép chúng tôi thêm và quản lý các tác vụ trong ứng dụng. Trong hướng dẫn về phản ứng gốc này, chúng tôi sẽ tập trung vào việc chạy ứng dụng trong hệ điều hành Android, vì vậy mã được tối ưu hóa cho phù hợp. Chúng tôi khuyên bạn nên sử dụng điện thoại di động Android cho hướng dẫn này

Ứng dụng di động cuối cùng của chúng ta sẽ trông như thế này. Bắt đầu nào

Thiết lập môi trường phát triển

“Expo là một framework và một nền tảng cho các ứng dụng React phổ biến. Nó là một tập hợp các công cụ và dịch vụ được xây dựng xung quanh React Native và các nền tảng gốc giúp bạn phát triển, xây dựng, triển khai và lặp lại nhanh chóng trên iOS, Android và các ứng dụng web từ cùng một cơ sở mã JavaScript. ”  - Tài liệu triển lãm

Điều hướng đến https. // hội chợ triển lãm. io/học. Chúng tôi sẽ sử dụng khung Expo để phát triển ứng dụng React Native của mình. There you will find all the instructions you need to start creating

• The first step is not relevant in our case; so let’s skip it and directly start with Step 02, which is to install nodeJS on the computer.  

• After nodeJS is installed, we need to follow Step 03 and get the command-line tool for Expo; for that, type the following command in the command prompt or terminal

npm install Expo-cli --global

• After the Expo-cli tool is installed, we need to follow Step 04 and create our project. To do that, type the following command in the command prompt or terminal

expo init todo-app

Next, choose blank from this screen for a blank application while including Expo workflow features

Enter the name of your application, and press Enter to continue setting up the application

• To start the application, you can navigate to the newly created project folder and type “npm start. ” To stop the application, press Ctrl + C

cd todo-app

npm start

FREE Java Certification Training

The development server will start running, and a new tab will open in your web browser with the Expo manager screen

There are two ways you can now preview the application

• You can either run the app on an Android emulator, which you can get by installing Android Studio on the computer
• Or, you can install the Expo application on your phone and scan the QR code to run the application on the phone. The To-do app will load and will update as you make changes in the code

Install a text editor of your choice. Chúng tôi đang sử dụng Visual Studio Code trong hướng dẫn gốc phản ứng này. Still, you can also use other editors like Atom and Sublime Text if you are more comfortable with those

Now we have all the tools we need to create a new React Native application. We have already created one, the To-do app. So let’s get started by creating the components of our mobile application

Create Components of the App

Similar to React, everything here is a component. Everything you see here is a separate component that has been combined to create a complete mobile application. The following are the components that we will be creating for this application

• Ứng dụng

  This component will act as a container for all the other components to come together and provide a complete application

• Header

  As the name suggests, this component will be the header of the mobile application

• Display Image

  This component is used here to display the image on the main screen

• To-do Item

  Each task added is a separate component 

• To-do Input

  This component is used to add tasks to the application

It is very important to visualize a React Native application in terms of components before starting to work on it, and that’s precisely what we are doing here

Let’s now start with the development of To-do App

• Open the project folder in the text editor, and inside the src folder, create a components folder into which we will add all our components

1. Header

1. Inside the components folder, create a new file named Header. js
2. Add the following code in that file. We see below how the code works

1. import React from "react";
2. import { StyleSheet, View, Text } from "react-native";
3.  
4. const Header = props => {
5.   return (
6.     
7.       {props.title}
8.     
9.   );
10. };
11.  
12. const styles = StyleSheet. create({
13.   header. {
14.     width. "100%",
15.     height. 100,
16.     paddingTop. 40,
17.     backgroundColor. "màu đỏ tía",
18.     alignItems. "center",
19.     justifyContent. "center"
20.   },
21.   headerTitle. {
22.     color. "white",
23.     fontSize. 20
24. }
25. });
26.  
27. xuất Tiêu đề mặc định;

1. Nhập phản ứng. (Dòng 1)
2. Nhập các thành phần React Native. (Dòng 2)
3. Trả lại văn bản Tiêu đề cùng với kiểu. (Dòng 5 – 9)
4. Thêm kiểu để tạo Tiêu đề bằng StyleSheet. (Dòng 12 – 25)
5. Xuất thành phần. (Dòng 27)

     2. Hình ảnh hiển thị

1. Trong thư mục thành phần, tạo một tệp mới có tên DisplayImage. js
2. Add the following code in that file. We see below how the code works

1. import React from "react";
2. nhập {Hình ảnh, Biểu định kiểu} từ "reac-igen";
3.  
4. const DisplayImage = đạo cụ => {
5. nếu (đạo cụ. nhiệm vụTrạng thái. chiều dài < 1) {
6. trở về (
8.     );
9.   } else {
10.     return null;
11. }
12. };
13.  
14. const styles = StyleSheet. create({
15.   image. {
16.     width. 250,
17.     height. 250,
18.     margin. 80,
19.     marginTop. 250
20. }
21. });
22.  
23. export default DisplayImage;
24.  

1. Nhập phản ứng. (Dòng 1)
2. Import React native components. (Line 2)
3. If condition (conditional rendering) to display the image only when there is no task. (Dòng 5 – 11)
4. Image source is the location of the image where it is to be imported from. (Line 7)
5.  Add style using StyleSheet to define the size and alignment of the image. You may adjust the size of the image according to your screen size. (Lines 14 – 21)
6.  Export the component. (Line 23)

     3. To-do Item

1. Inside the components folder, create a new file named TodoItem. js
2. Add the following code to that file. We see below how the code works

1. import React, { useState } from "react";
2. import {
3.   View,
4.   Text,
5.   StyleSheet,
6.   TouchableOpacity,
7.   CheckBox
8. } from "react-native";
9.  
10. const TodoItem = props => {
11.   const [check, setCheck] = useState(false);
12.   return (
13.     
14.       
15.         {props.title}
16.       
17.        setCheck(!check)} />
18.       
19.         onPress={props. onDelete. bind(this, props. id)}
20.         style={styles. button}
21.       >
22.         Delete
23.       
24.     
25.   );
26. };
27.  
28. const styles = StyleSheet. create({
29.   listItem. {
30.     padding. 10,
31.     backgroundColor. "#eee",
32.     borderColor. "màu đen",
33.     borderWidth. 1,
34.     width. "60%"
35.   },
36.   screen. {
37.     flexDirection. "row",
38.     marginTop. 30,
39. biện minh cho nội dung. "không gian giữa",
40. bề rộng. "100%"
41.   },
42. cái nút. {
43. trưng bày. "uốn cong",
44. Chiều cao. 40,
45. bán kính biên giới. 5,
46.     padding. 10,
47. màu nền. "màu đỏ",
48.     alignItems. "center",
49.     justifyContent. "center"
50.   },
51. nútMàu xanh lá cây. {
52. trưng bày. "uốn cong",
53. Chiều cao. 40,
54. bán kính biên giới. 5,
55.     padding. 10,
56. màu nền. "màu xanh lá",
57.     alignItems. "center",
58.     justifyContent. "center"
59.   },
60. chữ. {
61. cỡ chữ. 14,
62. màu sắc. "trắng"
63. }
64. });
65.  
66. xuất TodoItem mặc định;
67.  

1. Nhập hook React và useState. (Dòng 1)
2. Nhập các thành phần gốc React. (Dòng 2 - 8)
3. Xác định trạng thái để chuyển đổi hộp kiểm. (Dòng 11)
4. Hiển thị các mục trong danh sách, hộp kiểm và nút Xóa. (Dòng 13 – 25)
5. Thêm kiểu bằng StyleSheet vào các thành phần. (Dòng 28 – 64)
6. Xuất thành phần. (Dòng 66)

4. Đầu vào việc cần làm

1. Trong thư mục thành phần, tạo một thư mục mới có tên TodoInput. js
2. Add the following code to that file. We see below how the code works

1. import React, { useState } from "react";
2. import {
3.   View,
4. Nhập văn bản,
5. Cái nút,
6.   StyleSheet,
7. phương thức,
8. Báo động,
9. Hình ảnh
10. } from "react-native";
11. nhập Tiêu đề từ ". /tiêu đề";
12.  
13. const TodoInput = đạo cụ => {
14. const [enteredTask, setEnteredTask] = useState("");
15.  
16. const TodoInputHandler = văn bản đã nhập => {
17. setEnteredTask(enteredText);
18. };
19.  
20. const addTaskHandler = () => {
21. đạo cụ. onAddTask(enteredTask);
22. setEnteredTask("");
23. };
24.  
25. const checkInput = đã nhậpTask => {
26. nếu (đã nhậpTask. chiều dài > 0) addTaskHandler();
27. khác {
28. Báo động. alert("Lỗi", "Vui lòng nhập Nhiệm vụ", [{ văn bản. "ĐƯỢC RỒI" }], {
29. có thể hủy bỏ. sai
30.       });
31. }
32. };
33.  
34.   return (
35.     
36.       
37.  
38.       
39. < Nhập văn bản
40. trình giữ chỗ="Nhiệm vụ"
41. phong cách={phong cách. đầu vào}
42. onChangeText={TodoInputHandler}
43. value={enteredTask}
44. />
47.             
48. tiêu đề="HỦY"
49. màu = "đỏ"
50. onPress={đạo cụ. onCancel}
51. >
52.           
54.             
55. tiêu đề="THÊM"
56. màu = "xanh"
57. onPress={() => checkInput(enteredTask)}
58. />
59.           
60.         
61.       
62.     
63.   );
64. };
65.  
66. const styles = StyleSheet. create({
67. đầu vàoContainer. {
68. uốn cong. 1,
69. biện minh cho nội dung. "trung tâm",
70. căn chỉnh. "trung tâm"
71.   },
72. đầu vào. {
73. bề rộng. "80%",
74.     borderColor. "màu đen",
75.     borderWidth. 1,
76.     padding. 10,
77. lềBên dưới. 10
78.   },
79. nútContainer. {
80.     flexDirection. "row",
81. biện minh cho nội dung. "không gian xung quanh",
82.     width. "60%"
83.   },
84. cái nút. {
85. bề rộng. "40%"
86. }
87. });
88.  
89. xuất TodoInput mặc định;
90.  

1. Nhập hook React và useState. (Dòng 1)
2. Nhập các thành phần gốc React. (Dòng 2 – 10)
3. Nhập thành phần Tiêu đề. (Dòng 11)
4. Xác định trạng thái, Văn bản đã nhập,  để thêm tác vụ vào ứng dụng của bạn. (Dòng 14)
5.  Các hàm được đặt tên phù hợp theo nhiệm vụ mà chúng thực hiện.
   > TodoInputHandler. đặt trạng thái đã nhậpTask thành đã nhậpText. (Dòng 16 – 18) 
   > addTaskHandler. xóa trường văn bản sau khi thêm một nhiệm vụ. (Dòng 20 – 23) 
   > checkInput. kiểm tra xem người dùng đã nhập tác vụ hay để trống trường. (Dòng 25 – 32
6. Trả về một phương thức (thành phần gốc phản ứng) có chứa trường đầu vào và các nút. (Dòng 35 – 62)
7. Add styles using StyleSheet to the components. (Dòng 66 – 87)
8. Xuất thành phần. (Dòng 89)

5. Ứng dụng

1. Thay thế mã mặc định trong Ứng dụng. js với đoạn mã sau. Chúng tôi hiển thị bên dưới cách thức hoạt động của mã

1. import React, { useState } from "react";
2. nhập { StyleSheet, View, Button, FlatList, Image } từ "reac-native";
3.  
4. nhập TodoItem từ ". / thành phần/TodoItem";
5. nhập TodoInput từ ". / thành phần/TodoInput";
6. nhập DisplayImage từ ". / thành phần/DisplayImage";
7. nhập Tiêu đề từ ". / thành phần/Tiêu đề";
8.  
9. xuất chức năng mặc định App() {
10. const [nhiệm vụ, setT task] = useState([]);
11. const [addTasks, setAddTasks] = useState(false);
12.  
13. const addTaskHandler = taskTitle => {
14. setT task(currentT task => [
15.       . Nhiệm vụ hiện tại,
16. { Tôi. môn Toán. ngẫu nhiên(). toString(), giá trị. tiêu đề nhiệm vụ}
17. ]);
18. setAddT task(false);
19. };
20.  
21. const deleteTaskHandler = taskId => {
22. setT task (currentT task => {
23. trả về nhiệm vụ hiện tại. bộ lọc (nhiệm vụ => nhiệm vụ. Tôi. == taskId);
24. });
25. };
26.  
27. const canceltaskAdditionHandler = () => {
28. setAddT task(false);
29. };
30.  
31.   return (
33.       
35. setAddT task(true)}>
36.         
37. có thể nhìn thấy = {addT task}
38. onAddTask={addTaskHandler}
39. onCancel={canceltaskAdditionHandler}
40. />
41.       
43.  
45.         
46. keyExtractor={(mục, chỉ mục) => mục. Tôi}
47. dữ liệu={nhiệm vụ}
48. renderItem={itemData => (
49.             
50. title={itemData. mục. giá trị}
51. onDelete={xóaTaskHandler}
52. id={itemData. mục. Tôi}
53. />
54. )}
55.         >
56.       
57.     
58.   );
59. }
60.  
61. const styles = StyleSheet. create({
62.   screen. {
63. đệm hàng đầu. 70,
64. đệmNgang. 70
65.   },
66. danh sách màn hình. {
67. lề trái. 20,
68. lề phải. 20
69. }
70. });
71.  

1. Nhập hook React và useState. (Dòng 1)
2. Import React native components. (Line 2)
3. Nhập các thành phần này của dự án vào thành phần ứng dụng. (Lines 4 – 7)
   > TodoItem
   > TodoInput
   > DisplayMessage
   > Header
4. Xác định trạng thái ban đầu cho dữ liệu được hiển thị. (Dòng 10 – 11)
5. Các chức năng được đặt tên phù hợp theo nhiệm vụ mà chúng thực hiện.
   > addTaskHandler. thêm nhiệm vụ vào danh sách. (Dòng 13 – 19)
   > deleteTaskHandler. xóa nhiệm vụ khỏi danh sách. (Dòng 21 – 25)
   > canceltaskAdditionHandler. hủy bỏ việc thêm nhiệm vụ vào danh sách. (Dòng 27 – 29)
6. Trả về các thành phần trong khi truyền đạo cụ cho từng thành phần. (Dòng 31 -58)
7. Thêm kiểu dáng cho các thành phần bằng StyleSheet. (Dòng 61 - 70)

Chúng tôi đã hoàn thành việc phát triển ứng dụng di động Việc cần làm của mình và ứng dụng này sẽ hoạt động như minh họa bên dưới. Hãy tiếp tục và tóm tắt tất cả những gì chúng tôi đã làm để tạo ứng dụng di động này.  

Tóm tắt các bước

1. Thiết lập môi trường để phát triển ứng dụng
2. Cài đặt ứng dụng Expo trên thiết bị di động để xem trước ứng dụng theo thời gian thực
3. Trực quan hóa ứng dụng theo các thành phần và sau đó duy trì cấu trúc dự án tương ứng trong trình soạn thảo văn bản
4. Thêm tất cả các thành phần vào dự án
5. Đảm bảo mỗi thành phần hoạt động như mong đợi
6. Tận hưởng kết quả và thoải mái tinh chỉnh thiết kế và chức năng theo ý muốn

Bây giờ chúng tôi đã tạo một ứng dụng di động đầy đủ chức năng bằng cách sử dụng React Native hoạt động và trông rất tuyệt. Chúng tôi hy vọng bạn có thể làm theo tất cả các hướng dẫn một cách dễ dàng và có thể ngồi lại và tận hưởng thành quả của mình

Xu hướng công nghiệp

React Native đã trở nên rất phổ biến trong thế giới phát triển ứng dụng di động và mức độ phổ biến đó đang tăng lên đều đặn

• Với việc áp dụng React Native ngày càng tăng, thế giới kỹ thuật số cần nhiều nhà phát triển có kiến ​​thức hơn. Do đó, mức lương của nhà phát triển React Native ở mức cao hơn khi so sánh với các nhà phát triển front-end khác

Mức lương trung bình cho một nhà phát triển React Native trên khắp Hoa Kỳ là 91.000 USD mỗi năm

Mức lương trung bình cho một nhà phát triển React Native ở Ấn Độ là ₹7,25,000 mỗi năm

• React Native là một công cụ tương đối mới trong thế giới phát triển ứng dụng nhưng đã được nhiều công ty nổi tiếng như Facebook, Instagram, Airbnb và Netflix áp dụng

Điều này đưa chúng ta đến cuối hướng dẫn của chúng tôi. Hãy nhớ rằng, React Native là framework phổ biến nhất để xây dựng các ứng dụng di động và nó sẽ tồn tại mãi mãi. Sự phổ biến ngày càng tăng của framework đã dẫn đến nhu cầu ngày càng tăng đối với nhiều nhà phát triển React Native hơn, nhu cầu không có dấu hiệu giảm bớt, khiến đây trở thành một lựa chọn nghề nghiệp rất hấp dẫn. To learn more, check out our React. js Training Course.