<div><!DOCTYPE html><br><html><br><head><br> <meta charset="utf-8"><br> <title>jsx를 사용한 리액트 예제</title><br></head><br><body><br> <div class="" id="react-container"></div> <div> </div></div> <div> <script src="<a target="_blank" href="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.1/cjs/react.development.js" target="_blank">https://cdnjs.cloudflare.com/ajax/libs/react/16.4.1/cjs/react.development.js</a>"> </script><br> <script src="<a target="_blank" href="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.1/umd/react-dom.production.min.js" target="_blank">https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.1/umd/react-dom.production.min.js</a>"></div> <div> </script><br> <script src="<a target="_blank" href="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js" target="_blank">https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js</a>"></div> <div> </script></div> <div> <script type="text/babel"></div> <div> const data= [<br> {<br> "name":"Baked Salmon",<br> "ingredients":[<br> {"name":"연어", "amount":500, "measurement":"gram"},<br> {"name":"잣", "amount":1, "measurement":"cup"},<br> {"name":"버터 상추", "amount":2, "measurement":"cup"},<br> {"name":"옐로 스쿼시", "amount":1, "measurement":"EA"},<br> {"name":"올리브 오일", "amount":0.5, "measurement":"cup"},<br> {"name":"마늘", "amount":3, "measurement":"EA"},</div> <div> ],<br> "steps":[<br> "오븐을 350도로 예열한다.",<br> "유리 베이킹 그릇에 올리브 오일을 두른다.",<br> "연어, 마늘, 잣을 그릇에 담는다.",<br> "오븐에서 15분간 익힌다.",<br> "옐로 스쿼시를 추가하고 다시 30분간 오븐에서 익힌다.",<br> "오븐에서 그릇을 꺼내서 15분간 식힌 다음 상추를 곁들여서 내놓는다."<br> ]<br> },<br> {<br> "name":"fish taco",<br> "ingredients":[<br> {"name":"흰살생선", "amount":500, "measurement":"gram"},<br> {"name":"치즈", "amount":1, "measurement":"cup"},<br> {"name":"아이스버그 상추", "amount":2, "measurement":"cup"},<br> {"name":"토마토", "amount":2, "measurement":"EA"},<br> {"name":"또띠아", "amount":3, "measurement":"EA"},</div> <div><br> ],<br> "steps":[<br> "생선을 그릴에 익힌다.",<br> "또띠아 3장위에 생선을 얹는다"<br> "또ㅠ띠야에 얹은 생선 위에 상추, 토마토, 치즈를 얹는다.",</div> <div> ]<br> }<br> ]</div> <div> const Recipe = ({name, ingredients, steps}) =><br> <section id={name.toLowerCase().replace(/ /g, "-")}><br> <h1>{name}</h1><br> <ul className="ingredients"><br> {ingredients.map((ingredient, i)=><br> <li key={i}>{ingredient.name}</li><br> )}<br> </ul><br> <section className="instructions"><br> <h2>조리절차</h2><br> {steps.map((step, i) =><br> <p key={i}>{step}</p><br> )}<br> </section><br> </section></div> <div> const Menu =({title, recipes}) =><br> <article><br> <header><br> <h1>{title}</h1><br> </header><br> <div className="recipes"><br> {recipes.map((recipe,i)=><br> <Recipe key={i} {...recipe} /><br> )}<br> </div><br> </article></div> <div> ReactDOM.render(<Menu recipes={data} title="맛있는 조리법" />, document.getElementById("react-container"))<br> </script></div> <div> <div class="" id="react-container"></div> <div> </div><br></body></div> <div></html><br></div>
러닝 리엑트 130페이지입니다. 
댓글 분란 또는 분쟁 때문에 전체 댓글이 블라인드 처리되었습니다.