# Creating React Custom Widgets When creating a new widget, it’s helpful to understand the available Squirro variables, libraries, and collections. ## Widget File Structure React custom widgets require two files: - `main.js` - `config.js` **Main.js** In this file you initialize your custom widget. _Note:_ If you’ve previously worked with Squirro Backbone.js custom widgets, you can understand this file as the React equivalent of `widget.js`. [](https://s3.amazonaws.com/download.squirro.net/docs/technical/widgets/react-main-js.png) **Config.js** In this file you define widget configuration options. ## Adding Custom JavaScript Files Your custom JavaScript files are accessible via the Resources object in the global context. For example, if you create a `newComponent.js` file that exports your new React component, you can use the following code to import the new React component: `Resources.resolved[`newComponent`]` [](https://s3.amazonaws.com/download.squirro.net/docs/technical/widgets/react-custom-example.png) ## Customizing Widgets Once your `main.js` and `config.js` files are created, you can [Customize Your Custom Widget](customize.md#react-customize).