импорт json в кдн html - PullRequest
Новая
       7

импорт json в кдн html

0 голосов
/ 05 февраля 2020

Я пытаюсь создать веб-страницуact-cdn, которая импортирует файл json и читает этот файл. Но проблема в реакции узла, я могу написать import './something' в этом формате. Я понятия не имею, для CDN. Так что мой код ничего не делает, он дает мне просто черную страницу.

Как я могу решить эту проблему?

Код: 

<!DOCTYPE html>
<html>
<head>
    <title>timeline</title>
    <link rel="stylesheet" href="index.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
</head>

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

    <script type="text/babel">
        const TimelineItem = ({ data }) => (
        <div className="timeline-item">
            <div className="timeline-item-content">
                <span className="tag" style={{ background: data.category.color }}>
                {data.category.tag}
            </span>
                <time>{data.date}</time>
                <p>{data.text}</p>
                {data.link && (
                <a href={data.link.url} target="_blank" rel="noopener noreferrer">
                    {data.link.text}
                </a> )}
                <span className="circle" />
            </div>
        </div>
        ); 
        import timelineData from './data.json'; 
        const Timeline = () => timelineData.length > 0 && (
        <div className="timeline-container">
            {timelineData.map((data, idx) => (
            <TimelineItem data={data} key={idx} /> ))}
        </div>
        ); 
        class MyTimeLine extends React.Component { render(
        <TimeLine/>
) { } } 
        ReactDOM.render(<MyTimeLine />, document.getElementById('root') );
    </script>

</body>

</html>

ideone

...