React cdn 방식으로 시작하기 (php파일에서 리액트 사용하기)

리액트를 사용하기 위해 cdn을 추가해준다.

개발용 버전

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

React의 용량 및 성능 최적화된 배포용 버전

<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>

 

나의 경우에는 php 파일이라서 import React, { useState } from 'react';와 같은 방식으로 useState를 import 하는 게 불가능했다.

(혹시 가능한 방법이 있다면 알려주세요..ㅎㅎ)

그래서 useState를 사용하기 위해서는 React.useState로 써줘야 한다.

 

바벨 추가하기

<script src=" https://unpkg.com/@babel/standalone/babel.min.js"></script>

<script>에 type="text/babel"을 추가해줘야 한다.

 

전체 소스 예시는 아래와 같다!

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src=" https://unpkg.com/@babel/standalone/babel.min.js"></script>

<div id="root"></div>

<script type="text/babel">
    const Example = () =>{ 
        const [count, setCount] = React.useState(0); 
            return (
                <div>
                    <p>You clicked {count} times</p>
                    <button onClick={() => setCount(count + 1)}>Click me</button>
                </div>
            ); 
    }

    const Welcome = (props) => {
        return <h1>Hello, {props.name}</h1>;
    }

    function App() {
        return (
            <div>
                <Example/>
                <Welcome name="Sara" />
                <Welcome name="Cahal" />
                <Welcome name="Edite" />
            </div>
        );
    }

    ReactDOM.render(
        <App/>,
        document.querySelector("#root")
    );

</script>

 

(php 파일에서 리액트 사용하는 법)

<?php
add_javascript('<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js" ></script>', 10);
add_javascript('<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>', 10);
add_javascript('<script src=" https://unpkg.com/@babel/standalone/babel.min.js"></script>', 10);
?>


<div id="root"></div>

<script type="text/babel">

    const Example = () =>{ 
        const [count, setCount] = React.useState(0); 
            return (
                <div>
                    <p>You clicked {count} times</p>
                    <button onClick={() => setCount(count + 1)}>Click me</button>
                </div>
            ); 
    }

    const Welcome = (props) => {
        return <h1>Hello, {props.name}</h1>;
    }

    function App() {
        return (
            <div>
                <Example/>
                <Welcome name="Sara" />
                <Welcome name="Cahal" />
                <Welcome name="Edite" />
            </div>
        );
    }

    ReactDOM.render(
        <App/>,
        document.querySelector("#root")
    );

</script>

아래와 같이 잘 동작한다!

https://ko.reactjs.org/docs/cdn-links.html