CODEWITHSUNDEEP
javascriptreactjscreate-react-app
Adee
Adee

Reputation: 377

React - files import

I have a question about importing files in React.js (create react app).

For example, I have two components firstComponent.js and secondCmponent.js

In both files I import the same file with CSS styles: import 'some.css';

  1. Does this mean that after building the application I will have code from some.css x2?

  2. If I call the components side by side (at the same time)

example:

<div>
    <FirstComponent />
    <SecondComponent />
</div>

In the browser memory, some.css will be x2?

Upvotes: 1

Views: 431

Answers (3)

Mamatha Degavath
Mamatha Degavath

Reputation: 1

When I was doing export file I use this is correct way Import named exports from the file Mamatha.js: import { name, age } from "./Mamatha.js";

Upvotes: 0

larv
larv

Reputation: 938

But why do you include the same file twice? Why cant you split your css into three files:

  • Main.css (contains standard styling)
  • FirstComponent.css (contains specific styling for FirstComponent.js)
  • SecondComponent.css (contains specific styling for SecondComponent.js)

and then in your files:

App.js

import './Main.css';
class App extends React.Component {
    render () {
        <div>
            <FirstComponent />
            <SecondComponent />
        </div>
    }
}

FirstComponent

import './FirstComponent.css';
class FirstComponent extends React.Component {}

SecondComponent

import './SecondComponent.css';
class SecondComponent extends React.Component {}

this wont give you the double file import like you experience.

Another use by ejecting

dont use this if you dont know what your'e doing..

You can with the help of webpack plugins, manage your chunks that if a thing gets imported N times, it will be moved into a commons.js file, before webpack 4 this was called commonChunksPlugin, now at webpack 4, i dont have this in my head, but i do think this is more or less included by default nowadays (need source).

Upvotes: 0

mostafa tourad
mostafa tourad

Reputation: 4388

create-react-app under the hood uses Webpack which is a module bundler that takes all your files and output them in one file so when you use a file for example .css file in many places webpack will only include that file only one in your output file > so you don't have to worry . that's also works for other assets like images , fonts , js files

learn more about webpack

webpack tutorial

Upvotes: 3

Related Questions