I am writing a React app with create-react-app which uses Webpack and the extract-text-plugin to generate bundled js and css files. Now I would like to know the filename of the generated CSS file in my JS file, like so:
import React, { Component } from 'react';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
{fileNameOfMyGeneratedCssFileHere}
</div>
);
}
}
export default App;
Is that even possible, maybe with a custom loader or Webpack plugin?
edit To clarify: create-react-app is not the problem here, I can eject it or create a custom configuration. My problem is how to know the CSS file name(s) from inside a JS script.
Related
so after installing react native using npx react-native init MyProject the project is running and open in emulator but the app file is not app.js instead app.tsx,
file strcuture
The question is i am new to react native and many tutorial i see is havgin App.js file, and the code in app.js is different between js and tsx at least that's what i see, or is it just the same if i follow tutorial like folder structure, syntax and everything.
That's because of this
New projects created by the React Native CLI or popular templates like Ignite will use TypeScript by default.
Read Using JavaScript Instead of TypeScript
You can just rename your tsx to jsx
Well, I had the same concerrns earlier today while working on the current version 0.71. This version does not create a App.js file. What I did was- I created a file App.jsx and added this code:
import { StyleSheet, Text, View } from 'react-native'
import React from 'react'
const hello = () => {
return (
<View>
<Text>App</Text>
</View>
)
}
export default hello
const styles = StyleSheet.create({})
it automatically renders the code in it instead of the default App.tsx file
You can write your JavaScript code in the Ap.jsx file
Building a package with UI components using CSS modules. Each component is totally separated from others and includes CSS styles like this:
import css from './styles.css'
const Component = () => {
return (
<div className={css.container}>Hello there!</div>
)
}
export { SearchBar }
In another package based on Next.js I want import a component like this:
import { Component } from '#me/components'
But Next.js doesn't allow Module CSS import from node_modules.
My question is how can I build the component package with CSS transformed into JS. It shouldn't be merged into one file just like Webpack do. Instead it should build each component separately. Also I don't want to import a huge CSS files with all styles merged into single file. Easiest way would be to use CSS-in-JS, but I want to use PostCSS written in CSS files.
I want to display the Root component inside my html file. I'm aware on how to do it with es5 using ReactDOM.render(<Root/>, document.getElementById('app')) but what about for es6?
Here's my html file:
<div id="app"></div>
Here's my js file:
import React, { Component } from 'react';
class Root extends Component {
render() {
return(
<div>
<h1>Testing</h1>
</div>
);
}
}
ReactDOM.render(<Root/>, document.getElementById('app'));
My attempt above the es5 way because I wasn't quite sure how to make this happen in es6, this obviously isn't working.
Note: I'm not using create-react-app for my project. I'm just trying things out outside of create-react-app environment and instead, onto other environments. I installed Babel and all the other stuff manually.
What can I do to make it work?
It looks like you're missing an import statement for the React DOM, because you will need it to render components to the DOM from React, unless you're importing those components from separate files.
import ReactDOM from "react-dom"
Add that after your first import statement.
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';
Does this mean that after building the application I will have code from some.css x2?
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?
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
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).
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";
i'm looking for a way to integrate grommet framework to a react app created with the cli.
I want to use react grommet components inside my app but there are some problems with the preprocessor SCSS. Today, I tried to integrate them in a lot of ways, I followed a lot of tutorials but It still doesn't working. Do you know or do you have success to use them together ? Thankss
For Grommet 1.x
If you don't want to add scss to your project, grommet-css is a great alternative. You can install it and import the css into your App.js.
Note that to customize the default theme you have to fork the repo, make changes like including a different default grommet style in index.scss or tweaking grommet scss variables. Then you have to update the name in package.json, run npm build, then run npm publish.
Here is an example using grommet and grommet-css
import React, { Component } from 'react'
import '../../node_modules/grommet-css';
import Heading from 'grommet/components/Heading';
import Box from 'grommet/components/Box';
export default class GrommetExample extends Component {
render() {
return (
<Box>
<Heading>Hello, I'm a Grommet Component styled with <a href='https://www.npmjs.com/package/grommet-css'>grommet-css</a></Heading>
</Box>
)
}
}