티스토리 뷰

react

node 설치 및 세팅

Gayeong's 2022. 4. 17. 11:15

vscode 확장 기능 설치

  • ES7 React/Redux/GraphQL/React Native-snippets

node

Node.js 설치

(터미널 열고[ctrl+`] 명령어 입력)

node 설치 확인 : 설치 되면 버전이 뜬다

node --version

npm --version

설치

npx create-react-app ./

npx create-react-app react2022(파일명)

이게 뜨면 성공

리액트 시작하기

  1. npm start
  2. 파일 경로 설정 후 npm start

예시) 리액트 ‘작성’하여 적용된 모습이다

이렇게 브라우저가 뜬다

셋팅

파일 아래만 남기기

.gitignore

# See <https://help.github.com/articles/ignoring-files/> for more about ignoring files.

# dependencies
/node_modules

# production
/build

버전 설치 : package.json

터미널
파일경로 설정
nom start
npm install react-router-dom@5.3.0
npm install prop-types
npm install node-sass

입력하면

"node-sass": "^7.0.1",
"prop-types": "^15.8.1",
"react": "^18.0.0",
"react-dom": "^18.0.0",

추가됨

pubilc/index.html

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta name="description" content="Web site created using create-react-app"/>
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

src/

APP.js

import React from 'react';

function App() {
  return (
    <div className="App">
      리액트로 작업하기
    </div>
  );
}

export default App;

//포토폴리오
import React from 'react';
import {BrowserRouter as Router, Route} from "react-router-dom";
import Main from "./components/pages/Main";
import About from "./components/pages/About";
import Reference from "./components/pages/Reference";
import Script from "./components/pages/Script";
import Youtube from "./components/pages/Youtube";
import Contact from "./components/pages/Contact";
import Portfolio from "./components/pages/Portfolio";

function App() {
  return (
    <Router>
      <Route path="/" exact component={Main} />
      <Route path="/about" exact component={About} />
      <Route path="/reference" exact component={Reference} />
      <Route path="/script" exact component={Script} />
      <Route path="/youtube" exact component={Youtube} />
      <Route path="/contact" exact component={Contact} />
      <Route path="/portfolio" exact component={Portfolio} />
    </Router>
  );
}

export default App;

index.js

// 렌더링
import React from "react";
import ReactDOM from 'react-dom/client';

function Hello(props){
  return <h1>hello,{props.name}</h1>
}
const element = <Hello name="world"/>;
ReactDOM.render(element, document.getElementById("root"));

//포토폴리오
import React from 'react';
import ReactDOM from 'react-dom/client';
import "./style.scss";
import App from "./App";

const rootNode = document.getElementById('root');

ReactDOM.createRoot(rootNode).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
);

기타 명령어

  • ES7 React/Redux/GraphQL/React Native-snippets

node

Node.js 설치

(터미널 열고[ctrl+`] 명령어 입력)

node 설치 확인 : 설치 되면 버전이 뜬다

node --version

npm --version

설치

npx create-react-app ./

npx create-react-app react2022(파일명)

이게 뜨면 성공

리액트 시작하기

  1. npm start
  2. 파일 경로 설정 후 npm start

예시) 리액트 ‘작성’하여 적용된 모습이다

이렇게 브라우저가 뜬다

셋팅

파일 아래만 남기기

.gitignore

# See <https://help.github.com/articles/ignoring-files/> for more about ignoring files.

# dependencies
/node_modules

# production
/build

버전 설치 : package.json

터미널
파일경로 설정
nom start
npm install react-router-dom@5.3.0
npm install prop-types
npm install node-sass

입력하면

"node-sass": "^7.0.1",
"prop-types": "^15.8.1",
"react": "^18.0.0",
"react-dom": "^18.0.0",

추가됨

pubilc/index.html

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta name="description" content="Web site created using create-react-app"/>
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

src/

APP.js

import React from 'react';

function App() {
  return (
    <div className="App">
      리액트로 작업하기
    </div>
  );
}

export default App;

