리액트

import 로 불러오고 export로 닫아준다. return 안에는 html형식을 넣어주는데 이때 안에 넣어주는 언어를 jss 라고 한다. 여기서 주의할 점은 단일태그를 기존 html에서는 닫지 않아도 되었지만 여기서는 닫는 태그를 넣어 </> 주어야 닫힌다.

 

이 안에서 해당 내용이 바뀐다고 생각해주고 div 태그는 꼭 유지 해주어야한다.

여기서는 css를 사용하는것과 같이 진행해주면 된다.

데이터 바인딩으로 데이터를 선언하고 {} 로 jss 언어의 리액트 언어를 사용해서 해당 내용을 넣을수 있는 자바를 실행한다.

 

import './App.css';

function App() {

  let test="JAVASCRIPT";

 

  return (

    <div className="App">

      <div className="box" style={{color:"red"}}>REACT</div>

      <h1>{test}</h1>

      <img src={food1} className={test}/>

    </div>

  );

}

export default App;

import food1 from './img/food1.jpg'

import './App.css';

function App() {

  let test="JAVASCRIPT";

  function fun(){

    return 20*3

  }

 

  return (

    <div className="App">

      <div className="box" style={{color:"red"}}>REACT</div>

      <h1>{test}</h1>

      <p>{fun()}</p>

      <img src={food1} className={test}/>

    </div>

  );

}

export default App;

/*isLint-disable*/

import logo from './img/logo.svg'

import food1 from './img/food1.jpg'

import food2 from './img/food2.jpg'

import food3 from './img/food3.jpg'

import './App.css';

function App() {

 

  return (

    <div className="App">

      <header className="header">

        <h1 className="logo">

          <img src={logo}/>

        </h1>

        <nav className="gnb">

          <a>Recipe</a>

          <a>Gallery</a>

          <a>Contect</a>

        </nav>

      </header>

      <main className="container">

        <h2 className="tit">Recipe</h2>

        <div className="recipes">

          <img src={food1}/>

          <h3 className="sub-tit">Steak</h3>

          <button>View More</button>

        </div>

        <div className="recipes">

          <img src={food2}/>

          <h3 className="sub-tit">Pasta and Wine</h3>

          <button>View More</button>

        </div>

        <div className="recipes">

          <img src={food3}/>

          <h3 className="sub-tit">Cherries</h3>

          <button>View More</button>

        </div>

      </main>

      <footer className="footer">

        <p>copyright &copy;RECIPE</p>

      </footer>

    </div>

  );

}

export default App;