Notice
Recent Posts
Archives
04-29 19:04
반응형
관리 메뉴

Tegi Log : 블록체인, 축구, 소레어, Sorare 컨텐츠망상공간

다짜고짜 리액트 시작 첫 컴포넌트 - 20220706 본문

Development/ReactJS

다짜고짜 리액트 시작 첫 컴포넌트 - 20220706

Tegi 2022. 7. 6. 00:39
반응형
<body>
   <div id="root"></div>
</body>
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
    //root id를 가져오고
    const root = document.getElementById("root");
    
    //JSX방식으로 코드를 작성하면 const = <button></button>
    //babel이 브라우저가 알아듣게 reactJS로 변환시켜줌.
    const FirstComponent = () => (
        <button
            style={{backgroundColor:'yellow',}}
            onClick={()=> console.log('Im clicked')}
            >
            FCBtn!
        </button>
    );

    //컨테이너에 태그들을 넣으면서 트리를 만들 수 있다.
    const Container = () => (
        <div>
            <FirstComponent/>
        </div>
        );

    ReactDOM.render(<Container/>,root); // 리액트 DOM에 렌더한다(컨테이터를, root에);
</script>

 

반응형

'Development > ReactJS' 카테고리의 다른 글

ReactJS스터디 - 컴포넌트 합성 Composing components 220707  (0) 2022.07.07
리액트스터디 - React.useState() 심화 20220706  (0) 2022.07.06
리액트스터디 - React.useState #20220706  (0) 2022.07.06
'Development/ReactJS' Related Articles more
Comments