Я начал изучать ReactJS. Похоже, что Facebook только что выпустил версию 15.0.1. Я изучил эту структуру в прошлом году, в версии 0.12.x, когда использовал JSXTransformer, и теперь кажется, что он ушел от него.
Теперь кажется, что почти каждый учебник предлагает использовать новейший React с Webpack. Есть ли способ не использовать webpack? Я пытаюсь найти хороший действительный пример с задачей grunt для React 15.xx
Любая помощь будет оценена по достоинству.
Jsx трансформатор устарел, кажется.
Обновление 04/08/2019: используйте https://github.com/developit/htm для минималистской настройки реагирования.
Если вы не хотите использовать веб-пакет, вам нужно подумать о том, без каких функций вы можете жить.
Благодаря расширению поддержки браузерами функций ES6 теперь вы можете использовать синтаксис ES6, а также использовать модули (при активации флагов эксперимента) без использования Webpack.
Если вы хотите использовать JSX, вам всегда нужно будет перенести его в JS, потому что в обозримом будущем нет встроенной поддержки для него. Самый простой способ сделать это - добавить промежуточное программное обеспечение Babel с предустановкой "React" на свой сервер разработки.
Управление зависимостями также будет сложным, потому что npm предоставляет пакеты в CommonJS, которые не могут работать как в браузере...
Если вы хотите поэкспериментировать с этим, вы можете проверить экспериментальный стартовый набор React, который я поставил на GitHub React Without Webpack, который пытается реплицировать большинство функций веб-пакетов с использованием встроенных функций браузера и http2.
Самый простой способ:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="root"></div>
<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
class Hello extends React.Component{
render() {
return <p>Hello {this.props.name}</p>;
};
}
ReactDOM.render(
<Hello name='World'/>,
document.getElementById('root'),
);
</script>
</body>
</html>
Самый простой способ не использовать webpack - просто использовать babel.
В настоящий момент самая минимальная настройка, которую я могу выяснить, - использовать пакеты babel-cli и babel-preset-react.
Если у вас есть файл package.json, вам просто нужно ввести:
npm install babel-cli babel-preset-env --save-dev
Тогда вам понадобится файл.babelrc с по крайней мере следующим содержимым: {"presets": ["react"]}.
Если, например, ваши источники javascript находятся в папке js, вы можете скомпилировать их в папку lib, добавив в свой файл package.json поле сценариев:
"scripts": {
"build": "babel js --out-dir lib"
},
Таким образом, запуск npm run build компилирует ваши файлы javascript в папку lib.
Тогда вам просто нужно связать скомпилированный файл в html, например:
<script src="lib/script.js"></script>
Минимальный код для использования реакции:
const HelloWorld = function HelloWorld(props, context) {
return <p>Hello <strong>React</strong>!</p>;
};
ReactDOM.render(
<HelloWorld />,
document.getElementById('root'),
);
Обратите внимание, что при таком подходе вы не переставляете es6 на es5, поэтому, если вы хотите поддерживать старые браузеры, вам все равно нужно добавить пакет babel-preset-env и изменить файл.babelrc, как этот
{
"presets": ["env", "react"]
}
Вам не нужен Webpack или хрюкать, вместо JSXTransformer вам нужно использовать Babel https://facebook.github.io/react/docs/getting-started.html#offline-transform
Вам просто нужно включить автономную версию babel, как это объясняется в документации: https://reactjs.org/docs/add-react-to-a-website.html#optional-try-react-with-jsx
Quickly Try JSX
Самый быстрый способ попробовать JSX в своем проекте - добавить этот тег на свою страницу:
В настоящее время Вы можете использовать JSX в любом теге, добавив type = "text/babel" приписать ему. Вот пример HTML файла с JSX, который вы можете скачать и играть с.
Этот подход хорош для изучения и создания простых демонстраций. Тем не мение, это делает ваш сайт медленным и не подходит для производства. когда Вы готовы двигаться вперед, удалите этот новый тег и Атрибуты type = "text/babel" добавлены. Вместо этого в следующем раздел вы настроите препроцессор JSX для преобразования всех ваших теги автоматически.
Вот пример:
index.html
<body>
<div id="root"></div>
<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
function Hello(props) {
const [name, setName] = React.useState(props.name);
return (
<h1 onClick = {() => setName(Math.random().toString(36).substring(5))}>
Hello {name}
</h1>
);
}
ReactDOM.render(
<Hello name='World'/>,
document.getElementById('root'),
);
</script>
</body>