CODE VN

CODE VN

1644223898

Cách sử dụng React với SVG cho người mới bắt đầu

Đồ họa vectơ có thể mở rộng (SVG) là một cú pháp giống như XML được sử dụng để hiển thị đồ họa vectơ hoặc hình ảnh trong trình duyệt. Đồ họa vectơ do SVG sản xuất có thể được thu nhỏ hoặc phóng to đến mức tối đa mà không bị tăng hoặc giảm chất lượng. Khía cạnh thú vị nhất là SVG được hỗ trợ bởi tất cả các trình duyệt chính. Trong hướng dẫn này, bạn sẽ học cách vẽ đồ họa (cụ thể là Logo Mastercard) và hình dạng bằng SVG và cách thêm đồ họa SVG vào ứng dụng React của bạn.

Hiểu cú pháp SVG

Nếu bạn đã quen với HTML hoặc XML, thì việc sử dụng cú pháp của SVG sẽ khá đơn giản để nắm bắt. Việc viết các phần tử SVG dựa trên hai nguyên tắc nghiêm ngặt:

  1. Tất cả các thuộc tính phải được đặt trong dấu ngoặc kép bất kể loại giá trị (chuỗi hay số nguyên), như được hiển thị bên dưới
<rect width="100%" fill="purple" ...../>

2. Các phần tử và thuộc tính SVG đều có phân biệt chữ hoa chữ thường, do đó, việc thay đổi trường hợp của một phần tử hoặc thuộc tính là SVG không hợp lệ.

/ Drawing a rectangle 
<rect width="100%" fill="purple" ...../>

// NOT

<RECT WIDTH="100%" FILL="ORANGE"../>

Vẽ hình dạng

Như đã đề cập, bạn sẽ học cách vẽ logo Mastercard bằng SVG. Mỗi phần tử SVG được bao quanh một <svg/>thẻ có phiên bản và kích thước của vùng vẽ.

<svg version="1.1" baseProfile="full" 
			width="400" height="250" 
			xlmns="http://www/w3/org/2000/svg">
// Content Here
</svg>

Tiếp theo, thêm một hình chữ nhật với nền đen.

<svg version="1.1" baseProfile="full" 
			width="400" height="250" 
			xlmns="http://www/w3/org/2000/svg">
<rect width="100%" height="100%" fill="black"></rect>
</svg>

Thêm hai đường tròn cắt nhau.

<svg version="1.1" baseProfile="full" 
			width="400" height="250" 
			xlmns="http://www/w3/org/2000/svg">
<circle cx="150" cy="100" r="80" fill="red"></circle>
<circle cx="256" cy="100" r="80" fill="orange"></circle>
</svg>

Thuộc rtính đề cập đến bán kính của hình tròn.

cxcytham chiếu đến vị trí của phần tử trên tọa độ x và y của đường tròn.

Cuối cùng, thêm một số văn bản vào logo của bạn.

<svg version="1.1" baseProfile="full" 
			width="400" height="250" 
			xlmns="http://www/w3/org/2000/svg">
<circle cx="150" cy="100" r="80" fill="red"></circle>
<circle cx="256" cy="100" r="80" fill="orange"></circle>
<text x="200" y="219" font-size="20" text-anchor="middle" fill="white">MasterCard</text>
</svg>

Để xem nó trông như thế nào, hãy tạo một tệp HTML và mở nó trong trình duyệt của bạn. Bạn là một thiên tài! Cố gắng điều chỉnh thêm một số thuộc tính để hiểu thêm về những gì chúng làm.

Thiết lập và ứng dụng

Bây giờ bạn đã có logo SVG đẳng cấp thế giới, hãy thiết lập ứng dụng React của bạn bằng cách nhập thông tin sau vào thiết bị đầu cuối của bạn.

npx create-react-app <YOUR_APP_NAME>

Bạn cũng có thể truy cập https://react.new để có được môi trường React được cấu hình đầy đủ trên Codeandbox.io .

Thêm SVG vào ứng dụng

Việc hiển thị một phần tử SVG rất đơn giản với Create React App. Để làm như vậy, hãy tạo tệp SVG có chứa biểu trưng bạn đã tạo và lưu nó. Trong hướng dẫn này, tôi giả sử bạn đã lưu nó trong svg /.

Tiếp theo, nhập nó vào ứng dụng của bạn, như được hiển thị bên dưới.

import React from 'react';
import { ReactComponent as MyLogo } from './assets/logo.svg';

function App(){
	return(
		<div>
				<MyLogo/>
		</div>
	);
}

Trong hướng dẫn này, bạn đã học cách tạo phần tử SVG và thêm phần tử đó vào ứng dụng React. SVG vượt xa việc tạo ra các hình dạng cơ bản. Bạn có thể làm nhiều thứ hơn, bao gồm cả chuyển màu và hoạt ảnh.

What is GEEK

Buddha Community

Autumn  Blick

Autumn Blick

1598839687

How native is React Native? | React Native vs Native App Development

If you are undertaking a mobile app development for your start-up or enterprise, you are likely wondering whether to use React Native. As a popular development framework, React Native helps you to develop near-native mobile apps. However, you are probably also wondering how close you can get to a native app by using React Native. How native is React Native?

In the article, we discuss the similarities between native mobile development and development using React Native. We also touch upon where they differ and how to bridge the gaps. Read on.

A brief introduction to React Native

Let’s briefly set the context first. We will briefly touch upon what React Native is and how it differs from earlier hybrid frameworks.

React Native is a popular JavaScript framework that Facebook has created. You can use this open-source framework to code natively rendering Android and iOS mobile apps. You can use it to develop web apps too.

