ReactJS: ReactJS - это интерфейсная библиотека на основе компонентов с открытым исходным кодом, которая используется только для создания пользовательских интерфейсов. React - это гибкая и декларативная библиотека JavaScript. Из-за низкой скорости DOM (объектной модели документа) React реализует виртуальную DOM, которая в основном является абстракцией DOM. ReactJS также дает нам возможность писать вместе JavaScript и HTML.
Babel: Babel - это компилятор JavaScript, преобразующий новейшие функции JavaScript, понятные не каждому браузеру, в обратно совместимую версию JavaScript в текущих и старых браузерах или средах.
JSX: JSX - это синтаксическое расширение JavaScript. В нем реализованы все возможности JavaScript. JSX создает элементы React и может встраивать любое выражение JavaScript. В конечном итоге JSX преобразуется в JavaScript с помощью компилятора / преобразователя.
Настройка React и Babel
Получите скрипты React и ReactDOM, поместите их с другими скриптами и не забудьте включать их каждый раз, когда вы используете React или ReactDOM.
Теперь для Babel создайте структуру папок, скажем C: \ react \ work, и перейдите к ней. Теперь установим транспиллер для работы с Babel. Выполните следующие команды:
npm install babel-cli npm install babel-preset-react npm install babel-plugin-transform-react-jsx
Последний загруженный плагин будет отвечать за преобразование JSX в JavaScript. Теперь мы готовы к созданию приложения.
Начало работы с Babel
Теперь, чтобы убедиться, что все зависимости работают правильно, мы разработаем небольшое приложение, использующее их. Для JSX создайте новую папку в каталоге work, скажем myjsx, и напишите файл JSX как:
C: \ react \ work \ myjsx \ myFirstJSX.jsx
class Student extends React.Component{
constructor(props){
super(props);}
render(){
return (
<div>
<h2>Student name : {this.props.name}</h2>
<h2>Student age : {this.props.age}</h2>
</div>
);}
}
class School extends React.Component{
constructor(props){
super(props);}
render(){
return <Student name="Tom" age="20"/>;
}}
Теперь для транспиляции перейдите в папку work и введите следующую команду:
node_modules\.bin\babel --plugins transform-react-jsx [folder path to the JSX file] -d [destination folder path for the js file]
Теперь для части HTML и JavaScript создайте index.html в папке приложения следующим образом:
<!doctype html>
<head>
<title>My First Application</title>
<script src='reactjs/react.production.min.js'></script>
<script src='reactjs/react-dom.production.min.js'></script>
<script src='js/myFirstJSX.js'></script>
<script>
window.addEventListener('load',function(){
let container=document.getElementById('container');
let school=React.createElement(School);
ReactDOM.render(school,container);
});
</script>
</head>
<body>
<h1>My First Application</h1>
<div id="container"></div>
<h5>Thank You !</h5>
</body>
</html>
Когда вы закончите со всем этим, содержимое, обслуживаемое index.html, будет выглядеть следующим образом:
