You completed the following configuration:
npm run eject run this command inside project root directory.
search cssRegex and add the following lines under use: getStyleLoaders({
modules:true,
localIdentName:'[name]__[local]__[hash:base64:5]
Now I just test the following code:
import React from 'react';
import logo from './logo.svg';
import classes from './App.css';
function App() {
return (
<div className={classes.App}>
<p>hello</p>
</div>
);
}
export default App;
As far i did, <div className={classes.App}> this should be converted as like this: <div class="APP_local_ANYTHING">. But no class is being generated. Whats wrong is going on?
if that's all the code you've got, app is not bootstrapped. In order to do so, you would have to add the folowing piece of code:
import * as ReactDOM from 'react-dom';
import App from 'app'; // file with you App component
ReactDOM.render(<App />, document.getElementById('root')) // or any other selector in HTML you want to have your app attached to.
Simple Codepen example
Related
I created my app according to the instructions here:
https://reactjs.org/tutorial/tutorial.html#setup-for-the-tutorial
https://github.com/facebook/create-react-app
This is the code in my index.js file:
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import Logo from './assets/blacklogo.png'
const Header = () => {
return (
<div className="header">
<div className='headerLogo'>
<img src={Logo} alt='Cool Image'></img>
<h1>'Hello world'</h1>
</div>
</div>
);
}
export default Header;
I have attempted reloading the page and ddouble checking to see if I have loops anywhere
I have discovered the issue, I was writing in index.js as opposed to App.js
I'm starting a small react project (beginner) and when I cut my 'App' component into many small components, such as 'header', it doesn't work. The error started to happen as soon as I cut my header. And to say that the header css doesn't load either. You can see in the element inspector that the React component is present, but it doesn't want to load the css associated with it.
// In App.js
import React from 'react';
import header_type from './header';
class App extends React.Component {
render() {
return (
<div className="window">
<div className="window-body">
<header_type/>
<div className='window_inner'>
<div className="column_left">
</div>
<div className="column_right">
</div>
</div>
</div>
</div>
)
}
}
export default App;
// In header.js
class header_type extends React.Component {
render() {
return (
<div className="window-header" >
</div>
)
}
}
export default header_type;
// In index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from '../src/components/App';
import '../src/style/window.css';
ReactDOM.render(
<App />, document.getElementById('root')
);
// error :
Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.
WARNING in src\components\App.js
Line 2:10: 'header_type' is defined but never used no-unused-vars
webpack compiled with 1 warning
Thank you in advance for the answers. Have a nice day.
one issue that is present in the above is code is you are exporting a default component from header.js, and importing it as named export in App.js.
In your App.js while importing header component import it as
import header_type from './header';
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export
I'm following along to a youtube tutorial to learn the MERN stack. Currently i'm trying to import boostrap css in my App.js file. But i keep getting this error.
Error
Here is my App.js file
import React, { Component } from 'react';
import AppNavbar from './components/AppNavbar';
import './App.css';
import 'boostrap/dist/css/bootstrap.min.css';
class App extends Component {
render() {
return (
<div className="App">
<AppNavbar />
</div>
);
}
}
export default App;
I ran npm install --save boostrap before attempting to include it, ive also restarted the server. All to no avail. Is there a new way to include css from the node_modules folder?
If you are trying to import bootstrap into your react project. You can import the css file into your App.js like this.
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
The import statement is not finding the file(s) do to the path passed in.
You have a typo, use this
import 'bootstrap/dist/css/bootstrap.min.css'
I am trying to pass a property through react components and display the text property of that element I get know JSX sytax errors but I get Parsing error: Unterminated JSX contents.When attempting to display the text from the property but instead it's blank as if its not reading the property
Components.js
import React from "react"
function Components(props) {
return (<div>
<h1 style={style}>COMPONENT.js</h1>
<div>{props.text}</div>
</div>)
}
export default Components
App.js
import React from 'react';
import Component from "./component"
function App() {
return (
<div>
The Big World
<Component text="PROPERTY TEXT"/>
</div>
);
}
export default App;
Index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
Expecting to see the property text to be pass through the Component property and displayed on the page
All looks clear. Try to add semicolon an the end of return statement:
function Components(props) {
return (
<div>
<h1 style={style}>COMPONENT.js</h1>
<div>{props.text}</div>
</div>
);
}
Ran all this in a codesandbox and other than style not being defined it all renders and runs fine. I also don't think it is an error with a typo in your posted code (the file is actually components.js and not component.js), because that shouldn't transpile at all since it can't find that file.
I carefully searched the same problem that I faced but didn't find anything helpful.
webpack 1.13.1. Mac OS X El Capitan last version.
What I am trying to accomplish
I want to create a webpack build to develop multiple page apps.
I want to see the structure like this:
source
/source/page1/page1.css
/source/page1/page1.js
/source/page1/page1.html
public
/public/page1/page1.css
/public/page1/page1.js
/public/page1/page1.html
Current build
This is what I've done.
https://gist.github.com/lavezzi1/9cc0e58cd7d2b8f2470e703022a41db7
I tested it with vue.js and it works perfect. But now I want to get it works with react.js as well.
In dev move everything works just fine but when I ran task for prod build I got this error:
ERROR in ./source/pages/index.js
Module not found: Error: a dependency to an entry point is not allowed
What I did. This is my page folder:
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';
ReactDOM.render(
<App />,
document.getElementById('root')
);
App.js
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<div className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h2>Welcome to React</h2>
</div>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
</div>
);
}
}
export default App;
So what am I doing wrong? I am newbie in react.js, maybe I don't understand something.
In vue.js I just create files:
index.html
index.css
index.vue
index.js
And everything works as expected.
I really really hope you guys help me.
why don't you just indicate the js file as entry point and import the css in that entry file. For multiple js entry file you can use the code splitting feature of webpack.
https://webpack.github.io/docs/code-splitting.html
and in your webpack.config.js file you can define entry file like the following.
entry: {
lite: "./lite.js", pro: "./pro.js",
},
output: { filename: "dist/[name].js" },