In general, I decided to install the last React (15.4.1) according to the instructions from the office. site. I must say that such things as Babel, Browserify, etc. for me, a dark forest, I have never worked with it. React, Angular, Ember, etc. for me also not familiar. With the help of Grunt (I know superficially) I put React, React Dom, etc., in general, everything seems to be necessary. Here is package.json and Gruntfile.js
{ "name": "react-test", "version": "0.1.0", "devDependencies": { "babel-plugin-transform-es2015-modules-commonjs": "^6.18.0", "babel-plugin-transform-react-jsx": "^6.8.0", "babel-preset-es2015": "^6.18.0", "babel-preset-react": "^6.16.0", "babelify": "^7.3.0", "grunt": "~0.4.5", "grunt-babel": "^6.0.0", "grunt-browserify": "^5.0.0", "grunt-contrib-watch": "^1.0.0", "load-grunt-tasks": "^3.5.2" }, "dependencies": { "react": "^15.4.1", "react-dom": "^15.4.1" } } module.exports = function(grunt) { // 1. Вся настройка находится здесь grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), path: 'app', babel: { options: { sourceMap: true, presets: ['babel-preset-es2015', 'babel-preset-react'] }, dist: { files: { '<%= path %>/dist/users.js': '<%= path %>/js/users.js', '<%= path %>/dist/user.js': '<%= path %>/js/user.js' } } }, browserify: { dist: { files: { '<%= path %>/dist/users.js': '<%= path %>/dist/users.js', '<%= path %>/dist/user.js': '<%= path %>/dist/user.js' } } }, watch: { babel: { files: ['<%= path %>/js/users.js', '<%= path %>/js/user.js'], tasks: ['babel', 'browserify'] } } }); // 3. Тут мы указываем Grunt, что хотим использовать этот плагин // grunt.loadNpmTasks('grunt-contrib-watch'); require('load-grunt-tasks')(grunt); // 4. Указываем, какие задачи выполняются, когда мы вводим «grunt» в терминале grunt.registerTask('default', ['watch']); }; Next index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>React</title> </head> <body> <div></div> <script src="dist/user.js"></script> </body> </html> For the test created users.js
var users = [{ name: 'Serg' }]; export {users}; and user.js
import users from './users'; console.log(users); [1, 2, 3].map(n => n + 1); And I’m not displaying an array in the console, which is exported to users.js, but an empty object (map simply for the Babel test). I read a lot of articles, but did not figure it out. Most likely the problem is with Browserify. Here is a compiled users.js
(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){ 'use strict'; Object.defineProperty(exports, "__esModule", { value: true }); var users = [{ name: 'Serg' }]; exports.users = users; },{}]},{},[1]); But user.js
(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){ 'use strict'; var _users = require('./users'); var _users2 = _interopRequireDefault(_users); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } console.log(_users2.default); [1, 2, 3].map(function (n) { return n + 1; }); },{"./users":2}],2:[function(require,module,exports){ (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){ 'use strict'; Object.defineProperty(exports, "__esModule", { value: true }); var users = [{ name: 'Serg' }]; exports.users = users; },{}]},{},[1]); },{}]},{},[1]); Structure
