Как импортировать файл реакции

Я новичок в JavaScript и React.js, и у меня возникают проблемы с импортом.Как импортировать файл реакции

У меня есть следующий index.js файл:

var Main = React.createClass ({ 
    render: function() { 
     return (
      <div>test</div> 
     ); 
    } 
}); 


ReactDOM.render(
    <Main/>, 
    document.getElementById('content') 
);

следующий pub.js файл:

export default class Pub extends React.Component { 
    render() { 
     return <div>test</div> ; 
    } 
};

Файл pub.js и index.js файл содержится в том же папка ->/scripts. У меня также есть следующий файл index.html:

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>React Application</title> 
    <!-- Not present in the tutorial. Just for basic styling. --> 
    <link rel="stylesheet" href="css/base.css" /> 
    <script src="https://unpkg.com/[email protected]/dist/react.js"></script> 
    <script src="https://unpkg.com/[email protected]/dist/react-dom.js"></script> 
    <script src="https://unpkg.com/[email protected]/babel.min.js"></script> 
    <script src="https://unpkg.com/[email protected]/dist/jquery.min.js"></script> 
    <script src="https://unpkg.com/[email protected]/dist/remarkable.min.js"></script> 
    </head> 
    <body> 
    <div id="content"></div> 
    <script type="text/babel" src="scripts/index.js"></script> 
    </body> 
</html>

Это отлично работает, т.е. загружает страницу, которая читает «тест»

Но если я просто импортировать класс Pub (даже без использования его), как показано ниже , приложение разбивается, и на экране ничего не отображается.

import Pub from './pub' 

var Main = React.createClass ({ 
    render: function() { 
     return (
      <div>test</div> 
     ); 
    } 
}); 


ReactDOM.render(
    <Main/>, 
    document.getElementById('content') 
);

Кроме того, в случае, если ошибка вызвана неиспользованным импортом, я также попробовал следующее:

ReactDOM.render(
    <Pub/>, 
    document.getElementById('content') 
);

Если кто-то может пролить некоторый свет на вопрос, или даже лучше, точку меня к хорошему инструменту для проверки синтаксиса кода React.js. Я был бы признателен.

источник

2017-01-20 John Devitt

импорта не работают в браузере, вам нужно что-то импортировать для вас, как WebPack/браузером/rollup – azium

https://github.com/facebookincubator/create-react-app - довольно неплохая игра на старте, если вы не хотите учиться в Интернете. –

Также - https://reactforbeginners.com/ является действительно хорошим ресурсом для изучения основ (и более продвинутого материала позже) –

Im, используя webpack для создания/трансбикации/обслуживания моего кода.

я попробовал ваш образец, и он работает в такой установке:

я создал компонент Pub.jsx и экспортируется таким образом:

import React from 'react'; 

class Pub extends React.Component { 
    render() { 
     return <div>ĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄ</div>; 
    } 
} 

export default Pub;

тогда я импортировал Pub компонента к другому компоненту в то же каталог и он отображается правильно:

import React from 'react'; 

import Pub from './Pub'; 

class ExplorableList extends React.Component { 
    render() { 
     return (<Pub />); 
    } 
} 

export default ExplorableList;

вынесено результат в браузере: https://www.screencast.com/t/Ojwrq3KNE

Моя структура папок: https://www.screencast.com/t/9Mi8LLdnv

Проверьте, работает ли он для вас (если нет, то предоставить точную ошибку вы получаете)

источник

2017-01-20 17:31:15

Как импортировать файл реакции

ответ

Смежные вопросы