React에서 Navbar 생성

이 안내서는 React에 응답적이고 접근 가능한 내비게이션 바 (NAVBAR)를 구축하는 것을 보여줍니다. Navbars는 웹 사이트 탐색에 중요하므로 사용자는 다른 섹션과 페이지에 쉽게 액세스 할 수 있습니다. 이 튜토리얼은 설계, 구현 및 접근성 모범 사례를 다룹니다 주요 개념 :

NAVBARS는 웹 사이트 탐색을위한 필수 UI 요소입니다 반응의 구성 요소 기반 아키텍처는 재사용 가능한 모듈 식 Navbar 생성을 용이하게합니다 접근성 우선 순위를 정하는 모든 사용자는 모든 사용자가 웹 사이트를 효과적으로 탐색 할 수 있도록합니다.

Navbar 란 무엇입니까? 웹 페이지의 상단 또는쪽에 위치한 Navbar는 웹 사이트 섹션 또는 페이지를 탐색하기위한 링크 또는 버튼을 제공합니다. 잘 설계된 Navbar는 웹 사이트 구조를 명확히하고 탐색을 단순화하여 사용자 경험을 향상시킵니다. 잘 설계된 Navbars의 예 :

• AirBnB : "숙박 장소", "경험"및 "온라인 경험"과 명확한 링크가있는 깨끗하고 미니멀 한 디자인.

  dropbox : 눈에 띄는 "제품"드롭 다운 메뉴가있는 간단하고 효과적인 네이바.