Facebook has developed React Native based on React, its JavaScript library. The first release of React Native came in March 2015. At the time of writing this article, the latest stable release of React Native is 0.62.0, and it was released in March 2020.

Although relatively new, React Native has acquired a high degree of popularity. The “Stack Overflow Developer Survey 2019” report identifies it as the 8th most loved framework. Facebook, Walmart, and Bloomberg are some of the top companies that use React Native.

The popularity of React Native comes from its advantages. Some of its advantages are as follows:

  • Performance: It delivers optimal performance.
  • Cross-platform development: You can develop both Android and iOS apps with it. The reuse of code expedites development and reduces costs.
  • UI design: React Native enables you to design simple and responsive UI for your mobile app.
  • 3rd party plugins: This framework supports 3rd party plugins.
  • Developer community: A vibrant community of developers support React Native.

Why React Native is fundamentally different from earlier hybrid frameworks

Are you wondering whether React Native is just another of those hybrid frameworks like Ionic or Cordova? It’s not! React Native is fundamentally different from these earlier hybrid frameworks.

React Native is very close to native. Consider the following aspects as described on the React Native website:

  • Access to many native platforms features: The primitives of React Native render to native platform UI. This means that your React Native app will use many native platform APIs as native apps would do.
  • Near-native user experience: React Native provides several native components, and these are platform agnostic.
  • The ease of accessing native APIs: React Native uses a declarative UI paradigm. This enables React Native to interact easily with native platform APIs since React Native wraps existing native code.

Due to these factors, React Native offers many more advantages compared to those earlier hybrid frameworks. We now review them.

#android app #frontend #ios app #mobile app development #benefits of react native #is react native good for mobile app development #native vs #pros and cons of react native #react mobile development #react native development #react native experience #react native framework #react native ios vs android #react native pros and cons #react native vs android #react native vs native #react native vs native performance #react vs native #why react native #why use react native

Hoang  Kim

Hoang Kim

1661504700

Cách Bắt đầu Với React Hook form Cho Người Mới Bắt đầu

Trong React, việc tạo biểu mẫu có thể là một công việc tẻ nhạt và lặp đi lặp lại. Hơn nữa, khi số lượng trường đầu vào và xác nhận ngày càng tăng, tình hình trở nên phức tạp hơn. Thư viện biểu mẫu có sẵn để hỗ trợ trong tình huống này và bài viết này sẽ thảo luận về các vấn đề mà thư viện biểu mẫu nên cố gắng giải quyết.

Gói này là gì, và tại sao sử dụng nó?

React Hook Form là một mô-đun React nhỏ gọn cho phép xác thực biểu mẫu mà không cần thêm phụ thuộc. Nó yêu cầu ít mã hóa hơn các khuôn khổ biểu mẫu khác và dễ sử dụng.

Ưu điểm của nó bao gồm:

  • Xác thực tích hợp: React Hook Form có tùy chọn để chuyển vào lược đồ xác thực và cung cấp xác thực cục bộ.
  • Hiệu suất: Sử dụng hooks, React hook form phá hủy sự cạnh tranh của Formik và Redux.
  • Tích hợp với các thành phần tùy chỉnh và thư viện của bên thứ ba.
  • Cực kỳ tối thiểu và độc lập.

Xây dựng một dự án React mới với Typescript

Thật đơn giản để bắt đầu sử dụng React với một mẫu Typecript. Các dự án React có thể được tạo bằng cách sử dụng công cụ tạo dự án React. Nó sẽ mở đầu một dự án mới với một số tệp ví dụ để bạn bắt đầu. Tạo một dự án React mới bằng cách chạy lệnh sau từ thiết bị đầu cuối:

yarn create react-app react-hook-form --template typescript

Sau khi dự án được tạo, hãy xóa các tệp không cần thiết khỏi thư mục src sau khi dự án đã được tạo.

Chạy lệnh sau từ thiết bị đầu cuối để cài đặt thư viện biểu mẫu:

yarn add react-hook-form

Xác định kiểu cho dữ liệu biểu mẫu

Để bắt đầu, chúng ta phải nhập thư viện cho React Hook Form trong bất kỳ thành phần nào sẽ sử dụng nó.

import { useForm } from "react-hook-form";

Chúng tôi sẽ phải xác định bí danh kiểu bên trên phần thân của FormValues ​​thành phần của chúng tôi —và gửi nó vào useForm như một kiểu chung để có được các biểu mẫu được nhập chặt chẽ:

type InputTypes = {
  lastName: string; 
  surname: string;
  telePhone: number;
  image: string;
  birthDate: string;
  male: boolean;
  female: boolean;
  language: string;
};

Sau đó, Hook sẽ được sử dụng như sau bên trong thành phần của chúng tôi:

const { register, handleSubmit } = useForm<InputTypes>();

Các tham số kiểu cho các kiểu được phép của từng trường đầu vào được chứa trong bí danh này. FormValues ​​giờ đây đóng vai trò như một loại lược đồ bằng cách được gửi vào useForm, đảm bảo rằng tên của các trường đầu vào khớp với các khóa trong bí danh và các giá trị được gửi vào các trường đầu vào tuân theo tiêu chí loại.

Kiểm tra các đầu vào khác nhau với React Hook Form

Hãy bắt đầu bằng cách xây dựng một biểu mẫu cơ bản với một vài trường đầu vào.

