참고 리소스 : https://nextjs.org/learn/foundations/about-nextjs/what-is-nextjs React (리액트)는 인터랙티브한 사용자 인터페이스를 만들 때 쓰는 자바 스크립트 라이브러리이다. HTML 을 컴포넌트로 나눠서 관리할 수 있다. 컴포넌트를 초기화할 때 전달인자로 받을 수 있는 Props, 지속적으로 값을 변경할 수 있는 State, 아직 모르지만 Hook 이라는 변수개념이 존재한다. create-react-app 모듈로 Nodejs 프로젝트 구조를 생성할 수 있다. React 자체는 UI 에 한정되어 있어서 웹 애플리케이션을 만드려면 추가적인 모듈을 설치해주어야 한다. 그 중에 react-router-dom 도 있다. Next.js 는 또 무엇인고 하니..

참고한 원문 : https://nextjs.org/learn/foundations/from-javascript-to-react/building-ui-with-components 기존 게시글 : https://debianizer.tistory.com/15 React 클래스형 + (코드 분리 방식) 원문 출처 : https://ljh86029926.gitbook.io/coding-apple-react/1/component-of-react#undefined-1 Component Of React - React 이런식으로 하나의 HTML파일에 header, main, footer부분까지 하나의 파일에 작성하게 됩니다. 그러나 리 debianizer.tistory.com 기존 게시글이 클래스(class) 기준 컴포..

참고한 원문 : https://nextjs.org/learn/foundations/from-javascript-to-react/building-ui-with-components 분리 전 원본 소스 : JSX 를 함수형 컴포넌트로 분리 : 문제가 생겼다. 해결 방법) HTML 요소와 구별하기 위해서 컴포넌트 이름 앞 글자를 알파벳 대문자로 표기해야 한다. (소문자는 인식불가) 컴포넌트를 JSX 처럼 꺽쇠로 감싸서 ReactDom.render() 에 인자로 넘기면 된다.

index.html 소스 : 이것을 브라우저에서 열면 Uncaught SyntaxError: Unexpected token '

원문 출처 : https://ljh86029926.gitbook.io/coding-apple-react/1/component-of-react#undefined-1 Component Of React - React 이런식으로 하나의 HTML파일에 header, main, footer부분까지 하나의 파일에 작성하게 됩니다. 그러나 리액트는 컴포넌트 구조로 작성을 할 수 있기 때문에 각각의 부분을 분리해서 작업을 진행할 수 ljh86029926.gitbook.io

npx create-react-app 을 실행하면 생성되는 src/App.js 에서 볼 수 있다. import logo from './logo.svg'; import './App.css'; function App() { return ( Edit src/App.js and save to reload. Learn React ); } export default App;