웹개발/리액트15 리액트 부트스트랩 nav에 route적용하기 이번에는 부트스트랩 nav를 만들고 react-route를 적용해본다. 먼저 react-route-dom을 설치한다. 참조: reactrouter.com/web/guides/quick-start React Router: Declarative Routing for React Learn once, Route Anywhere reactrouter.com npm install react-router-dom react-bootstrap로 navbar를 만든다. import './assets/css/App.css'; import {Button, Form, FormControl, Nav, Navbar, NavDropdown} from "react-bootstrap"; function App() { return ( H.. 2021. 2. 23. 리액트에서 부트스트랩(React Bootstrap)적용하기 리액트에서 부트스트랩을 사용할수 있는 라이브러가 2개있다. react-bootstarp 과 reactstarp 이다. 두개중에 사용하고 싶은걸 사용하면 된다. www.npmtrends.com/react-bootstrap-vs-reactstrap react bootstrap vs reactstrap | npm trends Compare npm package download statistics over time: react bootstrap vs reactstrap www.npmtrends.com 두개를 비교한 내용이다. www.geeksforgeeks.org/difference-between-reactstrap-and-react-bootstrap/ Difference between reactstrap an.. 2021. 2. 22. 리액트에서 스프링부트 api호출해서 json결과값 받아오기 먼저 스프링부트 서버에서 json데이타를 내려주는 작업을 먼저 실행한다. samtao.tistory.com/24 스프링부트 api응답을 json으로 하기 먼저 User라는 클래스를 만든다. package com.example.myapp; import lombok.AllArgsConstructor; import lombok.Getter; import lombok.Setter; @Setter @Getter @AllArgsConstructor public class User { String.. samtao.tistory.com api.js에 서버 api호출 메서드를 추가한다. // 기본 api url 주소 const URL_API = "http://localhost:8080/api/v1"; // hello a.. 2021. 2. 18. 리액트에서 api호출하고 데이타를 받아와서 보여주기 먼저 서버에서 데이타를 받아올 api 함수를 먼저 만든다. api.js 파일을 생성해서 만들자 fetch라는 함수를 이용해서 api를 만든다. fetch함수 사용법은 다음url을 참조한다. developer.mozilla.org/ko/docs/Web/API/Fetch_API/Fetch%EC%9D%98_%EC%82%AC%EC%9A%A9%EB%B2%95 Using Fetch - Web API | MDN Fetch API를 이용하면 Request나 Response와 같은 HTTP의 파이프라인을 구성하는 요소를 조작하는것이 가능합니다. 또한 fetch() 메서드를 이용하는 것으로 비동기 네트워크 통신을 알기쉽게 기술할 수 있 developer.mozilla.org 호출할 서버는 이전에 만든 스프링부트의 url을.. 2021. 2. 18. Visual Studio Code를 이용한 리액트 hello world 프로젝트 생성 참조 : code.visualstudio.com/docs/nodejs/reactjs-tutorial React JavaScript Tutorial in Visual Studio Code React JavaScript tutorial showing IntelliSense, debugging, and code navigation support in the Visual Studio Code editor. code.visualstudio.com Node js 설치 nodejs.org/en/download/ Download | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org visual studio.. 2021. 2. 15. 이전 1 2 다음
