Пробуем ReactJS
Если честно, пока не представляю, что можно сделать с ReactJS, что нельзя сделать удобно и понятно при помощи Jquery+PHP. Но решил таки попробовать. Итак, что такое ReactJS — фактически это надстройка над JavaScript написанная на языке JavaScript. Т.е. всё что написано на ReactJS — компилируется или «на лету» при помощи babel в javascript или при выкладывании в «продакт» и далее подключается вызовом обычного JavaScript.
Чтобы не разделять «продакт» «девелоп» и не возиться с бабелом, я у себя настроил один из вариантов, а именно в косоли висит запущеный скрипт-компилятор, который мониторит изменения файлов в папке src и при изменении чего-либо, компилирует файл в папку js. Соответственно всегда имеем «продакт».
Что нужно сделать чтоб начать пользоваться ReactJS:
1) Поставить NodeJS и ReactJS на компьютере где разрабатываем (компиляция кода ReactJS в JavaScript происходит при помощи его):
|
1 2 |
apt install nodejs npm install babel-cli@6 babel-preset-react-app@3 |
2) Ставим npx — утилита которая позволяет запускать npm пакеты
|
1 |
npm install -g npx |
3) Зпаускаем в консоли что-типа:
|
1 |
npx babel --watch src --out-dir js --presets react-app/prod |
В моем случае все скрипты из папки src компилируются в папку js
В итоге html страница может выглядеть так:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html> <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script> <head> <meta charset="UTF-8"> <title id="rj_title"></title> </head> <body id="rj_body"> <div id="root"></div> <script src="js/test.js"></script> </body> </html> |
а файл src/test.js так:
|
1 2 3 4 5 6 |
const name='Павел Игоревич'; const element = <h1>Привет {name}!</h1>; ReactDOM.render( element, document.getElementById('root') ); |
В браузере выведет:
