Я пытаюсь понять, как создавать (возможно, экспортировать?) и использовать (импортировать?) компоненты в приложении React? Например, небольшое приложение React ниже представляет собой файл .HTML и работает нормально. Он отображает случайные числа снова и снова. Итак, если бы я хотел поместить класс ShowRandomNumbers extends React.Component в отдельный файл (с расширением.... какого .JSX?) и использовать его в файле HTML с оператором импорта, какие шаги мне нужно было бы сделать? делать?
Я привык к концепции использования внешних файлов JS и CSS, например:
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.38/browser.js"></script>
а также
<link rel="stylesheet" href="../../css/base200.css" />
но эти файлы я просто создаю с помощью простого редактора и автономных файлов Save-As. Я погуглил об экспорте по умолчанию и импорте, и я вижу синтаксис, такой как приложение экспорта по умолчанию; и импортировать приложение из './App.jsx'; Но нет четкого «как». Нужны ли мне утилиты для создания файла JSX?
Шаг за шагом будет оценен. Благодарю вас.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>79E - ALL CDN</title>
</head>
<body>
<div id="container"></div>
<script type="text/babel">
class ShowRandomNumbers extends React.Component {
constructor(props) { super(props); }
render() {
var elapsed = Math.round(this.props.timeNow / 100);
var seconds = elapsed / 10 + (elapsed % 10 ? '' : '.0' );
var r1 = this.props.random1;
return (
<p >Running for {seconds} seconds. Random 1 is: {r1} Random 2 is: {this.props.random2} </p >
);
} // render -- END
} // Class - End
var start = new Date().getTime();
setInterval(function() {
ReactDOM.render(
<ShowRandomNumbers
timeNow={ new Date().getTime() - start }
random1= { Math.floor(Math.random() * (500 - 100 + 1)) + 100 }
random2= { Math.floor(Math.random() * (600 - 100 + 1)) + 100 }
/>,
document.getElementById('container')
);
}, 50);
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.38/browser.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.js"></script>
</body>
</html>