function App() {
  const {
    register,
    handleSubmit,
    watch,
    setValue,
    formState: { errors },
  } = useForm<InputsTypes>();
  return (
    <div className={styles.appContainer}>
      <form className={styles.innerContainer}>
        <h2>Register</h2>
        <div className={styles.inputContainer}>
          <label>Lastname</label>
          <input
            placeholder= "Jon"
            autoComplete="off"
            className={styles.nameInput}
            {...register("lastName")}
          />
          <label>Surname</label>
          <input
            placeholder="Doe"
            className={styles.nameInput}
            autoComplete="off"
            {...register("surname")}
          />
          <label>Phone</label>
          <input
            placeholder="012345678"
            autoComplete="off"
            {...register("telePhone")}
            className={styles.nameInput}
            type="tel"
          />
          <label>Image</label>
          <input
            className={styles.nameInput}
            type="file"
            {...register("image")}
          />
          <label>D.O.B</label>
          <input
            className={styles.nameInput}
            type="date"
            {...register("birthDate")}
          />
          <label>Gender</label>
          <div>
            <label>Male</label>
            <input
              className={styles.checkGender}
              type="radio"
              value="male"
              {...register("male")}
            />
            <label>Female</label>
            <input
              className={styles.checkGender}
              type="radio"
              value="female"
              {...register("female")}
            />
          </div>
          <label>Language</label>
          <select id="lang" {...register("language")}>
            <option selected value="English">
              English
            </option>
            <option value="Deutsch">German</option>
            <option value="Spanish">Spanish</option>
            <option value="Urdu">Urdu</option>
            <option value="Hindi">Hindi</option>
            <option value="Greek">Greek</option>
            <option value="French">French</option>
            <option value="Zulu">Zulu</option>
          </select>
        </div>
        <div className={styles.buttonContainer}>
          <button>Submit</button>
        </div>
      </form>
    </div>
  );
}

Kết quả của mã của chúng tôi được xem ở đây.

1 đầu ra

Điều quan trọng cần lưu ý là mỗi trường đầu vào có một chức năng đăng ký . Bạn có thể thêm phần tử được chọn hoặc đầu vào vào Biểu mẫu React Hook và thiết lập các quy tắc xác thực bằng cách sử dụng chức năng này. Mặc dù có tiềm năng cho các phương pháp xác thực thay thế, tất cả các quy tắc xác thực đều dựa trên tiêu chuẩn HTML. Để React Hook Form tuân theo dữ liệu thay đổi, hãy lưu ý rằng mỗi đầu vào có một tên duy nhất phải được cung cấp trong hàm đăng ký, tên này cũng khớp với FormValues ​​đã đề cập trước đó.

Biểu mẫu không có nút gửi như chúng ta đều biết có ích lợi gì? Phương thức handleSubmit kiểm soát việc gửi biểu mẫu, như tên gọi của nó. Nó phải được cung cấp dưới dạng giá trị cho phần hỗ trợ onSubmit của thành phần biểu mẫu. Bây giờ bạn đã hiểu rõ về cách sử dụng cơ bản của useForm Hook, hãy xem một minh họa thực tế hơn:

const submitHandler: SubmitHandler<InputsTypes> = (data) => {
    console.log(data);
  };

<form onSubmit={handleSubmit(submitHandler)}>
  {/* ... */}
</form>

Xác thực các biểu mẫu với React useForm Hook

Bạn có thể cung cấp các tham số xác thực cho phương thức đăng ký để áp dụng xác thực cho một trường.

Các tính năng được liệt kê dưới đây nằm trong số các tiêu chí xác thực này:

  • required: Trường đầu vào không cần thiết khi được đặt thành false và cần thiết khi ngược lại.
  • pattern: Mẫu regex (biểu thức chính quy) được sử dụng để nhập.
  • minmax: Điều này chỉ định giá trị thấp nhất và lớn nhất của một giá trị số.
  • minlengthmaxlength: Điều này đặt độ dài tối thiểu và tối đa của chuỗi đầu vào.

Việc tạo một đầu vào được yêu cầu bằng React useForm Hook đơn giản như sau:

<input
    className={styles.nameInput}
    type="lastName"
    {...register("lastName", {
    required: "Field is required",
    maxLength: 10,
    pattern: {
          value: /^[A-Za-z]+$/i,
          message: "No spaces allowed",
        },
    })}
      />
  {<p> {errors.lastName && errors.lastName.message}</p>}

Trường nhập trong đoạn mã trên là bắt buộc. Nếu độ dài của giá trị đầu vào vượt quá thuộc tính độ dài tối đa được chỉ định và mẫu đối sánh không khớp với giá trị đầu vào, thì đó sẽ là một lỗi.

2 Xác thực bằng React Hook Form

Xử lý nhiều nút radio

Hãy xem xét cách xử lý nhiều hộp kiểm React bắt buộc, đặc biệt trong các tình huống khi chúng ta muốn chọn ít nhất một hộp kiểm. React Hook Form cũng cung cấp một chức năng theo dõi sẽ theo dõi các giá trị của các đầu vào được cung cấp và trả lại chúng. Khi hiển thị các giá trị đầu vào, việc chọn những gì sẽ hiển thị dựa trên các điều kiện là hữu ích.

const { register, handleSubmit, watch, setValue } = useForm<InputTypes>();

Quan sát rằng useForm Hook trả về một hàm khác được gọi là setValue cho phép bạn đặt động giá trị của trường đã đăng ký, đồng thời xác thực và cập nhật trạng thái của biểu mẫu. Nó cũng cố gắng ngăn chặn kết xuất không cần thiết.

