I am having an issue with rendering my Ant-Design CSS on the first-render using React.js. I have a very basic page, that is just rendering a button.
import React from 'react';
import { Button } from 'antd';
const LoginPage = () => {
return (
<div>
<Button type="primary">Button</Button>
</div>
)
};
export default LoginPage;
I am trying to import the Ant-Design modules through the config-overrides.js file, as per the documentation:
const { override, fixBabelImports } = require('customize-cra');
module.exports = override(
fixBabelImports('import', {
libraryName: 'antd',
libraryDirectory: 'es',
style: 'css',
}),
);
Here is my index.js file:
import { Provider } from 'react-redux';
import thunkMiddleware from 'redux-thunk';
import { createStore, applyMiddleware } from 'redux';
import 'normalize.css';
import App from './components/App/App';
import reducers from './reducers';
import { fetchUser } from './actions';
import * as serviceWorker from './serviceWorker';
const store = createStore(reducers, applyMiddleware(thunkMiddleware));
store.dispatch(fetchUser()).then(() => console.log(store.getState()));
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);
serviceWorker.unregister();
And here is my App.js and App.css for more reference:
import React, { Component } from 'react';
import LoginPage from '../LoginPage/LoginPage';
import DashboardPage from '../DashboardPage/DashboardPage';
import { Spin } from 'antd';
import './App.css';
import { connect } from 'react-redux';
class App extends Component {
constructor(props){
super(props);
this.state = {
loggedIn: false
}
}
componentDidMount(){
this.setState({loggedIn: true });
}
render() {
return <LoginPage/>
}
}
const mapStateToProps = (state) => {
console.log(state);
return {
user: state.currUser
};
};
export default connect(mapStateToProps)(App);
#import '~antd/dist/antd.css';
However, on the first render it will only show a normal button, before fixing itself a second later. Here are two images that show the problem:
And here is the page after the second render:
Just import this file in your jsx file or js file:
If you import it in App.jsx file once then no need to import in other files
import "antd/dist/antd.css";
Add #import '~antd/dist/antd.css';
To the top of either/both of App.css and Index.css.
Hope that helps! đź‘Ť.
P.S - If you are using a single component for instance lets say Input, then import only that part.
import 'antd/es/input/style/index.css';
this below import is used my react project with create-react-app cli
import 'antd/dist/antd.css',
use this import to your root component.
Do NOT import the root styles from ant, as they contain some global styles, unfortunately, and will affect yours styling anyway, this was addressed a lot of times to them, but still I found the only solution is to directly import the components styling like this (replace select with your component):
import "antd/lib/select/style/index.css";
In your index.js file, you can import ant style files:
import 'antd/dist/antd.css';
As of this issue, please use the minified version.
import "antd/dist/antd.min.css";
Related
I'm following the Let’s Build: Cryptocurrency Native Mobile App With React Native + Redux tutorial.
When I create my store in App.js, the app works fine
import { createStore, applyMiddleware, compose } from 'redux';
import devTools from 'remote-redux-devtools';
import React, { Component } from 'react';
import { Platform, View } from 'react-native';
import { Provider } from 'react-redux';
import promise from 'redux-promise';
import thunk from 'redux-thunk';
import logger from 'redux-logger';
import { Header, CryptoContainer } from './src/components';
import rootReducer from './src/reducers';
const middleware = applyMiddleware(thunk, promise, logger);
const Store = createStore(rootReducer, compose(middleware, devTools({
name: Platform.OS,
hostname: 'localhost',
port: 5678
}), ));
export default class App extends Component {
render() {
return (
<Provider store={Store}>
<View>
<Header />
<CryptoContainer />
</View>
</Provider>
);
}
}
but when I move the store logic to a new file ./src/Store.js,
import { Platform } from 'react-native';
import { createStore, applyMiddleware, compose } from 'redux';
import devTools from 'remote-redux-devtools';
import promise from 'redux-promise';
import thunk from 'redux-thunk';
import logger from 'redux-logger';
import rootReducer from './reducers';
const middleware = applyMiddleware(thunk, promise, logger);
const Store = createStore(rootReducer,compose(middleware,devTools({
name: Platform.OS,
hostname: 'localhost',
port: 5678
}),
)
);
export default Store;
and use it in App.js like
import React, { Component } from 'react';
import { View } from 'react-native';
import { Provider } from 'react-redux';
import { Header, CryptoContainer } from './src/components';
import { Store } from './src/Store';
export default class App extends Component {
render() {
return (
<Provider store={Store}>
<View>
<Header />
<CryptoContainer />
</View>
</Provider>
);
}
}
I get
TypeError: undefined is not an object (evaluating 'store.getState')
What's causing my build (expo start) to fail when I import Store.js?
It seems the import statement is not right. It should be:
import Store from './src/Store';
if you're importing a single named export
e.g where you've done export const MyComponent = () => {} you'd import it like import { MyComponent } from "./MyComponent"
if you're importing a default export e.g where you've done const MyComponent = () => {} export default MyComponent you'd import it like import MyDefaultComponent from "./MyDefaultExport"
I got this error because I was exporting the wrong component from my main App file.
I was exporting this:
import React from 'react'
import { Provider } from 'react-redux'
import { createAppContainer } from 'react-navigation'
import Navigator from './src/components/Navigator'
import { store } from './src/store'
const App = createAppContainer(Navigator);
const Wrapped = props => (
<Provider store={store}>
<App />
</Provider>
)
export default Provider; // wrong!
That last line should be:
export default Wrapped; // right!
The answer from Itunu Adekoya shows that you can decide how you want to export / import, and in this case about personal preference, as there isn't a perf difference.
In the case where you have a lot of exports from a file, and perhaps some are unrelated or won't all be used together, it is better to export them individual as consts and then in other file only import what you need via import { } format, this will be sure to only include relevant imprts
in my case its casing & named import issue. imported as
import store from './Redux/Store'
it should be
import {Store} from './Redux/Store'
The closest to doing this is reduxForm().getFormState() of which it's not well documented
You'll want to use the formValueSelector that is exported from redux-form. While you can dive directly into the state tree and pull things out for yourself, using the selector exported by redux-form means that you aren't taking a dependency on any implementation details of redux-form.
You use it like:
import React from 'react';
import { formValueSelector } from 'redux-form';
class App extends React.Component {
// ...
}
const formName = 'myForm'; // Name of form you want
const myFormValueSelector = formValueSelector(formName);
const mapStateToProps = state => ({
name: myFormValueSelector(state, 'name') // selects the name field value
});
export default connect(mapStateToProps)(App);
You can find documentation for this method here
Form values will be available on the redux store. You can get it from any app components.
Mini example,
index.js,
import React from 'react';
import ReactDOM from 'react-dom';
import thunk from 'redux-thunk';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import { combineReducers } from 'redux';
import { reducer as formReducer } from 'redux-form';
import App from './src/components';
const rootReducer = combineReducers({
form: formReducer,
});
const createStoreWithMiddleware = applyMiddleware(thunk)(createStore);
const store = createStoreWithMiddleware(reducers);
ReactDOM.render(
<Provider store={store}>
<App />
<Provider>
, document.querySelector('.root'));
app.js,
import React, { Component } from 'react';
import { change, Field, reduxForm } from 'redux-form';
import { connect } from 'react-redux';
class App extends Component {
...
render() {
console.log(this.props.forms); // This fill print information about all of your app forms
return <div />;
}
}
function mapStateToProps(state) {
return {
forms: state.form;
}
}
export default reduxForm({
form: 'someForm',
})(connect(
mapStateToProps,
null
)(App));
In app.js, console.log will print form data like this,
{
someForm: {...someForm props},
someOtherForm: {...someOtherForm props},
}
Hi I'm new to Expo but I've been having a hard time trying to run my code. I'm stuck at having the error: You must specify initialRoute or initialStack to initialize this StackNavigation even though I already set it up.
Here's my main.js
import Expo from 'expo'
import React from 'react'
import { createStore } from 'redux'
import { Provider } from 'react-redux'
import {
NavigationProvider,
StackNavigation,
} from '#expo/ex-navigation'
import RootReducer from './src/reducers'
import Router from './src/navigation/Router'
const store = createStore(RootReducer)
const App = () => (
<Provider store={store}>
<NavigationProvider router={Router}>
<StackNavigation intitialRoute={Router.getRoute('splash')} />
</NavigationProvider>
</Provider>
)
Expo.registerRootComponent(App)
Here's my Router.js
import { createRouter } from '#expo/ex-navigation'
// Screens
import SplashScreen from '../screens/SplashScreen'
import LoginScreen from '../screens/LoginScreen'
const Router = createRouter(() => ({
splash: () => SplashScreen,
login: () => LoginScreen,
}))
export default Router
What seems to be the problem at my setup? I just followed the example on ExNavigation.
Here's my example on Sketch but can't make it run but will leave the link for the full code.
You have a typo in the prop's name in this part of the code
<StackNavigation intitialRoute={Router.getRoute('splash')} />
It is initialRoute instead of intitialRoute.
My target is to have one main theme for the app and load custom vendor styles if one is set.
I have been following the tutorial of react-css-themr and I can't get it to work. The minimalistic example I could come up with is this:
my module:
import {render} from 'react-dom'
import React from 'react';
import {Item} from './components/presentational/Item';
import {ThemeProvider} from 'react-css-themr';
import style from './theme/ItemDefault.scss';
const contextTheme = {
Item: require('./theme/ItemVendor.scss'),
};
const About = () => {
return (
<ThemeProvider theme={contextTheme}>
<Item theme={style} className={style.red}/>
</ThemeProvider>
)
};
ItemDefault.scss:
.button{
color:deeppink;
}
ItemVendor.scss:
.button{
color:orangered;
}
That doesn't seem to give my any classes or any styling. Any ideas please?
The way I was wiring components was incorrect. The way to do this is as follows:
In the root component you need to have your theme provider and theme attached to it. This theme will override any child component theming.
import {render} from 'react-dom'
import React from 'react';
import {ThemeProvider} from 'react-css-themr';
import inlineCss from './page.scss';
import {Item} from './components/Item';
const contextTheme = {
Item: require('./theme/ItemVendor.scss'),
};
render((
<ThemeProvider theme={contextTheme}>
<Item />
</ThemeProvider>
), document.getElementById('app'));
The component itself will have it's default theming and then will be wrapped with themr API to overwrite the it's default settings.
import {render} from 'react-dom'
import React from 'react';
import { themr } from 'react-css-themr';
import defaultTheme from './Item.scss';
const DefaultItem = ({theme}) => {
return (
<div className={theme.button} >
Example item
</div>
)
};
export const Item = themr('Item', defaultTheme)(DefaultItem);
I put together a github repo showing how to use this:
https://github.com/adamgajzlerowicz/react-css-themr
I'm working on a Universal React project, my client entry point is:
import React from 'react'
import {render} from 'react-dom'
import {Provider} from 'react-redux'
import {AppContainer} from 'react-hot-loader'
import {Router, browserHistory} from 'react-router'
import {syncHistoryWithStore} from 'react-router-redux'
import {addLocaleData} from 'react-intl'
import it from 'react-intl/locale-data/it'
import en from 'react-intl/locale-data/en'
import IntlProvider from 'shared/containers/IntlProvider'
import configureStore from 'shared/configureStore'
import routes from 'shared/routes'
import {isDev, isLive} from 'shared/config'
[en, it].forEach(addLocaleData)
const hook = document.getElementById('app')
const initialState = JSON.parse(hook.getAttribute('data-initial-state'))
const store = configureStore(initialState)
const history = syncHistoryWithStore(browserHistory, store)
let content = (
<Provider store={store}>
<IntlProvider key="intl">
<Router history={history}>
{routes}
</Router>
</IntlProvider>
</Provider>
)
if (isLive) {
content = <AppContainer>{content}</AppContainer>
}
function renderApp() {
render(content, hook)
}
if (isLive) {
module.hot.accept('./index.js')
module.hot.accept('../shared/routes', renderApp)
}
renderApp()
On component changes, the reload seems to work, but no render is applied..
maybe it happens before the hot reload trick happens?
NOTE my routes configuration is classic non dymanic routes for now.
I had the same problem because I just forgot to add code for modules replacing
if (module.hot) {
module.hot.accept(
"./App",
() => {
const NextApp = require("./App").App; // THIS LINE
render(NextApp);
},
);
}