Enviar pesquisa
Carregar
2.jsx 101
•
0 gostou
•
150 visualizações
Daniel Lim
Seguir
jsx의 기초 정리
Leia menos
Leia mais
Software
Denunciar
Compartilhar
Denunciar
Compartilhar
1 de 17
Baixar agora
Baixar para ler offline
Recomendados
1.react 101
1.react 101
Daniel Lim
Angular는 사실 어렵지 않습니다.
Angular는 사실 어렵지 않습니다.
장현 한
Angular 기본 개념 잡기
Angular 기본 개념 잡기
장현 한
Angularjs 도입 선택 가이드
Angularjs 도입 선택 가이드
NAVER D2
iOS9 소개
iOS9 소개
Jae Sung Park
Spring Boot + React + Gradle in VSCode
Spring Boot + React + Gradle in VSCode
dpTablo
AngularJS 2, version 1 and ReactJS
AngularJS 2, version 1 and ReactJS
Kenneth Ceyer
그레이들(Gradle)로 만드는 안드로이드 요리법
그레이들(Gradle)로 만드는 안드로이드 요리법
양 한빛
Recomendados
1.react 101
1.react 101
Daniel Lim
Angular는 사실 어렵지 않습니다.
Angular는 사실 어렵지 않습니다.
장현 한
Angular 기본 개념 잡기
Angular 기본 개념 잡기
장현 한
Angularjs 도입 선택 가이드
Angularjs 도입 선택 가이드
NAVER D2
iOS9 소개
iOS9 소개
Jae Sung Park
Spring Boot + React + Gradle in VSCode
Spring Boot + React + Gradle in VSCode
dpTablo
AngularJS 2, version 1 and ReactJS
AngularJS 2, version 1 and ReactJS
Kenneth Ceyer
그레이들(Gradle)로 만드는 안드로이드 요리법
그레이들(Gradle)로 만드는 안드로이드 요리법
양 한빛
Data-binding AngularJS
Data-binding AngularJS
EunYoung Kim
Angular Seminar [한빛미디어 리얼타임 세미나]
Angular Seminar [한빛미디어 리얼타임 세미나]
Woojin Joe
[리뷰] 풀스택 개발자를 위한 MEAM 스택 입문
[리뷰] 풀스택 개발자를 위한 MEAM 스택 입문
종훈 박
20130709 gradle
20130709 gradle
Sukjin Yun
원모먼트 Vue js 적용기
원모먼트 Vue js 적용기
우현 김
최근 Javascript framework 조사
최근 Javascript framework 조사
Kichul Jung
Angular2 톺아보기
Angular2 톺아보기
철민 배
웹-프론트엔드 프레임워크를 고르기 위한 팁
웹-프론트엔드 프레임워크를 고르기 위한 팁
WebFrameworks
가볍게 살펴보는 AngularJS
가볍게 살펴보는 AngularJS
Jae Sung Park
Angular js quick start
Angular js quick start
정기 김
위플래닛 발표자료 Meteor_js
위플래닛 발표자료 Meteor_js
WebFrameworks
Universal Rendering
Universal Rendering
Taegon Kim
목적에 맞게 Angular, React, Vue
목적에 맞게 Angular, React, Vue
Gunhee Lee
Front end dev 2016 & beyond
Front end dev 2016 & beyond
Jae Sung Park
[24]안드로이드 웹뷰의 모든것
[24]안드로이드 웹뷰의 모든것
NAVER Engineering
[D2 오픈세미나]3.web view hybridapp
[D2 오픈세미나]3.web view hybridapp
NAVER D2
[26]자동화, 계륵에 살 붙이기 : Evolution of Android Automation Test
[26]자동화, 계륵에 살 붙이기 : Evolution of Android Automation Test
NAVER Engineering
GEF
GEF
cho hyun jong
[재직자과정추천]앵귤러js(angular js), 리액트(react) 기반 웹 & 앱 ui개발 재직자 향상과정_앵귤러학원/직장인환급/앵귤러...
[재직자과정추천]앵귤러js(angular js), 리액트(react) 기반 웹 & 앱 ui개발 재직자 향상과정_앵귤러학원/직장인환급/앵귤러...
탑크리에듀(구로디지털단지역3번출구 2분거리)
Gradle 사용하기
Gradle 사용하기
jiseob kim
3.component 101
3.component 101
Daniel Lim
(리액트기초강좌)Reactjs helloworld_리액트공부열심히하세요~
(리액트기초강좌)Reactjs helloworld_리액트공부열심히하세요~
탑크리에듀(구로디지털단지역3번출구 2분거리)
Mais conteúdo relacionado
Mais procurados
Data-binding AngularJS
Data-binding AngularJS
EunYoung Kim
Angular Seminar [한빛미디어 리얼타임 세미나]
Angular Seminar [한빛미디어 리얼타임 세미나]
Woojin Joe
[리뷰] 풀스택 개발자를 위한 MEAM 스택 입문
[리뷰] 풀스택 개발자를 위한 MEAM 스택 입문
종훈 박
20130709 gradle
20130709 gradle
Sukjin Yun
원모먼트 Vue js 적용기
원모먼트 Vue js 적용기
우현 김
최근 Javascript framework 조사
최근 Javascript framework 조사
Kichul Jung
Angular2 톺아보기
Angular2 톺아보기
철민 배
웹-프론트엔드 프레임워크를 고르기 위한 팁
웹-프론트엔드 프레임워크를 고르기 위한 팁
WebFrameworks
가볍게 살펴보는 AngularJS
가볍게 살펴보는 AngularJS
Jae Sung Park
Angular js quick start
Angular js quick start
정기 김
위플래닛 발표자료 Meteor_js
위플래닛 발표자료 Meteor_js
WebFrameworks
Universal Rendering
Universal Rendering
Taegon Kim
목적에 맞게 Angular, React, Vue
목적에 맞게 Angular, React, Vue
Gunhee Lee
Front end dev 2016 & beyond
Front end dev 2016 & beyond
Jae Sung Park
[24]안드로이드 웹뷰의 모든것
[24]안드로이드 웹뷰의 모든것
NAVER Engineering
[D2 오픈세미나]3.web view hybridapp
[D2 오픈세미나]3.web view hybridapp
NAVER D2
[26]자동화, 계륵에 살 붙이기 : Evolution of Android Automation Test
[26]자동화, 계륵에 살 붙이기 : Evolution of Android Automation Test
NAVER Engineering
GEF
GEF
cho hyun jong
[재직자과정추천]앵귤러js(angular js), 리액트(react) 기반 웹 & 앱 ui개발 재직자 향상과정_앵귤러학원/직장인환급/앵귤러...
[재직자과정추천]앵귤러js(angular js), 리액트(react) 기반 웹 & 앱 ui개발 재직자 향상과정_앵귤러학원/직장인환급/앵귤러...
탑크리에듀(구로디지털단지역3번출구 2분거리)
Gradle 사용하기
Gradle 사용하기
jiseob kim
Mais procurados
(20)
Data-binding AngularJS
Data-binding AngularJS
Angular Seminar [한빛미디어 리얼타임 세미나]
Angular Seminar [한빛미디어 리얼타임 세미나]
[리뷰] 풀스택 개발자를 위한 MEAM 스택 입문
[리뷰] 풀스택 개발자를 위한 MEAM 스택 입문
20130709 gradle
20130709 gradle
원모먼트 Vue js 적용기
원모먼트 Vue js 적용기
최근 Javascript framework 조사
최근 Javascript framework 조사
Angular2 톺아보기
Angular2 톺아보기
웹-프론트엔드 프레임워크를 고르기 위한 팁
웹-프론트엔드 프레임워크를 고르기 위한 팁
가볍게 살펴보는 AngularJS
가볍게 살펴보는 AngularJS
Angular js quick start
Angular js quick start
위플래닛 발표자료 Meteor_js
위플래닛 발표자료 Meteor_js
Universal Rendering
Universal Rendering
목적에 맞게 Angular, React, Vue
목적에 맞게 Angular, React, Vue
Front end dev 2016 & beyond
Front end dev 2016 & beyond
[24]안드로이드 웹뷰의 모든것
[24]안드로이드 웹뷰의 모든것
[D2 오픈세미나]3.web view hybridapp
[D2 오픈세미나]3.web view hybridapp
[26]자동화, 계륵에 살 붙이기 : Evolution of Android Automation Test
[26]자동화, 계륵에 살 붙이기 : Evolution of Android Automation Test
GEF
GEF
[재직자과정추천]앵귤러js(angular js), 리액트(react) 기반 웹 & 앱 ui개발 재직자 향상과정_앵귤러학원/직장인환급/앵귤러...
[재직자과정추천]앵귤러js(angular js), 리액트(react) 기반 웹 & 앱 ui개발 재직자 향상과정_앵귤러학원/직장인환급/앵귤러...
Gradle 사용하기
Gradle 사용하기
Semelhante a 2.jsx 101
3.component 101
3.component 101
Daniel Lim
(리액트기초강좌)Reactjs helloworld_리액트공부열심히하세요~
(리액트기초강좌)Reactjs helloworld_리액트공부열심히하세요~
탑크리에듀(구로디지털단지역3번출구 2분거리)
REACTJS HelloWorld
REACTJS HelloWorld
Lee Jong Cheol
11.react router dom
11.react router dom
Daniel Lim
Meteor React Tutorial 따라하기
Meteor React Tutorial 따라하기
Jiam Seo
Create-React-App으로 SSR을 구현하며 배운 점 (feat. TypeScript)
Create-React-App으로 SSR을 구현하며 배운 점 (feat. TypeScript)
LanarkSeung
4-3. jquery
4-3. jquery
JinKyoungHeo
[React-Native-Seoul] React-Native 초심자를 위한 실습위주의 간단한 소개 및 구현법 안내
[React-Native-Seoul] React-Native 초심자를 위한 실습위주의 간단한 소개 및 구현법 안내
Tae-Seong Park
Vue.js 기초 실습.pptx
Vue.js 기초 실습.pptx
wonyong hwang
조은 - AMP PWA 101 [WSConf.Seoul.2017. Vol.2]
조은 - AMP PWA 101 [WSConf.Seoul.2017. Vol.2]
WSConf.
Jenkins를 활용한 javascript 개발
Jenkins를 활용한 javascript 개발
지수 윤
요즘웹개발
요즘웹개발
Lee MyoungKyu
React 튜토리얼 1차시
React 튜토리얼 1차시
태현 김
T12_1_김나람_웹 기술로 구축하는 모바일 애플리케이션 - React Native
T12_1_김나람_웹 기술로 구축하는 모바일 애플리케이션 - React Native
양재동 코드랩
Nodejs express
Nodejs express
Hyosung Jeon
Jqm+appspresso
Jqm+appspresso
Jung Young Kim
Springmvc
Springmvc
HyungKuIm
Deep dive into Modern frameworks - HTML5 Forum 2018
Deep dive into Modern frameworks - HTML5 Forum 2018
Kenneth Ceyer
Isomorphicspring Isomorphic - spring web seminar 2015
Isomorphicspring Isomorphic - spring web seminar 2015
sung yong jung
Node.js and react
Node.js and react
HyungKuIm
Semelhante a 2.jsx 101
(20)
3.component 101
3.component 101
(리액트기초강좌)Reactjs helloworld_리액트공부열심히하세요~
(리액트기초강좌)Reactjs helloworld_리액트공부열심히하세요~
REACTJS HelloWorld
REACTJS HelloWorld
11.react router dom
11.react router dom
Meteor React Tutorial 따라하기
Meteor React Tutorial 따라하기
Create-React-App으로 SSR을 구현하며 배운 점 (feat. TypeScript)
Create-React-App으로 SSR을 구현하며 배운 점 (feat. TypeScript)
4-3. jquery
4-3. jquery
[React-Native-Seoul] React-Native 초심자를 위한 실습위주의 간단한 소개 및 구현법 안내
[React-Native-Seoul] React-Native 초심자를 위한 실습위주의 간단한 소개 및 구현법 안내
Vue.js 기초 실습.pptx
Vue.js 기초 실습.pptx
조은 - AMP PWA 101 [WSConf.Seoul.2017. Vol.2]
조은 - AMP PWA 101 [WSConf.Seoul.2017. Vol.2]
Jenkins를 활용한 javascript 개발
Jenkins를 활용한 javascript 개발
요즘웹개발
요즘웹개발
React 튜토리얼 1차시
React 튜토리얼 1차시
T12_1_김나람_웹 기술로 구축하는 모바일 애플리케이션 - React Native
T12_1_김나람_웹 기술로 구축하는 모바일 애플리케이션 - React Native
Nodejs express
Nodejs express
Jqm+appspresso
Jqm+appspresso
Springmvc
Springmvc
Deep dive into Modern frameworks - HTML5 Forum 2018
Deep dive into Modern frameworks - HTML5 Forum 2018
Isomorphicspring Isomorphic - spring web seminar 2015
Isomorphicspring Isomorphic - spring web seminar 2015
Node.js and react
Node.js and react
Mais de Daniel Lim
내가 생각하는 개발자란?
내가 생각하는 개발자란?
Daniel Lim
개발자를 넘어 기술 리더로 가는 길을 읽고
개발자를 넘어 기술 리더로 가는 길을 읽고
Daniel Lim
스크럼 101
스크럼 101
Daniel Lim
nodejs_101.pdf
nodejs_101.pdf
Daniel Lim
For You
For You
Daniel Lim
Nest js 101
Nest js 101
Daniel Lim
피드백 시스템
피드백 시스템
Daniel Lim
13.code split
13.code split
Daniel Lim
12.context api
12.context api
Daniel Lim
9.component style
9.component style
Daniel Lim
7.component life cycle
7.component life cycle
Daniel Lim
8.hooks
8.hooks
Daniel Lim
6.component repeat
6.component repeat
Daniel Lim
4.event handling
4.event handling
Daniel Lim
5.ref 101
5.ref 101
Daniel Lim
Swagger? OAS? with NodeJS
Swagger? OAS? with NodeJS
Daniel Lim
CuKu V1.3
CuKu V1.3
Daniel Lim
Kubernetes object에 대하여
Kubernetes object에 대하여
Daniel Lim
라즈베리파이 배우기 GPIO 편
라즈베리파이 배우기 GPIO 편
Daniel Lim
ReactJS & Material-ui Hello world
ReactJS & Material-ui Hello world
Daniel Lim
Mais de Daniel Lim
(20)
내가 생각하는 개발자란?
내가 생각하는 개발자란?
개발자를 넘어 기술 리더로 가는 길을 읽고
개발자를 넘어 기술 리더로 가는 길을 읽고
스크럼 101
스크럼 101
nodejs_101.pdf
nodejs_101.pdf
For You
For You
Nest js 101
Nest js 101
피드백 시스템
피드백 시스템
13.code split
13.code split
12.context api
12.context api
9.component style
9.component style
7.component life cycle
7.component life cycle
8.hooks
8.hooks
6.component repeat
6.component repeat
4.event handling
4.event handling
5.ref 101
5.ref 101
Swagger? OAS? with NodeJS
Swagger? OAS? with NodeJS
CuKu V1.3
CuKu V1.3
Kubernetes object에 대하여
Kubernetes object에 대하여
라즈베리파이 배우기 GPIO 편
라즈베리파이 배우기 GPIO 편
ReactJS & Material-ui Hello world
ReactJS & Material-ui Hello world
2.jsx 101
1.
JSX101 임광규 2020.ReactJS 1
2.
ReactJS기본코드설명(App.js) // 리액트를 불러와서
사용할수 있게 지원 import React from 'react'; // SVG(https://ko.wikipedia.org/wiki/%EC%8A%A4%EC%BC%80%EC%9D%BC%EB%9F%AC%EB%B8%94_%EB%B2%A1%ED%84%B0_%EA%B7%B8%EB%9E%98%ED%94%BD%EC%8A%A4) // 스케일러블 벡터 그래픽스 파일 import logo from './logo.svg'; // CSS 로드 import './App.css'; // App 컴포넌트 생성 코드 function App() { return ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <p> Edit <code>src/App.js</code> and save to reload. </p> <a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer" > Learn React </a> </header> </div> ); } export default App; 2020.ReactJS 2
3.
JSX변환 JSX는babel을통해서일반자바스크립트형태의코드로변화됩니다. // JSX const element
= <div>React</div> // 자바 스크립트 const element = React.createElement("div", null, "React"); JSX의뜻은standsforJavaScriptXML입니다. 2020.ReactJS 3
4.
JSX장점 .보기쉽고익숙하다 .활용도가높다. 2020.ReactJS 4
5.
render설명(index.js) ReactDOM.render는컴포넌트를페이지에 랜더링 하는역할이며, react-dom모듈을불러와사용함수의첫번째파라메터는랜더링할내용을
JSX 형태로작성하고, 두번째는JSX를랜더링할 document 내부요소를설정 ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, document.getElementById('root') ); 2020.ReactJS 5
6.
React.StrictMode React.StrictMode는애플리케이션내의잠재적인문제를알아내기위한도구 개발모드에서만활성화되기때문에 프로덕션 &
빌드 에영향을끼치지않습니다. 2020.ReactJS 6
7.
StrictMode 는아래와같은부분에서도움이됩니다. 안전하지않은생명주기를사용하는컴포넌트발견 레거시문자열ref사용에대한경고 권장되지않는findDOMNode사용에대한경고 예상치못한부작용검사 레거시contextAPI검사 2020.ReactJS 7
8.
JSX문법-1 .감싸인요소 return에는꼭한개의DOM만return해야한다. <></>,<React.Fragment></React.Fragment>사용 .자바스크립트표현 import React from
'react'; function App() { const name = '리액트'; return (<> <h1>{name} 안녕!</h1> <h2>동작 테스트</h2> </>); } export default App; 2020.ReactJS 8
9.
JSX문법-2 .if문대신조건부연산자 import React from
'react'; function App() { const name = '리액트'; return (<> {name === '리액트'? (<h1>리액트 입니다.</h1>): (<h1>리액트가 아닙니다.</h1>)} </>); } export default App; 2020.ReactJS 9
10.
JSX문법-3 .AND연산자(&&)를이용한조건부랜더링 import React from
'react'; function App() { const name = '리액트'; return (<> {name === '리액트' && <h1>리액트 입니다.</h1>} </>); } export default App; 2020.ReactJS 10
11.
JSX문법-4 .undefined를랜더링하지않기(OR연산자(||)이용) import React from
'react'; function App() { const name = undefined; return name || '값이 undefined 입니다.'; } export default App; 2020.ReactJS 11
12.
JSX문법-5 .인라인스타일링 import React from
'react'; function App() { const name = '리액트'; return (<div style{{backgroundColor: 'black', color: 'aqua'}}> {name} </div>); } export default App; 2020.ReactJS 12
13.
JSX문법-6 .class대신className import React from
'react'; function App() { return <div className="react">리액트 입니다.</div>; } export default App; 2020.ReactJS 13
14.
JSX문법-7 .꼭닫아야하는태그 import React from
'react'; function App() { return <div> <input /> <br /> <input ></input> </div>; } export default App; 2020.ReactJS 14
15.
JSX문법-8 .주석 import React from
'react'; function App() { return <div className="react" // 시작 태그를 여러줄 작성하게 된다면 여기에 작성 할수 있음 >리액트 입니다. {/* 주석은 이렇게 작성합니다. */} </div>; } export default App; 2020.ReactJS 15
16.
ESLint와Prettier ESLint:문법검사도구 Prettier:코드스타일자동정리도구 2020.ReactJS 16
17.
뽀나스 DOM101:DOM기초 React101:React기초 2020.ReactJS 17
Baixar agora