Hyemi Lee

Hyemi Lee

주니어 개발자의 삽질과 기록

WEB, ReactJS, introduction to react

웹펙

  • 웹팩을 이용해서 최근 자바스크립트 (리액트 코드)를 모든 브라우저가 이해할수 있게 변경해줘야한다. webpack

facebook의 create react app

JSX

  • 리액트로 작성하는 html
  • 리액트 컴포넌트를 만들때 사용하는 언어
  • ex. class -> className ```js
``` - ex. ```js import logo from './logo.svg'; <img src={logo} className="App-logo" alt="logo" /> ``` --- ### render function - 모든 컴포넌트는 render function을 가지고있다. - render : 이 컴포넌트가 나에게 보여주는 것이 무엇인가. ##### index.js ```js import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; // 컴포넌트 App를 불러온다 import * as serviceWorker from './serviceWorker'; ReactDOM.render(, document.getElementById('root')); // ReactDOM이 render(출력)한다. 무엇을? App을. // 어디에? id가 root인 곳에. // root는 index.html에 있다. 그 곳에 출력된다. serviceWorker.unregister(); ``` - public/index.html에 직접 코딩하는 것이 아니라 App.js에 코딩한다 ##### App.js ```js import React from 'react'; import './App.css'; function App() { return (
hello
); } export default App; ``` ![reactjs2](https://user-images.githubusercontent.com/55946791/69522161-120b3900-0fa4-11ea-9f2e-70bea2998c5f.JPG) --- ### react vs reactDOM - react는 UI 라이브러리 - reactDOM은 react를 웹사이트에 출력(render)하는걸 도와주는 모델 (라이브러리를 웹 사이트에 출력해줌) - 웹사이트 : react를 사용해서 웹사이트에 올리고 싶으면 reactDOM을 사용하면 된다 - 모바일 앱 : react를 사용해서 모바일 앱에 올리고싶다면, reactNative를 사용한다 --- ## Reference <https://www.inflearn.com/course/reactjs-web/lecture/8279>

Share on

Twitter Facebook LinkedIn

You may also enjoy

Redis Stream

2021年04月28日

Stream Stream은 로그 데이터를 처리하게위해 5.0에서 새로 도입된 데이터 타입입니다. 대량의 데이터가 연속적으로 발생할때 처리하기 위해 등장했습니다. 기존 데이터를 수정하지 않고 오직 추가로 발생합니다. 이런 종류의 데이터를 stream or log데이터...

Study, Object, chapter2&3 presentation

2021年04月20日

chapter03. 역할, 책임, 협력 객체지향 설계란, 올바른 객체에게 올바른 책임을 할당하면서 낮은 결합도와 높은 응집도를 가진 구조를 창조하는 활동이다.

Spring, chatting 프로그램 만들기, Reactive란?

2020年06月16日

Reactive 막힘없이 흘러다니는 data(event)를 통해 사용자에게 자연스러운 응답을 주고 규모 탄력적으로 리소스를 사용하며 실패에 있어서 유연하게 대처한다 모든 지점에서 블럭 되지 않게 하자 oop와 같은 패러다임 모든 것을 비동기적인 data의 strea...