본문 바로가기

ITdata/React

(6)
React - style, css 1. style class App extends Component{ render(){ const style = { color = 'aqua', fontSize = '36px' }; return ( sample_style ) } } 2. css .nustyle { color: red; font-size: 36px; } "App.css" import "./App.css"; class App extends Component{ render(){ return( sample_css ) } } "App.js"
React - 조건(IIFE, Arrow, 삼항연산, AND) 1. IIFE 정의되자마자 즉시 실행되는 Javascript Function (functio() { if (time === 1) return (uno); })() 2. arrow function this, arguments, super 개념이 없는 익명 함수 (() => { if (time === 2) return (dos); })() 3. 삼항연산 1 + 1 === 2 ? (true) : (false) 4. AND 1 + 1 === 2 && (true->exec) 참조 https://developer.mozilla.org/ko/docs/Glossary/IIFE
React - Fragment, const, let 1. Fragment import React, { Component, Fragment } from 'react'; class App extends Component { render(){ return( ); } } 2. const, let const variable = 'value'; {//함수 단위 scope} let variable = 'value'; {//블록 단위 scope}
React - index.js 1. import import App from './App'; 2. render ReactDOM.render(, document.getElementById('root')); registerServiceWorker();
React - App.js 1. import import React, { Component } from 'react'; import './App.css'; 2. 컴포넌트 생성 class App extends Component { render(){ return( JSX ) } } or function App(){ return( JSX ) } 3. export export default App;
(CentOS7/Linux) create-react-app # echo 'export PATH="$(yarn global bin):$PATH"' >> ~/.bashrc (or) - # npm install -g create-react-app (or) - # yarn global add create-react-app # create-react-app # cd (or) - # PORT=80 npm start (or) - # PORT=80 yarn start