리액트
-
React Website 만들기) 5.Footer부분 만들기REACT 2021. 1. 29. 21:00
홈페이지의 맨 아랫부분에 적용될 footer를 만든다. 1. Footer.js components폴더에 파일 생성한다. import React from 'react' import { Link } from 'react-router-dom'; import {Button} from './Button'; import './Footer.css'; function Footer() { return ( Join the Adventure newsletter to receive our best vacation deals You can unsubscribe at any time. Subscribe About Us How it works Testimonials Careers Investors Terms of Service C..
-
React Website 만들기) 4.Home에 적용할 부분 만들기REACT 2021. 1. 29. 20:57
홈페이지에서 products, services, signup 파트를 누르면 나올 홈페이지를 구현한다. 1. Products.js, Services.js, SignUp.js components폴더의 pages폴더에 각각의 파일을 만들고 구현해 놓는다 . import React from 'react'; import '../../App.css'; export default function Products() { return PRODUCTS; } import React from 'react' import '../../App.css'; export default function Services() { return SERVICES; } import React from 'react' import '../../App...
-
React Website 만들기) 3.Card부분 만들기REACT 2021. 1. 29. 20:47
홈페이지의 글목록을 담당하는 영역을 만든다. 1. Carditem.js components폴더 안에 만든다. 여기서 prop의 구현은 card.js에서 할 것이다. import React from 'react'; import { Link } from 'react-router-dom'; function CardItem(props) { return ( {props.text} ); } export default CardItem; 2. Card.js 여기서 ul로 묶은 파트별로 갯수가 다르다는 것을 유의! 몇개씩 한 줄에 나타낼 것인지를 구분한 것이다. 여기서의 path, text, label에 따라서 CardItem의 구성에 따라서 나타나는 파트가 달라진다. import React from 'react' im..
-
React Website 만들기) 2.Home.js만들고 Herosection 만들기REACT 2021. 1. 29. 20:41
1. Home.js components 안에 pages 폴더를 만들고 home.js 파일을 만든다. import React from 'react' import '../../App.css'; import HeroSection from '../HeroSection'; import Cards from'../Cards'; import Footer from '../Footer'; function Home() { return ( ) } export default Home; 2. HeroSection.js components 폴더 안에 HeroSection.js파일을 만든다. 홈페이지 안에 버튼과 제일 먼저 보이는 문구를 적용한다. import React from 'react' import '../App.css'; ..
-
React Website 만들기) 1.Navbar, Button 만들기REACT 2021. 1. 27. 21:55
리액트 프로젝트는 처음이라 😅 따라하기 시작! https://www.youtube.com/watch?v=I2UBjN5ER4s&t=411s 아이콘이나 다운받을 자료들은 영상에 자세히 나와있다. fontAwesome CDN은 여기서서 바로 복사해서 적용할 수 있다! https://fontawesome.com/how-to-use/customizing-wordpress/snippets/setup-cdn-webfont Font Awesome The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options. fontawesome.com 1.index.html 구글 폰트와 fonta..