[react]설치+app생성

node -v

 

npm -v

 

npx create-react-app .

 

npm run build 

 

npm start 

 

Ctrl + c

 

<화면단 설치파일>
1)Node.js
  설치확인 : node -v
             npm -v
   D:\devreact\workspace\twokimss-ui> node -v
   v20.9.0
   D:\devreact\workspace\twokimss-ui> npm -v
   10.1.0
2)Visual Studio Code
3)확장프로그램: etc
  VS Code Reactjs snippets
  ESLint
  Prettier Formatter for Visual Studio Code

<화면단 소스생성>
1)폴더생성 : D:\devreact\workspace\twokimss-ui
2)폴더로이동 : cd D:\devreact\workspace\twokimss-ui
3)react app생성 : PS D:\devreact\workspace\twokimss-ui> npx create-react-app .  (쩜:이경로에생성하고자)
4)npm run build : 빌드 -> D:\devreact\workspace\twokimss-ui\build 폴더아래 배포 파일 생성됨
5)Visual Studio Code 에서 폴더선택 : D:\devreact\workspace\twokimss-ui
6)D:\devreact\workspace\twokimss-ui\src\App.js : 수정
   Learn React --> Learn React ( Hello !!!)
7)수정된거 확인 : npm start    ( http://localhost:3000/)
8)Ctrl + c  : 중지

<서버단 설치 및 소스>
1)메이븐 : D:\devreact\apache-maven-3.9.1
2)이클립스 : D:\devreact\eclipse
3)jdk : D:\devreact\jdk-17
4)메이븐 jar 저장소 : D:\devreact\repo
5)자바소스 :  D:\devreact\workspace\webnormal
6)화면소스 : D:\devreact\workspace\twokimss-ui

<화면단 설치파일>
1)Node.js
  설치확인 : node -v
             npm -v
   D:\devreact\workspace\twokimss-ui> node -v
   v20.9.0
   D:\devreact\workspace\twokimss-ui> npm -v
   10.1.0
2)Visual Studio Code
3)확장프로그램: etc
  VS Code Reactjs snippets
  ESLint
  Prettier Formatter for Visual Studio Code

<화면단 소스생성>
1)폴더생성 : D:\devreact\workspace\twokimss-ui
2)폴더로이동 : cd D:\devreact\workspace\twokimss-ui
3)react app생성 : PS D:\devreact\workspace\twokimss-ui> npx create-react-app .  (쩜:이경로에생성하고자)
4)npm run build : 빌드 -> D:\devreact\workspace\twokimss-ui\build 폴더아래 배포 파일 생성됨
5)Visual Studio Code 에서 폴더선택 : D:\devreact\workspace\twokimss-ui
6)D:\devreact\workspace\twokimss-ui\src\App.js : 수정
   Learn React --> Learn React ( Hello !!!)
7)수정된거 확인 : npm start    ( http://localhost:3000/)
8)Ctrl + c  : 중지

<서버단 설치 및 소스>
1)메이븐 : D:\devreact\apache-maven-3.9.1
2)이클립스 : D:\devreact\eclipse
3)jdk : D:\devreact\jdk-17
4)메이븐 jar 저장소 : D:\devreact\repo
5)자바소스 :  D:\devreact\workspace\webnormal
6)화면소스 : D:\devreact\workspace\twokimss-ui

<소스보기>
1)index.html
	>> D:\devreact\workspace\twokimss-ui\public\index.html
	>>중요코드) <div id="root"></div>
	
	
	
2)index.js 
	>> D:\devreact\workspace\twokimss-ui\src\index.js
	>>
	import React from 'react'; //react.js ??
	import ReactDOM from 'react-dom/client';
	import './index.css';
	import App from './App'; //App.js
	import reportWebVitals from './reportWebVitals'; //reportWebVitals.js 

	const root = ReactDOM.createRoot(document.getElementById('root')); //index.html 의 root 
	root.render(
	  <React.StrictMode>
		<App />
	  </React.StrictMode>
	);

	// If you want to start measuring performance in your app, pass a function
	// to log results (for example: reportWebVitals(console.log))
	// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
	reportWebVitals();

	
3)App.js	
	>>D:\devreact\workspace\twokimss-ui\src\App.js
	
	import logo from './logo.svg';
	import './App.css';
	import React from 'react'; //React.xxx 사용시 필요
	
	//*********************************************************************
	//function type coding
	//*********************************************************************
	
	// function App() {
	//   return (
	//     <div className="App">
	//       <header className="App-header">
	//         <img src={logo} className="App-logo" alt="logo" />
	//         <p>
	//           Edit <code>src/App.js</code> and save to reload.
	//         </p>
	//         <a
	//           className="App-link"
	//           href="https://reactjs.org"
	//           target="_blank"
	//           rel="noopener noreferrer"
	//         >
	//           Learn React ( Hello World Function Type Start !!!)
	//         </a>
	//       </header>
	//     </div>
	//   );
	// }
	
	//*********************************************************************
	//class Type coding
	//*********************************************************************
	
	// class App extends React.Component{
	//   render(){
	//     return <h1>Hello World Class Type Start!!!</h1>
	//   }
	// }

	//*********************************************************************
	////Adjacent JSX elements must be wrapped in an enclosing tag 에러 해결 
	//1)<div></div>
	//2)<React.Fragment></React.Fragment> 
	//3)<></> 
	//*********************************************************************

	function App(){
	  return(
		<React.Fragment>
		<h1>Hello World 2</h1>
		<p>This is my first React component</p>
		</React.Fragment>
	  );
	}


	export default App;