Codiga Smart Code Snippets를 사용하여 반응 애플리케이션을 구축하는 방법은 무엇입니까?
14089 단어 webdevcodenewbiejavascriptbeginners
애플리케이션 구축에 직접 뛰어들기 전에 오늘 만들 내용을 살펴보겠습니다.
Here is a video for the same .
이 애플리케이션을 구축하는 데 사용되는 모든 스마트 코드 스니펫은 여기에 있습니다Codiga cookbook.
이제 애플리케이션을 빌드해 보겠습니다.
1단계: 반응 애플리케이션 설정
react에서 애플리케이션을 빌드할 것입니다. 먼저 npx 명령을 사용하여 반응 애플리케이션을 설정하겠습니다.
npx create-react-app github-api-demo애플리케이션을 설정하는 데 시간이 걸릴 수 있으므로 휴식을 취하거나 Codiga Smart Code Snippets를 탐색할 수 있습니다.
react 애플리케이션이 설정되면 react+bootstrap 조합을 사용할 것입니다. 이를 위해 부트스트랩을 index.html 파일에 연결해야 합니다.
2단계: 애플리케이션에 부트스트랩 연결
부트스트랩 파일을 애플리케이션에 연결하는 방법에는 두 가지가 있습니다. 소스 코드를 다운로드하거나 콘텐츠 전송 네트워크를 사용합니다.
이 예에서는 콘텐츠 전송 네트워크를 사용합니다.
전통적으로 콘텐츠 전송 네트워크를 사용하여 부트스트랩 CSS를 연결하는 코드는 다음과 같습니다.
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">마찬가지로 부트스트랩 자바스크립트를 연결하려면 위와 같은 확장 코드가 필요합니다.
스마트 코드 조각을 만들었습니다. Codiga 확장 프로그램이 설치된 상태에서 아래 바로 가기를 사용하여 작업을 쉽게 하십시오.
부트스트랩 CSS의 경우:
bootstrap.css , <head> 태그 아래에 있는 이 단축키를 사용하십시오.부트스트랩 JS의 경우:
bootstrap.js , <body> 태그 아래에서 사용하십시오.index.html 파일은 다음과 같아야 합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>GitHub Demo</title>
</head>
<body>
<div id="root"></div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>
3단계: 기존 코드 지우기
스타터 템플릿에 있는 기존 코드는 필요하지 않습니다. 따라서 src 폴더에 있는 기존 코드를 모두 지우십시오. 구성 요소를 추가하려면 App.js 파일과 구성 요소 폴더만 있으면 됩니다.
이 응용 프로그램은 두 가지 구성 요소로 나뉩니다. 첫 번째 막대는 navbar이고 두 번째 막대는 양식입니다. 다음으로 응용 프로그램에 대한 navbar를 만드는 방법을 살펴보겠습니다.
4단계: 애플리케이션용 내비게이션 바 만들기
구성 요소 폴더 아래에 Nav.js 파일을 만듭니다. navbar Smart Code Snippet을 사용하여 부트스트랩을 사용하여 navbar를 만듭니다.
navbar.0여기에서 Navbar에서 애플리케이션의 이름을 변경해야 합니다. 여기에서 이름을 Github API로 지정하겠습니다.
이제 이번에는 navbar를 만드는 것이 얼마나 쉬운지 알 수 있습니다. 오른쪽? 이것이 Codiga의 스마트 코드 스니펫(LOL)의 힘입니다.
5단계: 양식 구성 요소 만들기
아무 문제 없이 양식 구성 요소를 만들 수 있습니다. 이 스마트 코드 스니펫을 사용하면 완료됩니다.
bootstrap.form.0양식 제목을 편집했는지 확인하십시오.
카드를 사용하여 GitHub API에서 가져온 세부 정보를 표시합니다. 동일한 Form.js 파일에 카드를 만들어 보겠습니다.
6단계: Github API에서 데이터를 표시하기 위한 카드 생성
이 스마트 코드 조각을 사용하여 간단한 카드를 만들 수 있습니다.
bootstrap.cards.1모든 것이 몇 분 안에 설정되므로 이제 코드 논리에 집중할 수 있습니다.
7단계: 코드 논리
코드의 논리는 아래에서 찾을 수 있습니다.
사용자 이름 설정 기능:
const [username, setUsername] = useState("");
const onChangeHandler = (e) => {
setUsername(e.target.value);
};
양식에 onChange & onSubmit 핸들러 기능을 제공했는지 확인하십시오.
onSubmit 기능
const [data , setData] = useState({});
const onSubmiteHandler = (e) => {
e.preventDefault();
fetch(`https://api.github.com/users/${username}`)
.then((result) => {
return result.json();
}).then((values) => {
console.log(values);
setData(values);
}
)
양식 입력 사용자 이름 값을 제공했는지 확인하십시오.
result.json 파일에서 양식 값 제공
<div className='container'>
<div className="card p-3">
<div className="d-flex align-items-center">
<div className="image">
<img src={data.avatar_url}className="rounded" width="155"/>
</div>
<div className="ml-3 w-100">
<h3 className="mb-0 mt-0">{data.login}</h3><span>{data.bio}</span>
<div className="p-2 mt-2 bg-primary d-flex justify-content-between rounded text-white stats">
<br />
<div className="d-flex flex-column"> <span className="articles">Repo</span> <span className="number1">{data.public_repos}</span> </div>
<div className="d-flex flex-column"> <span className="followers">Followers</span> <span className="number2">{data.followers}</span> </div>
<div className="d-flex flex-column"> <span className="rating">following</span> <span className="number3">{data.following}</span> </div>
</div>
</div>
</div>
</div>
</div>
그리고 당신은 갈 수 있습니다!. 신청이 이루어집니다. 어딘가 막히면 을 참조할 수 있습니다.
마무리
이 블로그 게시물에서는 몇 분 안에 애플리케이션을 만들었습니다. 스마트 코드 스니펫을 사용하여 코드를 빠르게 작성하여 코드 논리에 집중할 수 있습니다. 우리는 Codiga에서 만든 미리 만들어진 상용구 코드 스니펫을 사용하고 필요에 따라 수정했습니다. Coding Assistant 및 Smart Code Snippets에 대한 자세한 내용을 보려면 여기를 클릭하여 시작하거나 Discord here에서 당사와 채팅하십시오.
이 블로그 게시물은 원래 Codiga에 게시되었습니다.
Reference
이 문제에 관하여(Codiga Smart Code Snippets를 사용하여 반응 애플리케이션을 구축하는 방법은 무엇입니까?), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/codiga/how-to-build-a-react-application-using-codiga-smart-code-snippets-5hdn텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
