I am Making a simple app using create-react-app
but the server stops and won't update with changes
Plz Help
npm version 6.14.4
node version 10.19.0
Ubuntu 20.04 LTS
WSL 2 Windows 10 Home\
My 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(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
serviceWorker.unregister();
My app.js
import React from 'react';
import Palette from './Palette';
import seedColors from './seedColors'
import './App.css';
function App() {
return (
<div className ="App">
<Palette colors ={seedColors[3]}/>
</div>
);
}
export default App;
My Palette.js
import React, { Component } from "react";
class Palette extends Component{
render(){
return(
<div><h1>Palette</h1></div>
)
}
}
export default Palette
The seedColors.js ,I have taken from https://github.com/Colt/react-colors/blob/master/colors-app/src/seedColors.js
Try adding a .env file to your root project directory (where you have package.json and node_modules). Then inside .env, add CHOKIDAR_USEPOLLING=true. This just worked for me when I was having issues with hot reloading not working. Apparently the "watcher" requires this setting when working with a VM (like WSL). I found this recommended in the top answer here: React create app hot reload is not always working on linux
Related
I'm not sure why my react website is taking so long to load. It takes 43 seconds
All I have is in index.jsx
import ReactDOM from "react-dom";
import React from "react";
import { HashRouter, Route } from "react-router-dom";
import Home from "./components/Home";
ReactDOM.render(
<HashRouter>
<div>
<Route exact path="/" component={Home} />
</div>
</HashRouter>,
document.getElementById("main")
);
Home.jsx: imports react and renders hi
webpack.config.js : https://pastebin.com/raw/zdUws0R8
package.json : https://pastebin.com/raw/VR6pSP44
index.html : https://pastebin.com/raw/9AVNBpTN
I checked your website and it seems to be working fine to me for now;
For more details, I have added a:
Website Request screenshot
You might want to have a look at your SSL certificate though.
All the best!
I think you need to reinstall your project via :
npx create-react-app YourProject
and use
BrowserRouter
instead of
HashRouter
in 'react-router-dom'
then start the development server after creating the components or editing it via
npm start
I am new to react.js . I have created a react website using create-rect-app. I have run: npm run build in git and got my static site files. Everything works on the test host, however when i moved hosts only index page works and navigating to other page gives 404 error. For routing im using react-router-dom.
How can i get my page to work on the other host?
Working host: http://000webhost.com/
Badly working host is some local provider
Edit: Basically i have pages such as /Home and /Contact.
Im using react-router-dom.
code:
import React, { Component } from 'react';
import { BrowserRouter as Router, Route} from 'react-router-dom';
import logo from './logo.svg';
import './App.css';
import Home from './pages/Home.jsx';
import Contacts from './pages/Contacts.jsx';
import Our_products from './pages/Our_products.jsx';
class App extends Component {
render() {
return (
<Router>
<div>
<Route exact path ="/" component={Home}/>
<Route exact path ="/Home" component={Home}/>
<Route exact path ="/Contacts" component={Contacts}/>
<Route exact path ="/Our-products" component={Our_products}/>
</div>
</Router>
);
}
}
export default App;
My index is linked to /Home as you can see from code. i have uploaded Build folder to public_html on both hosting platforms. On one site works normaly, on the other only /Home page shows up.
So, you can ignore this, but what helped is changing
<a href="/" />
to
<Link to="/" />
. Basically one hosting provider could render links as
<a />
other only as
<Link />
I am fairly new to Angular 2 and TypeScript. I am using AngularCLI and NPM to create my Angular Project. I have used NPM to install the quill node module into my project. I am now trying to create a component in which I can customize my quill editor through their API.
I am trying to use:
import * as Quill from 'quill';
This is returning a 'cannot find quill module' error.
I have already added
"": "0.0.26",
"quill": "^1.0.4",
to package.json as dependencies.
I tried to reproduce your issue in a pet Angular CLI project generated with the ng new command, and it worked fine. Here is the code:
import { Component } from '#angular/core';
import * as Quill from 'quill';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app works!';
ngOnInit() {
console.log(Quill);
}
}
And here's the output I get:
Image Link
Go to you project's node_modules folder and look for a folder named quill, anyway, even if it is there, delete the node_modules folder and run npm i command again
In create-react-app Bootstrap-react loading after my scripts, so my scripts have low priority.
How can I change it? I don't know, because can't change webpack config of react-create-app.
In my main component I added:
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/css/bootstrap-theme.css';
And after in my different componets I adding react-components like this:
import {
Col,
Navbar,
Nav,
NavItem
} from 'react-bootstrap'
I have a react component. <myFooter>. It is a simple footer.
import React from 'react';
import './my-footer.scss';
export default class myFooter extends React.Component {
render() {
return (
<footer className="col-xs-12">
hello !
</footer>
);
}
}
I want to render it from the server-side. On the backend, I have an express server. For that I wrote this:
import myFooter from '../components/my-footer.jsx';
app.get('/footer', function(req, res) {
var string1 = ReactDOMServer.renderToString(myFooter);
res.send(string1);
});
Now the problem is that server cannot read sass files. For client side rendering, I am using webpack. Webpack builds everything and gives a bundle file.
But i'm not sure what happens if its the server side. How can I compile using webpack. If I can, will i need to compile my app for each request on node server ?
You need 2 webpack builds:
1 to build the client
1 to build the server.
When building the server, use css-loader/locals instead of css-loader in your webpack configuration.
Read through this issue for more details: https://github.com/webpack/css-loader/issues/59