const App = () => {
const gender = watch();
useEffect(() => {
  if (gender.male) {
    setValue("female", false);
  }
}, [gender.male, setValue]);
useEffect(() => {
  if (gender.female) {
    setValue("male", false);
  }
}, [gender.female, setValue]);

return (
  <div>
<label>Male</label>
  <input
    className={styles.checkGender}
    type="radio"
    value="male"
    {...register("male", {
    required: !gender.female && !gender.male ,
    })}
  />

<input
  className={styles.checkGender}
  type="radio"
  value="female"
  {...register("female", { required: !gender.male && !gender.female })}
/>     
      {errors.female && errors.male && <p>Field is required</p>}
  </div>
)}

3 Xử lý nhiều nút vô tuyến

Xử lý lỗi trong biểu mẫu React Hook

Một đối tượng lỗi được cung cấp bởi React Hook Form để hiển thị các lỗi của biểu mẫu. Với các hạn chế của xác thực, loại lỗi sẽ được trả về. Ví dụ sau minh họa một quy tắc xác thực cần thiết.

const { register, handleSubmit, formState: { errors } } = useForm<InputTypes>();

Chúng tôi có thể hiển thị lỗi bằng cách sử dụng useForm Hook như thế này:

<label>D.O.B</label>
<input
  className={styles.nameInput}
  type="date"
  {...register("birthDate",{required: true})}
/>
{errors.lastName && <p>Field is required</p>}

4 Xử lý lỗi

Sự kết luận

Một đóng góp tuyệt vời cho cộng đồng mã nguồn mở React là React Hook Form. Đối với các nhà phát triển, nó đã làm cho việc xây dựng và duy trì các biểu mẫu trở nên đơn giản hơn đáng kể. Tính năng đáng ngưỡng mộ nhất của thư viện này là cách sử dụng linh hoạt và mức độ nhấn mạnh trải nghiệm của nhà phát triển. Bạn có thể kiểm tra toàn bộ mã và tham khảo tại đây . Chúc mừng bạn ✌️

Liên kết: https://blog.openreplay.com/get-started-with-react-hook-form

#react #reactjs #javascript

Thai  Son

Thai Son

1650595304

Cách Bắt Đầu Với React - Hướng Dẫn Cho Người Mới Bắt Đầu

React (còn được gọi là React.js hoặc ReactJS) là một thư viện JavaScript front-end mã nguồn mở miễn phí để tạo giao diện người dùng dựa trên thành phần UI.

React được duy trì bởi Meta (trước đây là Facebook) cùng với một cộng đồng các nhà phát triển và tổ chức cá nhân.

Theo khảo sát dành cho nhà phát triển Stack Overflow năm 2021 , React đã vượt qua jQuery để trở thành web framework được sử dụng phổ biến nhất với khoảng 40,14% thị phần. Nó cũng được mong muốn nhất, cứ bốn nhà phát triển thì có một người sử dụng nó. React cũng được sử dụng bởi hơn 8000 nhà lãnh đạo trong ngành.

Trong bài viết này, chúng ta sẽ xem lý do tại sao bạn nên học React và cách bắt đầu với nó.

Tại sao nên học React?

Có nhiều lý do tại sao bạn nên học React, nhưng đây là một số điểm thường được đề cập nhất được nhiều chuyên gia React nhấn mạnh:

React rất dễ sử dụng

Nhiều người, bao gồm cả tôi, thích React vì tính đơn giản, linh hoạt, hiệu suất, khả năng sử dụng, DOM ảo, các thành phần và nhiều tính năng khác.

Làm việc với React đơn giản hóa cuộc sống của chúng tôi với tư cách là nhà phát triển vì cơ sở hạ tầng đơn giản và mô-đun của nó, cho phép chúng tôi xây dựng và bảo trì các ứng dụng của mình nhanh hơn nhiều.

Có nhu cầu cao đối với các nhà phát triển React

Tại Hoa Kỳ, mức lương trung bình hàng năm cho một nhà phát triển React là 120.000 đô la. Nhiều doanh nghiệp và công ty sử dụng React, điều này buộc họ phải tìm kiếm tài năng mới hàng ngày.

Nếu bạn có bất kỳ sự e ngại nào về việc học hoặc trở thành nhà phát triển React, hãy xem xét lại. Không cần phải lo lắng - rất có thể sẽ luôn có một công việc dành cho bạn với tư cách là nhà phát triển React vì có hàng nghìn vị trí đang mở ngay bây giờ (thậm chí từ xa).

Không khó để học những điều cơ bản về React

Điều này có thể được hiểu theo cách khác, vì học React như một lập trình viên mới bắt đầu hoàn chỉnh chắc chắn sẽ mất nhiều thời gian hơn học JavaScript như một chuyên gia. Nhưng ý tôi là React không khó để nắm bắt một khi bạn đã hiểu kỹ các nguyên tắc cơ bản của JavaScript.

React cũng cho phép bạn sử dụng lại các phần chức năng đơn giản trên ứng dụng web React của bạn.

Tóm lại, React tương đối đơn giản để học, có một cộng đồng hỗ trợ lớn với nhiều dự án mã nguồn mở trên Github và cung cấp nhiều cơ hội việc làm.

Học React cũng sẽ giúp bạn hiểu rõ hơn về JavaScript, điều này sẽ có ích trong suốt sự nghiệp của bạn.

Vì React là một khung công tác JavaScript, điều quan trọng là phải hiểu một số nguyên tắc cơ bản về JavaScript để có thể hiểu và hiểu React. Đây là một bài viết chi tiết về tất cả các khái niệm và phương pháp JavaScript cơ bản này như bản đồ, bộ lọc và nhiều phương pháp khác. Điều này sẽ giúp bạn học React nhanh hơn.

Cách cài đặt React

