Search code examples
javascriptreactjswebpackmaterialize

How to import an external library into a ReactJS Application (Locally)


I've a ReactJS application, and I'm using MaterializeCSS through react-materialize. I've installed react-materialized and added the references to MaterializeCSS files in my index.html file, as ordered:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
(...)
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

It's working fine, but I will spend 10 days in a place with no internet, and I'd like to develop my project there, so the CDN hosted file won't work. So I'm trying to host materialize files in my own project.

I've managed to do that with css files, copied it to a folder in my project structure and imported in App.js:

import './resources/materialize/css/materialize.css';

But when I tried to do the same with .js file, I get tons of errors, since it's trying to transpile materialize.js files.

Where should I put this file and how can I reference it from my project?


Solution

  • You can install it via npm using windows command prompt, simply Start > Run > cmd, locate your project folder via cd <foldername> and type this:

    npm install --save materialize-css@next
    

    and at your Index.js: - which is in the root folder of your application

    import 'materialize-css';
    import 'materialize-css/dist/css/materialize.min.css';
    

    I also strongly recommend material UI which is very convenient with react applications: https://material-ui.com/