Hello! Tell me, how can I break the react components into files and organize their loading?

  • Split - with your hands, and instead of loading it is worth assembling an application using a webpack or browserify. - Dmitriy Simushev

1 answer 1

If you use the ES6 syntax, then the file that contains the component ( hello-world.jsx ) can be written like this:

 import React from 'react'; export default React.createClass({ render() { return <div>Hello, World!</div>; } });

And in the main file ( app.jsx ), where you will use this component, like this:

 import React from 'react'; import ReactDOM from 'react-dom'; import HelloWorld from './hello-world.jsx'; ReactDOM.render(<HelloWorld />, document.getElementById('hello'));

You can browserify -t babelify app.jsx -o build/bundle.js it with the command: browserify -t babelify app.jsx -o build/bundle.js