Cách tốt nhất để cài đặt React hoặc tạo một dự án React là cài đặt nó với create-react-app. Đây là một trong những bước mà hầu hết người mới bắt đầu gặp khó khăn, nhưng trong hướng dẫn này, chúng ta sẽ xem xét cách bắt đầu đúng cách và thành công.

Chúng tôi sẽ sử dụng thiết bị đầu cuối của mình cho việc này (bạn có thể sử dụng thiết bị đầu cuối tích hợp sẵn hoặc tải xuống bất kỳ thiết bị nào bạn thích). Một điều kiện tiên quyết là phải cài đặt Node.js trên PC của bạn, biết rõ rằng cần có NPM (hoặc, cách khác, Yarn). Chúng tôi sẽ sử dụng NPM cho hướng dẫn này.

Để xác nhận rằng bạn đã cài đặt Node trên PC, chỉ cần khởi chạy thiết bị đầu cuối / dấu nhắc lệnh và nhập node -vnpm -vđể xem bạn có phiên bản nào.

create-react-appyêu cầu bạn phải cài đặt NPX , nên bạn cần đảm bảo phiên bản Node của mình không nhỏ hơn v14.0.0 và phiên bản NPM của bạn không nhỏ hơn v5.6.

Giả sử bạn có phiên bản NPM cũ hơn, bạn có thể sử dụng lệnh sau để cập nhật nó:

npm update -g

Khi bạn đã tìm ra NPM, bây giờ bạn có thể cài đặt React với create-react-app.

Nếu bạn cảm thấy khó khăn khi làm việc với các thiết bị đầu cuối, bạn có thể xem bài viết này về cách sử dụng dòng lệnh cho người mới bắt đầu .

Tạo-phản ứng-ứng dụng là gì?

Mặc dù cái tên giải thích những gì nó làm, bạn có thể bắt đầu tự hỏi điều gì create-react-appthực sự có nghĩa.

Tạo một ứng dụng React theo cách thủ công rất phức tạp và tốn thời gian, nhưng create-react-applàm cho nó dễ dàng hơn nhiều bằng cách tự động hóa tất cả các cấu hình và cài đặt gói.

create-react-applà cách tốt nhất để bắt đầu xây dựng một ứng dụng trang đơn mới trong React.

Nếu bạn muốn tìm hiểu cách tạo ứng dụng React theo cách thủ công mà không có create-react-app, bạn có thể xem hướng dẫn này .

Cách tạo một ứng dụng React

Bước đầu tiên là khởi động terminal / command prompt của bạn, điều hướng đến thư mục mà bạn muốn lưu ứng dụng React của mình, sau đó thực hiện lệnh này:

npx create-react-app my-app

Lưu ý: my-app là tên của ứng dụng chúng ta đang tạo, tuy nhiên bạn có thể đổi nó thành bất kỳ tên nào mà bạn chọn.

Quá trình cài đặt có thể mất vài phút. Sau khi hoàn tất, bạn sẽ thấy một thư mục xuất hiện trong không gian làm việc của mình với tên mà bạn đã đặt cho ứng dụng của mình. Xin chúc mừng!

Cách chạy ứng dụng React của bạn

Bây giờ, quay lại terminal và điều đầu tiên bạn cần làm là điều hướng đến thư mục nơi ứng dụng đã được cài đặt bằng cách sử dụng cd my-app. Sau đó, cuối cùng chạy npm startđể xem ứng dụng của bạn trực tuyến trên localhost: 3000.

Bạn sẽ thấy một cái gì đó như thế này:

hình ảnh-9

Cấu trúc thư mục

Chúng tôi vừa hoàn thành phần đầu tiên của bài viết này. Bây giờ chúng ta hãy tìm hiểu xem mỗi tệp và thư mục trong ứng dụng React của chúng ta có ý nghĩa và chức năng gì. Điều này rất quan trọng với tư cách là người mới bắt đầu hoặc một nhà phát triển React có kinh nghiệm.

Cấu trúc thư mục của ứng dụng React mới được tạo của bạn trông giống như sau khi bạn mở nó:

hình ảnh-10

Bây giờ hãy bắt đầu bằng cách giải thích các thư mục này và chúng đại diện cho những gì:

thư mục node_modules

Thư node_modulesmục chứa tất cả các phụ thuộc của chúng tôi và thư mục này bị bỏ qua khi chúng tôi thiết lập kiểm soát nguồn. Nhưng điều quan trọng cần lưu ý là package.jsontệp hoạt động song song với node_modulesthư mục vì nó chứa thông tin về tất cả các phần phụ thuộc cũng như một số lệnh script.

Nếu bạn xóa node_modulesthư mục, ứng dụng sẽ bị hỏng vì bạn sẽ không còn các phụ thuộc của mình nữa.

Để cài đặt lại các phần phụ thuộc này, bạn có thể sử dụng npm install- thao tác này sẽ kiểm tra pakage.jsontệp để tìm danh sách các phần phụ thuộc và sau đó cài đặt tất cả chúng. Điều này sẽ giúp bạn dễ dàng đẩy mã của mình trực tuyến hoặc chia sẻ mã của bạn với người khác mà không cần phải chia sẻ node_modulesthư mục nặng.

Lưu ý: Điều này không chỉ dành cho create-react-app.

thư mục chung

Mặc dù phần lớn công việc sẽ được thực hiện trong srcthư mục, nhưng thư mục chung có chứa một số tệp tĩnh, chẳng hạn như tệp HTML. Ví dụ: bạn có thể thay đổi tiêu đề ứng dụng web của mình, thêm CDN như Google Fonts, v.v.

Lưu ý: Đừng sợ tệp này vì nó chỉ là một tệp HTML thông thường. Mã duy nhất cần nhớ là nơi divđặt id roottoàn bộ ứng dụng React.

