본문 바로가기
Dev/React

[React] #2. The Basic of React - JSX

by 코딩삐약 2022. 5. 23.

 - JSX(JavaScript XML)는 Javascript에 XML을 추가한 확장한 문법이다.
 - JSX는 리액트로 프로젝트를 개발할 때 사용되므로 공식적인 자바스크립트 문법은 아니다.
 - 브라우저에서 실행하기 전에 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다.

출처: https://goddaehee.tistory.com/296 [갓대희의 작은공간]

<!DOCTYPE html>
<html>
    <body>
        <div id="root"></div>
    </body>
    <script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
    <!--babel load-->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script type="text/babel">
        //JSX js의 확장된 문법 createElement 대신 사용해보기
        const root = document.getElementById("root");
        const Title = (
            <h3 id="title" onMouseEnter={() => console.log("mouse enter")}>
            Hello I'm a title
            </h3>
        );
        
        const Button = (
        <button style={{backgroundColor : "tomato",}} onClick={()=> console.log("im clicked.")}>
            Click me
            </button>
        );

        const container = React.createElement("div", null, [Title, Button]);
        ReactDOM.render(container, root); 
    </script>
</html>

 

<!DOCTYPE html>
<html>
    <body>
        <div id="root"></div>
    </body>
    <script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script type="text/babel">
        const root = document.getElementById("root");
        // Container에 Title,Button을 include하려면 함수로 만들어줘야함 
        // (arrow function : 함수로 만들어 return해주는것과 같음)
        function Title() {
            return (
            <h3 id="title" onMouseEnter={() => console.log("mouse enter")}>
            Hello I'm a title
            </h3>
            );
        }
        // 위에 함수와 동일한 기능
        const Button = () => (
        <button style={{backgroundColor : "tomato",}} onClick={()=> console.log("im clicked.")}>
            Click me
            </button>
        );
        // 컴포넌트의 첫 글자는 반드시 대문자여야함 (html 태그로 혼동)
        const Container = () => (
            <div>
                <Title />
                <Button />
            </div>
        );
        ReactDOM.render(<Container />, root);
    </script>
</html>

 

React docs

https://ko.reactjs.org/docs/introducing-jsx.html

 

'Dev > React' 카테고리의 다른 글

[React] #5. Intro- React App 만들기  (0) 2022.05.27
[React] #4. Props  (0) 2022.05.26
[React] #3.5 Inputs and State  (0) 2022.05.25
[React] #3. State  (0) 2022.05.23
[React] #1. The Basic of React - Events in React  (0) 2022.05.17