• 반응 나바 구축 : 단계별 안내서 이 예제는 가상 전자 상거래 사이트 인 "Shopnow"에 대한 Navbar를 만듭니다. 1 단계 : 디자인 ShopNow Navbar는 다음과 같습니다

  왼쪽의 로고 "제품 ","우리 소개 "및"연락처 "로 연결됩니다 항목 카운트 배지가있는 쇼핑 카트 아이콘

  계정 조치에 대한 사용자 아이콘 ( "로그인," "내 계정".

• 2 단계 : 프로젝트 설정

  Create React 앱 : 를 사용하여 새로운 React 프로젝트를 만듭니다 npx create-react-app shopnow CD Shopnow npm 시작 3 단계 : Navbar 구성 요소 ( navbar.js ) navbar.js 를 만들고 기본 구성 요소 구조를 추가하십시오 : 'react'에서 React React; import '.https : //www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712navbar.css'; const navbar = () = & gt; { 반품 ( {https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712* Navbar 컨텐츠는 여기로 이동합니다 * https : //www.php.cn/link/29a9f8c8460e5e2be4eddde557fd83712} ); }; 기본 NAVBAR; 내보내기

  스타일을 위해 navbar.csss 를 만들어냅니다 4 단계 : NAVBAR 구조 ( navbar.js ) Navbar의 HTML 구조를 추가하십시오 : https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712). const navbar = () = & gt; { 반품 (

  Shopnow <https:> <https:> <https:> 제품 <p> <https:> 우리에 대해 <pre class="brush:php;toolbar:false"> &lt;code class=&quot;language-javascript&quot;&gt; &lt;nav classname=&quot;navbar&quot;&gt; 접촉 &lt;div classname=&quot;navbar-left&quot;&gt; &lt;a href=&quot;https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712&quot; classname=&quot;logo&quot;&gt; &lt;https:&gt; &lt;https:&gt; &lt;div classname=&quot;navbar-center&quot;&gt; &lt;ul classname=&quot;nav-links&quot;&gt; &lt;li&gt; 0 &lt;a href=&quot;https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712products&quot;&gt; &lt;https:&gt; &lt;https:&gt; &lt;li&gt; &lt;a href=&quot;https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712about&quot;&gt; &lt;https:&gt; ); }; 기본 NAVBAR; &lt;https:&gt; &lt;https:&gt; 내보내기 &lt;f&gt; 글꼴을 포함시키는 것을 잊지 마십시오. 5 단계 : 스타일링 ( navbar.css &lt;p&gt;) &lt;https:&gt; &lt;p&gt; &lt;s&gt;&gt; CSS 스타일을 &lt;strong&gt; navbar.css 에 추가하십시오 (원본 텍스트에 제공된 스타일). 6 단계 : Integration ( app.js ) &lt;https:&gt; &lt;https:&gt; &lt;the&gt; &lt;p&gt; navbar &lt;code&gt; 구성 요소를 &lt;https:&gt; app.js 에서 가져 와서 렌더링합니다 &lt;p&gt; 'react'에서 React React; '.https : //www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712navbar'; 기능 앱 () { 반품 ( &lt;strong&gt; &lt;code&gt; {https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712* 나머지 앱 컨텐츠 * https : //www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712} &lt;https:&gt; ); }기본 앱을 내보내고; 7 단계 : 접근성 모범 사례 &lt;https:&gt; &lt;https:&gt; &lt;p&gt; &lt;h&gt; Semantic Html 사용 ( &lt;strong&gt; &lt;https:&gt;, &lt;https:&gt; &lt;ul&gt;, &lt;code&gt; &lt;nav&gt;, &lt;https:&gt; ). &lt;code&gt; &lt;r&gt; ARIA 역할을 추가하십시오 ( to ) &lt;access&gt; 키보드 접근성 (탭 포커스, enterhttps : //www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712space 활성화) &lt;st&gt; 명확한 포커스 스타일을 제공합니다 ( : Focus &lt;code&gt; css) &lt;tive&gt; 설명 링크 텍스트를 사용하십시오 (아이콘의 경우 aria-label &lt;li&gt; 포함) &lt;design&gt; CSS 미디어 쿼리 (예 : 햄버거 메뉴)를 사용하여 반응 형 디자인 구현. &lt;https:&gt; &lt;code&gt; 추가 개선 사항 (FAQS가 다루어짐) : &lt;a&gt; &lt;https:&gt; 응답 성 : &lt;https:&gt; 작은 화면에 미디어 쿼리와 잠재적으로 햄버거 메뉴를 사용하십시오. 외부 라이브러리 : &lt;li&gt; 사전 제작 된 구성 요소에 대한 React Bootstrap, Material-UI 또는 개미 설계를 고려하십시오. 내비게이션 처리 : &lt;code&gt; 구성 요소 간 라우팅을 위해 반응 라우터를 사용하십시오 animationshttps : //www.php.cn/link/29a9f8460e5e2be4edde557fd83712transitions : &lt;https:&gt; CSS 전환, 애니메이션 또는 JavaScript Libraries 사용 응답 그룹. &lt;code&gt;&lt;us us&gt; 구성 요소 재사용성 : 여러 페이지에서 navbar &lt;strong&gt; 구성 요소를 가져오고 렌더링합니다. 검색 기능 : &lt;https:&gt; 검색 입력 추가 및 상태 및 이벤트 핸들러와 함께 사용자 입력을 추가하십시오. &lt;code&gt; 활성 링크 스타일링 : &lt;https:&gt; 반응 라우터의 navlink &lt;https:&gt; 스타일 활성 링크에 대한 구성 요소 또는 사용자 정의 로직 사용. &lt;li&gt; &lt;guide&gt;이 세부 가이드는 React 응용 프로그램에서 강력하고 접근 가능한 Navbar를 만들기위한 견고한 기반을 제공합니다. 접근성 준수를 철저히 테스트해야합니다&lt;/guide&gt; &lt;/li&gt;&lt;/https:&gt;&lt;/https:&gt;&lt;/code&gt;&lt;/https:&gt;&lt;/strong&gt;&lt;/us&gt;&lt;/code&gt;&lt;/https:&gt;&lt;/code&gt; &lt;/li&gt;&lt;/https:&gt;&lt;/https:&gt;&lt;/a&gt;&lt;/code&gt;&lt;/https:&gt;&lt;/design&gt; &lt;/li&gt;&lt;/tive&gt;&lt;/code&gt;&lt;/st&gt;&lt;/access&gt;&lt;/r&gt;&lt;/code&gt;&lt;/https:&gt;&lt;/nav&gt;&lt;/code&gt; &lt;/ul&gt;&lt;/https:&gt;&lt;/https:&gt;&lt;/strong&gt;&lt;/h&gt;&lt;/p&gt;&lt;/https:&gt;&lt;/https:&gt;&lt;/https:&gt;&lt;/code&gt;&lt;/strong&gt;&lt;/p&gt;&lt;/https:&gt;&lt;/code&gt;&lt;/p&gt;&lt;/the&gt;&lt;/https:&gt;&lt;/https:&gt;&lt;/strong&gt;&lt;/s&gt;&lt;/p&gt;&lt;/https:&gt;&lt;/p&gt;&lt;/f&gt;&lt;/https:&gt;&lt;/https:&gt;&lt;/https:&gt;&lt;/a&gt; &lt;/li&gt;&lt;/https:&gt;&lt;/https:&gt;&lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt;&lt;/https:&gt;&lt;/https:&gt;&lt;/a&gt; &lt;/div&gt;&lt;/nav&gt;&lt;/code&gt;</pre></https:></p></https:></https:></https:>

위 내용은 React에서 Navbar 생성의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!