<div id="root"></div>

tệp .gitignore

Đúng như tên gọi, đó là một tệp chỉ định tệp và thư mục nào sẽ bị kiểm soát nguồn của chúng tôi bỏ qua.

Khi bạn mở tệp, bạn sẽ thấy danh sách các tệp đang bị bỏ qua, bao gồm cả node_modulesthư mục và xây dựng. Bạn có thể quyết định thêm một số tệp hoặc thư mục cụ thể.

xây dựng thư mục

Thư mục xây dựng là một thư mục khác mà bạn không thể thấy ngay bây giờ, nhưng bạn sẽ thấy khi xây dựng dự án của mình.

Điều này sẽ tạo một thư mục nội dung tĩnh sẵn sàng sản xuất có thể được lưu trữ hoặc triển khai bằng cách sử dụng tùy chọn kéo và thả trên một nền tảng như Netlify.

thư mục src

Cho đến nay, chúng tôi đã đề cập đến một số thư mục cơ bản, nhưng mối quan tâm chính của chúng tôi là srcthư mục, nơi diễn ra quá trình phát triển. Đây là srcthư mục trông như thế nào:

hình ảnh-11

Hãy bắt đầu với các tệp cơ bản: ,, App.jsvà ( bạn có thể xóa mọi tệp khác ngay bây giờ).index.jsindex.cssApp.css

App.js

Đây là nơi mà tất cả các thành phần của bạn cuối cùng sẽ gặp nhau. Tên của tệp không quan trọng, nhưng bạn nên giữ tên này để các nhà phát triển khác có thể hiểu mã của bạn.

index.js

Đây là điểm khởi đầu cho ứng dụng của bạn. Cụ thể hơn, đây là nơi bạn nhắm mục tiêu root idtừ index.htmltệp và hiển thị App.jstệp, đây là nơi toàn bộ tệp của bạn (các thành phần và trang) sẽ đáp ứng.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

App.css và index.css

Cả hai đều chứa các kiểu cho ứng dụng của bạn. Tệp index.csschứa kiểu toàn cục và App.csstệp gần như hoạt động giống như cách làm đối với App.jstệp - nhưng việc chúng tôi sử dụng tệp CSS hay không là hoàn toàn tùy thuộc vào chúng tôi. Trong khi bắt đầu, chúng tôi có thể chọn xóa một tệp và chỉ sử dụng một tệp CSS.

Hiểu JSX

JSX là một Cú pháp mở rộng JavaScript được sử dụng trong React để dễ dàng viết HTML và JavaScript cùng nhau.

Viết mã trong React mất nhiều thời gian vì bạn phải sử dụng React.createElementhàm mọi lúc, ngay cả khi bạn chỉ thêm một hàm đơn giản div.

hình ảnh-12

Hình ảnh trên mô tả cùng một đoạn mã được viết bằng JSX và với React.createElement. Bạn có thể biết cái nào dễ viết, dễ hiểu và dễ quản lý hơn bằng cách so sánh hai cái đó.

create-react-appnội bộ sử dụng Babel để chuyển đổi JSX sang JavaScript, vì vậy bạn không phải lo lắng về việc định cấu hình cấu hình babel của riêng mình với Webpack.

Một số điều Nên và Không nên của JSX

Đảm bảo rằng bạn biết một số chi tiết quan trọng sau để một số lỗi không cản trở bạn:

  • Đánh dấu của bạn thường được đặt sau câu lệnh trả về, dưới dạng một dòng mã hoặc mã khối.
  • Tất cả mã của bạn nên được gói trong một thẻ duy nhất. Đây có thể là một div, một thẻ không có nội dung (<>) hoặc bất kỳ thẻ nào khác.
const App = () => {
  return (
      <h1>JSX Title</h1>
      <p>This is first JSX Element!</p>
      <p>This is another JSX Element</p>
  );
};

Điều này hoạt động tốt với đánh dấu thông thường nhưng sẽ dẫn đến một lỗi lớn vì React yêu cầu các phần tử liền kề phải được bao bọc trong thẻ cha. Điều này đơn giản có nghĩa là để mã này chạy, nó phải được bao bọc trong thẻ cha, chẳng hạn như div, section, article, v.v.

const App = () => {
  return (
    <div>
      <h1>JSX Title</h1>
      <p>This is first JSX Element!</p>
      <p>This is another JSX Element</p>
    </div>
  );
};

Bạn cũng có thể sử dụng React.Fragmentthành phần này.

Cách thêm nhận xét vào mã JSX

Là một nhà phát triển, hiện nay thông lệ tiêu chuẩn là luôn thêm nhận xét vào mã của bạn và JSX không phải là ngoại lệ. Bạn có thể sử dụng lệnh tắt (phím tắt Cmd + / (Mac) hoặc Ctrl + / để thêm hoặc xóa một nhận xét cụ thể).

Lưu ý: Chúng ta có thể làm được nhiều điều với JSX. Bạn có thể đọc bài viết này để tìm hiểu thêm về cách hoạt động của JSX.

Tóm lại, JSX chỉ cung cấp đường cú pháp cho React.createElement (component, props, ...children)hàm.

Tiếp theo là gì?

Bây giờ bạn đã biết cách bắt đầu với React, bước tiếp theo là tìm hiểu nó đúng cách, hiểu các chức năng của nó, v.v.

Ngày nay, có rất nhiều nguồn tài nguyên tuyệt vời dành cho việc học React, rất nhiều tài nguyên đến nỗi rất khó để xác định đâu là tài nguyên hiện tại và hữu ích.

