I run command ionic generate pages/login but me return this error
Since you're using the React project type, this command won't work. The Ionic CLI doesn't know how to generate framework components for React
You'll have to make a new file in e.g src/pages/ (e.g. with the name xy.tsx) with the following contents:
import React from "react";
import {IonPage} from "#ionic/react";
const PageXY: React.FC = () => {
return (
<IonPage>
...
</IonPage>
);
};
export default PageXY;
and in your App.tsx aka Router you have to import it with import PageXY from "./pages/xy";
and hook it up to the Router like so: <Route path="/xy" component={PageXY} exact />
Hope this still helps someone
Related
Ok, guys, here's the problem... I've been writing code for my web application using another fluently working app as an example for the beginning. Here is the source code:
(./app.jsx)
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import { Router, Route, IndexRoute, browserHistory } from 'react-router';
import App from './components/app';
import Signin from './components/auth/signin';
import reducers from './reducers';
const createStoreWithMiddleware = applyMiddleware()(createStore);
ReactDOM.render(
<Provider store={createStoreWithMiddleware(reducers)}>
<Router history={browserHistory}>
<Route path='/' component={App}>
<Route path='signin' component={Signin} />
</Route>
</Router>
</Provider>,
document.getElementById('app')
);
(./components/app.js)
import React, { Component } from 'react';
import Header from './header';
export default class App extends Component {
render() {
return (
<div>
<Header />
{this.props.children}
</div>
);
}
}
(./components/auth/signing.js)
import React, { Component } from 'react';
import { reduxForm } from 'redux-form';
class Signin extends Component {
handleFormSubmit({ email, password }) {
console.log(email, password);
}
render() {
const { handleSubmit, fields: { email, password }} = this.props;
return (
<form onSubmit={handleSubmit(this.handleFormSubmit.bind(this))}>
<fieldset className="form-group">
<label>Email</label>
<input {...email} className="form-control"/ >
</fieldset>
<fieldset className="form-group">
<label>Email</label>
<input {...password} className="form-control"/ >
</fieldset>
<button action="submit" className="btn btn-primary">Sign in</button>
</form>
);
}
}
export default reduxForm({
form: 'signin',
fields: ['email', 'password']
})(Signin);
(you can see my whole repository here: https://github.com/LiJuons/react-dribbble )
The thing is that when I go to localhost:3000 - everything's Ok, but when I enter localhost:3000/signin - I get error message that says "Cannot GET /signin" THOUGH the application I'm taking code from works properly and shows form!
The problem is in routes, because if I set signin.js route's path to '/' in my project, form is shown on home directory without any problem.
Package.json files are the same in both projects (same number of packages, same versions and dependencies), only start script differs, so...
THE ONLY DIFFERENCE between the working project and mine is that in working one 'npm start' script is defined as:
"start": "node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js"
where in mine it's:
"start": "node server.js"
P.S. I checked every line to be sure that code of both projects would be as homogeneous as possible.
Any suggestions how to fix this issue?
Thank you
Your server is probably not configured to support HTML5 history.
Take a look at https://medium.com/#baphemot/understanding-react-deployment-5a717d4378fd
React-router not working when typing URL manually
This is a common surprise and is related to the fact that you are using browserHistory in your application, which requires some additional configuration of the server itself. Basically, when you type the URL by hand, by default the server will look for a file with that path, stored on its disk — if not found, it will show a 404 error. What you want to do is internally redirect the request to the index of your application.
You can see the documentation for react-router v3 about this setting (don’t worry, it’s still valid for react-router 4!). Common configuration are:
express:
const express = require('express')
const path = require('path')
const port = process.env.PORT || 8080
const app = express()
// this assumes that all your app files
// `public` directory relative to where your server.js is
app.use(express.static(__dirname + '/public'))
app.get('*', function (request, response){
response.sendFile(path.resolve(__dirname, 'public', 'index.html'))
})
app.listen(port)
console.log("Server started on port " + port);
I'm trying to figure out how to plug React Router with React VR.
First, should I use react-router dom / native? it's not clear since React VR builds on top of React Native, but runs in the browser.
This is the code I'm having issues with.
import React from 'react';
import { AppRegistry } from 'react-vr';
import {
BrowserRouter as Router,
Route
} from 'react-router-dom'
import Landing from './components/Landing';
import Video from './components/Video';
export default class WelcomeToVR extends React.Component {
render() {
return (
<Router>
<Route exact path={'/vr/'} component={Landing} />
<Route exact path={'/vr/video/'} component={Video} />
</Router>
);
}
};
AppRegistry.registerComponent('WelcomeToVR', () => WelcomeToVR);
The above code returns the following errors when opening the browser on /vr/:
I come with this solution based on Ryan Florence video mentioned by remydib using react-router 4.1.2.
In main app component:
import { MemoryRouter, Redirect, Route, Switch } from 'react-router';
...
<MemoryRouter>
...
</MemoryRouter>
In the component using VrButton:
export class NavBtn extends React.Component {
static contextTypes = {
router: React.PropTypes.object.isRequired,
};
render() {
const { to } = this.props;
const onClick = () => this.context.router.history.push(to);
return (
<VrButton onClick={onClick}>
...
</VrButton>
);
}
}
There is react-router-vr package in npm, but it looks like placeholder only. Sadly at the moment there is no support for browser URL.
Ryan Florence, the author of React Router, explains how he does it here: https://twitter.com/ryanflorence/status/808890440929771520
I don't know of a library though.
React-VR does not use the normal history APIs of other applications. Memory Router is the option listed above, but I recommend conditional rendering.
You can use the History API from Native Modules instead to load information into the URL.
So I have this json file
info.json
{
"experience":[
{
"title":"Pratt & Whitney Canada",
"date":"September 2015 - December 2015"
}
]
}
then I have my index.js
import React from 'react';
import ReactDOM from 'react-dom';
import Main from './main';
import Info from './info';
ReactDOM.render(
<Main info={Info}/>,
document.getElementById('root')
);
and then inside my main.js
import React from 'react';
import Title from './title';
const Main = () => (
<Title Info={this.props.info.experience}/>
);
Main.propTypes = {
}
export default Main;
so when it gets render I get the following error:
Uncaught TypeError: Cannot read property 'props' of undefined
basically what I want to do is a way to get the values inside my json file, pass it through my index.js so that I can then use it in different component.
Edit: title.js
import React from 'react';
import './style.css'
const Title = (props) => (
<div className="pos_left">
<p className="titles">Someone</p>
<p className="subtitles">3rd Year Software Engineer | something</p>
<p>{props.data.experience}</p>
</div>
);
export default Title;
The problem I am having with this is that is not displaying anything
or instead should I do <p> {props.where} </p>
The reason why it throws you this error is because you are trying to use functional components.
While class components know about props (and state using this) automatically, functional components do not.
If you want to use props in a functional component, you need to pass props argument like this:
const Main = (props) => (
<Title Info={props.info.experience} />
);
(More information about class and functional components on React documentation)
I am developing a React & Reflux app, which is bundled by webpack with babel-loader (v6), and I am experiencing es6 modules dependencies issues
For example, I have a component that use the reflux .connect() mixin :
import MyStore from '../stores/my-store';
const Component = React.createClass({
mixins: [Reflux.connect(MyStore)]
});
When I import all modules individually in each file like this, everything's fine.
I then tried to improve my code by using deconstructed import statements :
...in a component :
//import One from '../js/one';
//import Two from '../js/two';
//import Three from '../js/three';
import { One, Two, Three } from '../js'; // Instead
...and in js/index.js :
import One from './one';
import Two from './two';
import Three from './three';
export { One, Two, Three };
App source code files are more concise using the above technique, because I can import all components in one import line.
But when I use this, some dependencies end up beeing undefined when I use them
If I use the same updated example...
//import MyStore from '../stores/my-store';
import { MyStore } from '../stores'; // Instead
const Component = React.createClass({
mixins: [Reflux.connect(MyStore)]
});
...MyStore parameter ends up undefined in Reflux.connect method.
I tried to troubleshoot in the debugger, but I'm not really aware of what's going on with the __webpack_require__(xxx) statements in the generated bundle. There must be a circular dependency that babel-loader or webpack require could not figure out when there are the index.js files re-exporting individual modules.
Do you know any tool that can help me figure this out? I tried madge but it does not work with es6 modules, and I could not find anything that would tell me where anything is wrong
In order to get extended info about build, run:
webpack --profile --display-modules --display-reasons
It will give you bunch of information for optimisation/profiling.
import statement is used to import functions, objects or primitives that have been exported from an external module.
As per MDN doc, you can import the Modules not the directory.
import name from "module-name";
import * as name from "module-name";
import { member } from "module-name";
import { member as alias } from "module-name";
import { member1 , member2 } from "module-name";
import { member1 , member2 as alias2 , [...] } from "module-name";
import defaultMember, { member [ , [...] ] } from "module-name";
import defaultMember, * as alias from "module-name";
import defaultMember from "module-name";
import "module-name";
Reference URL:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import
http://es6-features.org/#ValueExportImport
https://github.com/lukehoban/es6features#modules
http://www.2ality.com/2014/09/es6-modules-final.html
As a workaround keep one file as base.js and include all your 3 files.
Suppose that I have the following root query in a relay with react-router-relay project:
export default {
calc: () => Relay.QL`query queryType ($number: String) { auth (number: $number) }`,
}
Initial value of $number comes from server like a hidden input and I want to use this number in my first query to server. How can I pass $number to my query using the current react-router-relay API? This is neither a queryParam or stateParam.
You should be able to do something like:
import {createHistory} from 'history';
import React from 'react';
import ReactDOM from 'react-dom';
import {Route, Router} from 'react-router-relay';
import MyComponent from './components/MyComponent';
import MyComponentQueries from './routes/MyComponentQueries';
function addAuthParam(params, route) {
return {
...params,
number: 'SECRET',
};
}
ReactDOM.render(
<Router
history={createHistory()}
createElement={ReactRouterRelay.createElement}>
<Route
component={MyComponent}
path="/thing/:id"
prepareParams={addAuthParam}
queries={MyComponentQueries}
/>
</Router>,
document.getElementById('relay-root')
);
prepareParams was added in react-router-relay in v0.6.2. The above syntax should work for that or v0.7.0 (the current release) as well.