Перемещение классов React в отдельные файлы

После выполнения React tutorial это мой файл index.html:

Кроме того, я запускаю эту команду, чтобы превратить jsx в js:

Я хотел бы переместить каждый класс React в его собственный файл. Например, я хотел бы создать следующие четыре файла (обратите внимание: каждая карта на объявление верхнего уровня "var" в моем файле main.jsx) и вытащите все эти классы в файл main.jsx:

После того, как я стукнулся головой в require и es6 некоторое время здесь, у меня все еще нет хорошей интуиции, как отделить все это отдельно, или если что-то вроде require/es6 - даже правильный способ приблизиться к этому.

Ответы

Ответ 1

Если вы хотите создать файл для каждого класса React, я бы рекомендовал взглянуть на webpack. Вы можете развить свои классы React как модули CommonJs, и он позаботится об их объединении.

Кроме того, я думаю, что это хороший вариант, потому что вы хотите использовать babel для преобразования ваших jsx файлов. Это решается с помощью загрузчиков веб-пакетов.

Основной файл конфигурации webpack будет содержать примерно следующее:

webpack.config.js

var webpack = require('webpack');

module.exports = {
  entry: './src/main.jsx',
  output: {
    // Output the bundled file.
    path: './lib',
    // Use the name specified in the entry key as name for the bundle file.
    filename: 'main.js'
  },
  module: {
    loaders: [
      {
        // Test for js or jsx files.
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel'
      }
    ]
  },
  externals: {
    // Don't bundle the 'react' npm package with the component.
    'react': 'React' 
  },
  resolve: {
    // Include empty string '' to resolve files by their explicit extension
    // (e.g. require('./somefile.ext')).
    // Include '.js', '.jsx' to resolve files by these implicit extensions
    // (e.g. require('underscore')).
    extensions: ['', '.js', '.jsx']
  }
};

Я создал репозиторий GitHub react-tutorial-webpack, если вы хотите иметь реальный код.

Ответ 2

В проекте, созданном с помощью create-react-app инструмент, разделяющий компоненты, кажется, работает так. Определите компонент в файле Hello.jsx:

import React from 'react';

var Hello = React.createClass({
  render: function() {
    return (
      <p>Hello world!</p>
    );
  }
});

// Must export!
export default Hello;

И затем вы можете импортировать компонент в другой файл с помощью

import Hello from './Hello.jsx'

Ответ 3

На мой взгляд, ES6 может быть способом написания классов и модулей, но на самом деле не управлять ими. Для управления модулями я бы использовал requirejs, самый простой менеджер модулей, который я знаю. Но, возможно, другие люди посоветуют что-то еще.

IMO вам нужен менеджер модулей, и requirejs - отличный инструмент для этого.

Обновление: В основном для requirejs вы напишете файл main.js(который представляет собой конфиг файл для запроса, определяющий пути модулей и загружаемых первых тинов) В главном html вы напишете что-то вроде этого, чтобы загрузить main.js

<script data-main="scripts/main" src="scripts/require.js"></script>

Внутри ваших просмотров вы вызовете необходимый модуль, используя define ('MyModule'...), используя имя, которое вы ранее определили в main.js(с помощью пути).

Прочитайте документ, не беспокойтесь, это не так страшно: http://requirejs.org/docs/start.html#add Вот простой пример: https://github.com/volojs/create-template

Как разбить код довольно легко, вы вернетесь (это, как вы экспортируете модуль с define()) в ваш реактивный класс. Создайте один файл для каждого класса, который у вас есть. Но вы также можете создать модуль /utils для сбора поперечных функций (синтаксический анализ... и т.д.).

Надеюсь, что это поможет!