Thay vì cố gắng tham gia nhiều khóa học cùng một lúc, điều tốt nhất nên làm là tìm một hướng dẫn hữu ích và hoàn thành nó. Hãy xem Khóa học React miễn phí của freeCodeCamp cho năm 2022 hoặc Học React - Khóa học đầy đủ cho người mới bắt đầu .

Sự kết luận

Qua bài viết này, bạn đã biết React là gì, tại sao bạn nên học React, cách cài đặt nó trên máy. Bạn cũng đã biết mỗi tệp trong cấu trúc thư mục của nó có chức năng gì.

Nguồn: https://www.freecodecamp.org/news/get-started-with-react-for-beginners/

#react #reactjs 

CODE VN

CODE VN

1644223898

Cách sử dụng React với SVG cho người mới bắt đầu

Đồ họa vectơ có thể mở rộng (SVG) là một cú pháp giống như XML được sử dụng để hiển thị đồ họa vectơ hoặc hình ảnh trong trình duyệt. Đồ họa vectơ do SVG sản xuất có thể được thu nhỏ hoặc phóng to đến mức tối đa mà không bị tăng hoặc giảm chất lượng. Khía cạnh thú vị nhất là SVG được hỗ trợ bởi tất cả các trình duyệt chính. Trong hướng dẫn này, bạn sẽ học cách vẽ đồ họa (cụ thể là Logo Mastercard) và hình dạng bằng SVG và cách thêm đồ họa SVG vào ứng dụng React của bạn.

Hiểu cú pháp SVG

Nếu bạn đã quen với HTML hoặc XML, thì việc sử dụng cú pháp của SVG sẽ khá đơn giản để nắm bắt. Việc viết các phần tử SVG dựa trên hai nguyên tắc nghiêm ngặt:

  1. Tất cả các thuộc tính phải được đặt trong dấu ngoặc kép bất kể loại giá trị (chuỗi hay số nguyên), như được hiển thị bên dưới
<rect width="100%" fill="purple" ...../>

2. Các phần tử và thuộc tính SVG đều có phân biệt chữ hoa chữ thường, do đó, việc thay đổi trường hợp của một phần tử hoặc thuộc tính là SVG không hợp lệ.

/ Drawing a rectangle 
<rect width="100%" fill="purple" ...../>

// NOT

<RECT WIDTH="100%" FILL="ORANGE"../>

Vẽ hình dạng

Như đã đề cập, bạn sẽ học cách vẽ logo Mastercard bằng SVG. Mỗi phần tử SVG được bao quanh một <svg/>thẻ có phiên bản và kích thước của vùng vẽ.

<svg version="1.1" baseProfile="full" 
			width="400" height="250" 
			xlmns="http://www/w3/org/2000/svg">
// Content Here
</svg>

Tiếp theo, thêm một hình chữ nhật với nền đen.

<svg version="1.1" baseProfile="full" 
			width="400" height="250" 
			xlmns="http://www/w3/org/2000/svg">
<rect width="100%" height="100%" fill="black"></rect>
</svg>

Thêm hai đường tròn cắt nhau.

<svg version="1.1" baseProfile="full" 
			width="400" height="250" 
			xlmns="http://www/w3/org/2000/svg">
<circle cx="150" cy="100" r="80" fill="red"></circle>
<circle cx="256" cy="100" r="80" fill="orange"></circle>
</svg>

Thuộc rtính đề cập đến bán kính của hình tròn.

cxcytham chiếu đến vị trí của phần tử trên tọa độ x và y của đường tròn.

Cuối cùng, thêm một số văn bản vào logo của bạn.

<svg version="1.1" baseProfile="full" 
			width="400" height="250" 
			xlmns="http://www/w3/org/2000/svg">
<circle cx="150" cy="100" r="80" fill="red"></circle>
<circle cx="256" cy="100" r="80" fill="orange"></circle>
<text x="200" y="219" font-size="20" text-anchor="middle" fill="white">MasterCard</text>
</svg>

Để xem nó trông như thế nào, hãy tạo một tệp HTML và mở nó trong trình duyệt của bạn. Bạn là một thiên tài! Cố gắng điều chỉnh thêm một số thuộc tính để hiểu thêm về những gì chúng làm.

Thiết lập và ứng dụng

Bây giờ bạn đã có logo SVG đẳng cấp thế giới, hãy thiết lập ứng dụng React của bạn bằng cách nhập thông tin sau vào thiết bị đầu cuối của bạn.

npx create-react-app <YOUR_APP_NAME>

Bạn cũng có thể truy cập https://react.new để có được môi trường React được cấu hình đầy đủ trên Codeandbox.io .

Thêm SVG vào ứng dụng

Việc hiển thị một phần tử SVG rất đơn giản với Create React App. Để làm như vậy, hãy tạo tệp SVG có chứa biểu trưng bạn đã tạo và lưu nó. Trong hướng dẫn này, tôi giả sử bạn đã lưu nó trong svg /.

Tiếp theo, nhập nó vào ứng dụng của bạn, như được hiển thị bên dưới.

import React from 'react';
import { ReactComponent as MyLogo } from './assets/logo.svg';

function App(){
	return(
		<div>
				<MyLogo/>
		</div>
	);
}

Trong hướng dẫn này, bạn đã học cách tạo phần tử SVG và thêm phần tử đó vào ứng dụng React. SVG vượt xa việc tạo ra các hình dạng cơ bản. Bạn có thể làm nhiều thứ hơn, bao gồm cả chuyển màu và hoạt ảnh.

CODE VN

CODE VN

1642411667

Cách sử dụng React.js với Docker cho người mới bắt đầu