//포토폴리오
import React from 'react';
import {BrowserRouter as Router, Route} from "react-router-dom";
import Main from "./components/pages/Main";
import About from "./components/pages/About";
import Reference from "./components/pages/Reference";
import Script from "./components/pages/Script";
import Youtube from "./components/pages/Youtube";
import Contact from "./components/pages/Contact";
import Portfolio from "./components/pages/Portfolio";

function App() {
  return (
    <Router>
      <Route path="/" exact component={Main} />
      <Route path="/about" exact component={About} />
      <Route path="/reference" exact component={Reference} />
      <Route path="/script" exact component={Script} />
      <Route path="/youtube" exact component={Youtube} />
      <Route path="/contact" exact component={Contact} />
      <Route path="/portfolio" exact component={Portfolio} />
    </Router>
  );
}

export default App;

index.js

// 렌더링
import React from "react";
import ReactDOM from 'react-dom/client';

function Hello(props){
  return <h1>hello,{props.name}</h1>
}
const element = <Hello name="world"/>;
ReactDOM.render(element, document.getElementById("root"));

//포토폴리오
import React from 'react';
import ReactDOM from 'react-dom/client';
import "./style.scss";
import App from "./App";

const rootNode = document.getElementById('root');

ReactDOM.createRoot(rootNode).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
);

기타 명령어

  • ES7 React/Redux/GraphQL/React Native-snippets

node

Node.js 설치

(터미널 열고[ctrl+`] 명령어 입력)

node 설치 확인 : 설치 되면 버전이 뜬다

node --version

npm --version

설치

npx create-react-app ./

npx create-react-app react2022(파일명)

이게 뜨면 성공

리액트 시작하기

  1. npm start
  2. 파일 경로 설정 후 npm start

예시) 리액트 ‘작성’하여 적용된 모습이다

이렇게 브라우저가 뜬다

셋팅

파일 아래만 남기기

.gitignore

# See <https://help.github.com/articles/ignoring-files/> for more about ignoring files.

# dependencies
/node_modules

# production
/build

버전 설치 : package.json

터미널
파일경로 설정
nom start
npm install react-router-dom@5.3.0
npm install prop-types
npm install node-sass

입력하면

"node-sass": "^7.0.1",
"prop-types": "^15.8.1",
"react": "^18.0.0",
"react-dom": "^18.0.0",

추가됨

pubilc/index.html

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta name="description" content="Web site created using create-react-app"/>
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

src/

APP.js

import React from 'react';

function App() {
  return (
    <div className="App">
      리액트로 작업하기
    </div>
  );
}

export default App;

//포토폴리오
import React from 'react';
import {BrowserRouter as Router, Route} from "react-router-dom";
import Main from "./components/pages/Main";
import About from "./components/pages/About";
import Reference from "./components/pages/Reference";
import Script from "./components/pages/Script";
import Youtube from "./components/pages/Youtube";
import Contact from "./components/pages/Contact";
import Portfolio from "./components/pages/Portfolio";

function App() {
  return (
    <Router>
      <Route path="/" exact component={Main} />
      <Route path="/about" exact component={About} />
      <Route path="/reference" exact component={Reference} />
      <Route path="/script" exact component={Script} />
      <Route path="/youtube" exact component={Youtube} />
      <Route path="/contact" exact component={Contact} />
      <Route path="/portfolio" exact component={Portfolio} />
    </Router>
  );
}

export default App;

index.js

// 렌더링
import React from "react";
import ReactDOM from 'react-dom/client';

function Hello(props){
  return <h1>hello,{props.name}</h1>
}
const element = <Hello name="world"/>;
ReactDOM.render(element, document.getElementById("root"));

//포토폴리오
import React from 'react';
import ReactDOM from 'react-dom/client';
import "./style.scss";
import App from "./App";

const rootNode = document.getElementById('root');

ReactDOM.createRoot(rootNode).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
);

기타 명령어

'react' 카테고리의 다른 글

[리액트] 데이터 불러오는 방법  (0) 2022.04.17

UP NEXT : react

댓글
© 2018 webstoryboy