곽로그

[react] 생활코딩 본문

WEB/react

[react] 생활코딩

일도이동 2021. 1. 12. 01:51
반응형

  • npx serve -s build :

    • npx: 한번만 실행시킬 서버를 설치한다
    • -s : 다음에 오는 매개변수에 해당하는 디렉토리를 루트디렉토리로
    • 빌드하게 되면 용량이 줄어든다

     

    10. 리액트가 없다면

    • public : npm run start을 했을 때 파일를 찾는 디렉토리
    • 아래의 코드에서 <header>가 100만줄 <nav>가 1억줄 이런 상황이라면, 페이지의 구조를 한 눈에 보기 어렵다 → 컴포넌트화
    <html> <body> <header> <h1>WEB</h1> world wide web! </header> <nav> <ul> <li><a href="1.html">HTML</a></li> <li><a href="2.css">CSS</a></li> <li><a href="3.js">JavaScript</a></li> </ul> </nav> <article> <h2>HTML</h2> HTML is Hyper Text Markup Language </article> </body> </html>

    11.1, 11.2 컴포넌트 만들기

    • 컴포넌트의 기본 틀
    import React,{Component} from 'react'; import './App.css'; class App extends Component{ render(){ return ( <div className="App"> Hello, React! </div> ) } } export default App;
    • pure.html의 <header>~</header>를 <Subject></Subject>로 바꾸고 싶다
      • 컴포넌트를 만들때는 반드시 하나의 최상위 태그를 써야한다.
    • 리액트는 유사 자바스크립트언어
      • return ( <div>~를 자바스크립트에서 하려면 따옴표 안에해야하는 번거로움이 있다
      • 이걸 쉽게 하기 위해서 페이스북에서 개발한 언어 jsx
      • 리액트는 이 jsx코드를 js코드로 변환한 후 html로
반응형
저작자표시 비영리 변경금지

'WEB > react' 카테고리의 다른 글

[리액트] 여러 개의 Component를 export하는 방법  (0) 2021.07.21
'WEB/react' Related Articles more
Comments