Running npm run build outputs a diffrent css compiled website than when running npm start what's the difference and why does it happen? The posts i found were about changing webpack.config but i know that create-react-app work a bit differently. May you shine some light?
My app.js :
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import {Provider} from 'react-redux';
import {store, persistor} from './Reducers/configStore'
import {PersistGate} from 'redux-persist/integration/react'
import './index.css';
import './App.css';
import "normalize.css";
import 'bootstrap/dist/css/bootstrap.min.css';
import "#blueprintjs/core/lib/css/blueprint.css";
import "#blueprintjs/icons/lib/css/blueprint-icons.css";
import 'react-notifications-component/dist/theme.css';
require('dotenv').config();
const Piazeta = () => {
return (
<Provider store={store}>
<PersistGate loading={null} persistor={persistor}>
<App />
</PersistGate>
</Provider>
)
}
ReactDOM.render(<Piazeta />, document.getElementById('root'));
The problem was that in the development build the bootstrap css was overwriting the css written by me and in the production build it was the other way around. I had a couple of things named the same which made the problems appear. Double check your css every time i guess, the order of them differs in prod and build
Related
I try using Vue 3, but I look can't using Vue.use(exampleplugin) again.
I using command vue add bootstrap-vue after generate vue create project. And on plugin bootstrap-vue warning with code:
import Vue from "vue";
import BootstrapVue from "bootstrap-vue";
import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap-vue/dist/bootstrap-vue.css";
Vue.use(BootstrapVue);
Output warning terminal:
warning in ./src/plugins/bootstrap-vue.js
"export 'default' (imported as 'Vue') was not found in 'vue'
warning in ./node_modules/bootstrap-vue/esm/utils/vue.js
"export 'default' (imported as 'Vue') was not found in 'vue'
What's wrong with that? And how do I use vue 3 to add plugin bootstrap-vue?
Bootstrap Vue is not yet ready for Vue 3.
To answer part of your question, Vue 3 changes the method for instantiating the application instance, including how plugins are registered.
For example...
import { createApp } from 'vue';
import Router from './router/Router';
createApp({/* options */}})
.use(Router)
.mount('#app');
You can read more about this at the official docs.
https://v3.vuejs.org/guide/instance.html
https://v3-migration.vuejs.org
For vue 3 you can use
bootstrap-vue-3
Install: npm i bootstrap-vue-3
Config:
import { createApp } from "vue";
import App from "./App.vue";
import BootstrapVue3 from "bootstrap-vue-3";
import "bootstrap/dist/css/bootstrap.css";
import "bootstrap-vue-3/dist/bootstrap-vue-3.css";
const app = createApp(App);
app.use(BootstrapVue3);
app.mount("#app");
I am new on redux.I want to implement redux on react. I have created todo list and it is working well with redux.As a practice I have created a new component called Calculate to increase and decrease a number under the todo list.I have two reducer for that.I combined two reducers in index.js.But as far as I understand combining is not working. I face with error like that "
TypeError: this.props.messages.map is not a function".But when without combining the reducers,and sending only messaageReducer to store, my app working well.Here is my code.
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import messageReducer from "./reducers/reducers"
import {Provider} from "react-redux"
import {combineReducers, createStore} from "redux"
import Calculate from "./calculate"
import counter from "./reducers/reducers2"
const rootReducer = combineReducers({
counter,
messageReducer,
})
const store = createStore(rootReducer)
ReactDOM.render(
<Provider store={store}>
<App />
<Calculate/>
</Provider>,
document.getElementById('root')
);
combineReducers changes the shape of your store.
What was state.X before is now state.messageReducer.X.
That's also, why messageReducer is a bad name here.
Do
const rootReducer = combineReducers({
counter,
message: messageReducer,
})
instead and it will become state.message.X.
Also, please note that if you are doing all this by hand, you are probably learning an old style of Redux and are problably following outdated documentation. While this shows very well what Redux does internally, in modern Redux you should not be doing all this by hand. Please follow the official Redux tutorials at https://redux.js.org/tutorials/essentials/part-1-overview-concepts
I have started working on reactJS. I was watching a tutorial where Css was passed separately to jsx component and I tried doing the same but failed. There is no error, But the changes in CSS is not getting implemented.
I even installed loaders after this but not getting any result
npm i css-loader style-loader --save-dev
yarn add --dev css-loader style-loader
App.js
import React, { Component } from 'react';
import{Form, FormControl, Button} from 'react-bootstrap';
import './App.css';
class App extends Component{
render(){
return(
<div ClassName = "App">
<Form inline>
<h2>Input your Birthday! </h2>
<FormControl type = "date">
</FormControl>
{' '}
<Button>
Submit
</Button>
</Form>
</div>
)
}
}
export default App;
App.css
.App{
padding: 5%;
text-align: center;
font-size: 16px;
}
index.js
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<App />, document.getElementById("root")
)
To start off, you need to import App.js in index.js ( I dont know why it is not throwing an error).
Secondly for the styles, I tried to change the class name from "App" to "app" and it works fine now. I am not sure ofthe reason tho, but it maybe something to do with "App" being reserved.
Here is code sandbox
The Problem
I have a React app that is deployed to Heroku that uses create-react-app to do all of the bundling in the background.
I am using a Node.js backend written in Typescript running node version 10.15.3
When I serve my site locally in development everything goes fine. I run npm start and the website serves correctly and looks like this:
The site also looks the same on staging & production.
But when I look at the site on my mobile device I see:
I have reached out to Heroku support and they told me that they didn't know what was going on.
It seems that all problems with this online are solved for people using Ruby & I haven't seen a single person using React run into this.
All the right files exist in the build folder.
Also, here is my index.js:
import LoadingIndicator from './components/elements/LoadingIndicator';
import { PersistGate } from 'redux-persist/integration/react';
import { persistStore, persistReducer } from 'redux-persist';
import { BrowserRouter as Router } from "react-router-dom";
import { StripeProvider } from 'react-stripe-elements';
import storage from 'redux-persist/lib/storage';
import * as Environment from './Environment';
import App from './components/App';
import ReactDOM from 'react-dom';
import React from 'react';
import './index.css';
import { Provider } from 'react-redux';
import middleware from './middleware';
import rootReducer from './reducers';
import { createStore } from 'redux';
const persistConfig = {
key: 'app',
storage
}
const persistedReducer = persistReducer(persistConfig, rootReducer);
const store = createStore(persistedReducer, middleware);
const persistor = persistStore(store);
ReactDOM.render(
<Provider store={store}>
<PersistGate loading={<LoadingIndicator />} persistor={persistor}>
<StripeProvider apiKey={Environment.get("STRIPE_PUBLIC_KEY")}>
<Router>
<App />
</Router>
</StripeProvider>
</PersistGate>
</Provider>,
document.getElementById('root')
);
And my folder structure:
Resources I Have Referenced:
Create React App Deployment
Creating A Production Build
Create React App Deployment (Heroku Section)
Checking The Heroku App's File System
CSS Is Looking Different On Heroku
Heroku Messes Up Styles
I forgot to add <link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet"> to the <head> section in my index.html file.
Not sure how it loaded locally...probably because I have the font on my laptop? Not sure but that made it work.
It was not anything to do with CSS not loading or being served.
I have a complex analytics html page, I have converted most of the elements into react components, most of my elements are organized into two sections top / bottom.
My setup is working, yet, I'm wondering if this is legal / correct way of setting things up?
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import TopSection from './components/app';
import BottomSection from './components/app_content';
import reducers from './reducers';
const createStoreWithMiddleware = applyMiddleware()(createStore);
// Top Section
ReactDOM.render(
<Provider store={createStoreWithMiddleware(reducers)}>
<TopSection />
</Provider>
, document.querySelector('.top-section'));
// Bottom Section
ReactDOM.render(
<Provider store={createStoreWithMiddleware(reducers)}>
<BottomSection />
</Provider>
, document.querySelector('.bottom-section'));
You can have multiple store if it is really needed. But it is strongly recommoneded to NOT go with multiple store setups. Single store is always best choice because,
it's reliable
it's fast
debugging is easy
Here are the links, why multiple store setup is not recommended.
redux.js.org
stackoverflow.com