Trong quá trình phát triển phần mềm hiện đại, các ứng dụng được phát triển với nhiều khuôn khổ, ngôn ngữ và công nghệ. Quản lý các bản cập nhật, CI / CD và triển khai bằng một ứng dụng nguyên khối có thể gây ra cho bạn rất nhiều rắc rối. Nhập vùng chứa! Trong hướng dẫn này, bạn sẽ tìm hiểu về Docker và cách sử dụng nó với ứng dụng React của bạn.

Docker là gì?

Docker được giới thiệu vào năm 2013 bởi Docker Inc. Nó cho phép các ứng dụng chạy ở trạng thái bị cô lập bằng cách sử dụng các vùng chứa . Làm điều này cho phép ứng dụng của bạn được đóng gói chỉ với các thư viện và phần phụ thuộc mà ứng dụng cần. Không giống như máy ảo, cung cấp ảo hóa phần cứng, một vùng chứa cung cấp ảo hóa cấp hệ điều hành bằng cách cô lập phần mềm khỏi môi trường của nó, đảm bảo rằng nó hoạt động thống nhất bất chấp sự khác biệt và giải quyết vấn đề "nó hoạt động trên máy của tôi". Nhiều vùng chứa có thể chạy trên một máy chủ hoặc trên nhiều máy bằng cách sử dụng công cụ điều phối như Docker-swarm hoặc Kubernetes.

Thiết lập Docker

Để cài đặt Docker, hãy truy cập URL này và tải xuống thiết lập phù hợp với loại máy của bạn. Docker sử dụng hệ thống tệp phân lớp để xây dựng vùng chứa của bạn với các thông số kỹ thuật của thời gian chạy vùng chứa do bạn cung cấp trong tệp có tên Dockerfile. Sau khi cài đặt Docker, hãy chạy lệnh sau trong thiết bị đầu cuối của bạn để xác minh Docker đã được cài đặt.
 

$ docker --version
Docker version 19.03.8, build afacb8b

Thiết lập một ứng dụng React

Tiếp theo, chọn bất kỳ ứng dụng React nào bạn chọn hoặc thiết lập một ứng dụng khác từ đầu bằng cách chạy lệnh bên dưới.

$ npx create-react-app <your_app_name>

#<your_app_name> - preferred name of your app

Bây giờ, hãy tạo một tệp có tên Dockerfile tại thư mục gốc của dự án của bạn và thêm phần sau.

# pull the base image
FROM node:alpine

# set the working direction
WORKDIR /app

# add `/app/node_modules/.bin` to $PATH
ENV PATH /app/node_modules/.bin:$PATH

# install app dependencies
COPY package.json ./

COPY package-lock.json ./

RUN npm install

# add app
COPY . ./

# start app
CMD ["npm", "start"]

Chuyện gì đang xảy ra ở đây?

Đầu tiên, bạn đã hướng dẫn Docker kéo hình ảnh Node chính thức, đặt thư mục làm việc cho ứng dụng của bạn và cài đặt tất cả các phần phụ thuộc của bạn.

Để đảm bảo bạn không kết thúc với một vùng chứa cồng kềnh, hãy thêm tệp .dockerignore để tránh sao chép các tệp không cần thiết vào vùng chứa. Bên trong tệp .dockerignore của bạn , hãy thêm phần sau.

node_modules
npm-debug.log
build
.dockerignore
**/.git
**/.DS_Store
**/node_modules

Để khởi động vùng chứa của bạn, hãy chạy lệnh sau trong thiết bị đầu cuối của bạn để xây dựng hình ảnh mà vùng chứa của bạn sẽ được tạo.

$ docker build -t ps-container:dev .

Đầu ra của bạn sẽ trông giống như sau:

Sending build context to Docker daemon  630.3kB
Step 1/8 : FROM node:alpine
 ---> 89234s7298ds
Step 2/8 : WORKDIR /app
 ---> Using cache
 ---> 8da38hd8a9848
Step 3/8 : ENV PATH /app/node_modules/.bin:$PATH
 ---> Using cache
 ---> e930973d8h383
Step 4/8 : COPY package.json ./
 ---> Using cache
 ---> jnd3898398h8r
Step 5/8 : COPY package-lock.json ./
 ---> 390jf983h8hf8
Step 6/8 : RUN npm install
 ---> Running in 23uf2983f98
 ...
Step 7/8 : COPY . ./
 ---> ca58e0ca87b9
Step 8/8 : CMD ["npm", "start"]
 ---> Running in cdcb3617af0c
Removing intermediate container cdcb3617af0c
 ---> d89b7bb5b6fa
Successfully built d89b7bb5b6fa
Successfully tagged ps-container:dev

$ docker image ls
REPOSITORY              TAG                 IMAGE ID            CREATED              SIZE
ps-container             dev                3894y8h893hd        About a minute ago   392MB

Bây giờ hãy chạy lệnh sau để tạo và chạy vùng chứa của bạn.

$ docker run -it --rm \
-v ${PWD}:/app \
-v /app/node_modules \
-p 3001:3000 \
-e CHOKIDAR_USEPOLLING=true \
ps-container:dev

Lưu ý mã đang làm gì: 1. itkhởi động vùng chứa ở chế độ tương tác. 2. -rmloại bỏ thùng chứa và các thể tích sau khi thùng chứa ra ngoài. 3. v ${PWD}:/appgắn mã vào vùng chứa tại /app.

Lưu ý mã đang làm gì: 1. itkhởi động vùng chứa ở chế độ tương tác. 2. -rmloại bỏ thùng chứa và các thể tích sau khi thùng chứa ra ngoài. 3. v ${PWD}:/appgắn mã vào vùng chứa tại /app.