[React] 리액트 설치하기, 시작 방법

1. 설치하기 (터미널 아래에 쳐서 설치)

D:\file\react>npx create-react-app react01 

 

2. 왼쪽에 react생성한 파일을 선택후 react01 >src>app .js 선택후
 아래 터미널에 D:\새싹\react\react01>npm start 치기 

 

▼ 완성되면 뜨는 화면

 

3. app.js 에서 아래에 내용 삭제 후 스타일에 맞게 수정 가능

<div className="App">

</div> 

이건 건들면 안됨. html같은 역할임

style에 맞게 내용추가

 

import './reset.css';
import './App.css';
import Nav from './Nav'; /* /Nav.js라해도 되고 Nav라 해도 됨 */

function App() {
  const listLi={margin:'0 10px',lineHeight:'50px',backgroundColor:'#621'}
  let num =1;

  return (
    <div className="App">
      <Nav />  
      <h1 className='title'>리액트 시작하기</h1>
      <ul style={{fontSize:'30px',color:'#fff',margin:'50px auto',display:'flex',justifyContent:'center',backgroundColor:'#689'}}>
        <li style={listLi}>리스트{num}</li>
        <li style={listLi}>리스트{++num}</li>
        <li style={listLi}>리스트{++num}</li>
        <li style={listLi}>리스트{++num}</li>
      </ul>
    </div>
  );
}

/* jsx 문법 js, html 혼합해서 사용 */
export default App;

 

4.app.css 에서 아래 내용 삭제후 수정 가능

style에 맞게 내용추가

 

.App {
  text-align: center;
}
ul,li{list-style: none;}

.title{color: red;}

 

5. Nav.js (새로운 파일 생성 후 style 적용-앞에 대문자로 시작)

 

import React from 'react';

function Nav(){
    const navList={width:100,height:50,lineHeight:'50px',backgroundColor:'#487',margin:'10px', borderRadius:10}
    return(
        <nav style={{display:'flex',justifyContent:'center'}}>
            <ul>
                <li style={navList}>메뉴1</li>
                <li style={navList}>메뉴2</li>
                <li style={navList}>메뉴3</li>
            </ul>
        </nav>
    )
}

export default Nav;

 

 

* App.js가 아닌 index.js 가 메인

 

*react 다른 파일 불러오고 적용할때>  npm install 터미널에 작성