Splitting Up React Components Into Multiple Files

I have only been learning React in a week so I am new to it and I am trying to write a simple todo app. Originally I wrote all of the components in one file and loaded that file in

Solution 1:

You have to add your components to a global window variable in order to use them in html script tag. Like window.TodoListApp =.... var declaration is relative to a file in which you declare it.

But it is considered to be a bad practice to expose parts of you code to a global scope and to transpile JSX in the browser. Instead you should consider to use some building system like Webpack.

This way you would be able to use es2015 import syntax to import components from one file to another, bundle everything in one file and much more additional benefits like code minification, sourcemaps, livereload etc.

Setting up React for ES6 with Webpack and Babel

Using React with Webpack Tutorial