리액트 맛보기

 

 

 

처음에 리액트 설치한후 해야될것 

 

PS D:\GDJ69\webstudy> cd 05_react
PS D:\GDJ69\webstudy\05_react> node --version
v20.9.0
PS D:\GDJ69\webstudy\05_react> npm --version
10.1.0
PS D:\GDJ69\webstudy\05_react> npx create-react-app react-basic
npm ERR! code ENOENT
npm ERR! syscall lstat
npm ERR! path C:\Users\GD\AppData\Roaming\npm
npm ERR! errno -4058
npm ERR! enoent ENOENT: no such file or directory, lstat 'C:\Users\GD\AppData\Roaming\npm'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent
 
npm ERR! A complete log of this run can be found in: C:\Users\GD\AppData\Local\npm-cache\_logs\2023-10-26T09_16_40_136Z-debug-0.log
PS D:\GDJ69\webstudy\05_react> npm uninstall -g create-react-app
 
up to date in 507ms
PS D:\GDJ69\webstudy\05_react> npm install -g create-react-app  
npm WARN deprecated tar@2.2.2: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap.
 
added 67 packages in 3s
 
5 packages are looking for funding
  run `npm fund` for details
npm notice
npm notice New minor version of npm available! 10.1.0 -> 10.2.1
npm notice Changelog: https://github.com/npm/cli/releases/tag/v10.2.1
npm notice Run npm install -g npm@10.2.1 to update!
npm notice
PS D:\GDJ69\webstudy\05_react> npx create-react-app react-basic

 

 

 

Component : 화면 구성의 기본 단위 
1. 화면 구성의 기본 단위
2. 함수형 컴포넌트를 주로 사용(함수형, 클래스형)

  jsx
  자바스크립트 확장 문법
  자바스크립트 코드 간결화 가능

 

 

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
 
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <App />
);

 

 

import './App.css';
import MyFirstComponent from './component/MyFirstComponent';
 
function App() {
  return (
    <div className="App">
      {/*MyFirstComponent 포함하기*/}
      <MyFirstComponent/>
    </div>
  );
}
 
export default App;
 

 

 

 

import React from "react";
 
const MyFirstComponent = () =>  {
 
  // 여기는 js 영역이다.
  
  // 변수 선언
  const name = '홍길동';
 
  // 인라인 스타일
  const css = {
    color: 'orange',
    backgroundColor: 'crimson'
  };
 
  return(
    <div className="my-first-component">
      <h1>MyFirstComponent</h1>
      {/*주석*/}
      <h4>jsx 이전의 문법</h4>
      {React.createElement('div', null, `${name}님 반갑습니다.`)}
      <h4>jsx 문법</h4>
      <div style={css}>{name}님 반갑습니다.</div>
    </div>
  );
 
}
 
export default MyFirstComponent;