I'm making a portfolio with react. How can I navigate to my projects through my localhost:3000? They are in my includes folder and the projects aren't made with react. It seems not to be the same as using XAMPP as my sever.
My file structure is:
-src
-componets
-sectionB.js
-imports
-myproject1
-index.php
I'm trying to go to my project with an <a> tag with this code:
import React, { Component } from 'react';
import {BrowserRouter as Router, Route, Link} from 'react-router-dom'
class Card extends Component {
render() {
return (
<a className="proj-card" href={this.props.href}>
<h2>{this.props.projName}</h2>
<img src={this.props.img}/>
<span>Technolgies: ({this.props.tech})</span>
<p>{this.props.projdesc}</p>
</a>
)
}
}
class SectionB extends Component {
render() {
return (
<div className="sectionB">
<Card projdesc={...} img={...} tech="..." projName="..." href="./imports/calendar2/index.php"/>
</div>
)
}
}
export default SectionB;
Why is this not directing the url to my project?
I think you're supposed to be using Link from react-router-dom. That may be a place to start. And what happens when you change:
<Card projdesc={...} img={...} tech="..." projName="..." href="./imports/calendar2/index.php"/>
to
<Card projdesc={...} img={...} tech="..." projName="..." href="../imports/calendar2/index.php"/>
Related
I'm trying to learn Next-JS, and I'm making a small, experimental project to familiarize myself. However, something seems to be going wrong with the Link tag. It does redirect to the friends page specified, but for some reason, the page content remains the same as it is on home. And clicking the test link while on this page, it attempts to redirect not to "#", but to "friends#".
Is there something I'm not understanding here? Any help would be appreciated. Here is my conde:
index.tsx:
import Link from 'next/link';
import styles from '../styles/Home.module.css'
const HomePage = () => {
// const handleClick = (e: Event) => {
// e.preventDefault()
// router.push('./friends')
// alert(router)
return (
<div className={styles.div}>
<h1 className={styles.h1}>WELCOME TO HOME PAGE</h1>
<ul className={styles.ul}>
<li className={styles.li}>
<Link href='/friends'>
<a>FRIENDS</a>
</Link>
</li>
<li className={styles.li}>
<Link href="#">
<a>TEST</a>
</Link>
</li>
</ul>
</div>
)
}
export default HomePage
friends.tsx:
import Link from 'next/link'
const Friends = () => {
return (
<div>
<h1>WELCOME TO FRIENDS</h1>
<Link href="/">
RETURN TO HOME
</Link>
</div>
)
}
export default Friends;
_app.tsx:
import '../styles/globals.css'
import type { AppProps } from 'next/app'
import HomePage from '../pages/index'
function MyApp({ Component, pageProps }: AppProps) {
return <HomePage />
}
export default MyApp
Screentshots of what I'm seeing are listed below. Note the URLs.
Home page
Friends page
After clicking the Test link, for which the href is currently "#"
You're seeing the same page on all links is because you're always displaying the same component, which is <Homepage />. Instead, you need to render the component with pageProps to display the correct page according to the url.
The updated code of the _App component should be something like, where you need to display the Component available through the props.
import '../styles/globals.css'
import type { AppProps } from 'next/app'
function MyApp({ Component, pageProps }: AppProps) {
return <Component {...pageProps} />
}
export default MyApp
Please also take a look at the docs of the Next.js regarding the custom _app, to see available options/features out of the box.
From docs: The Component prop is the active page, so whenever you navigate between routes, Component will change to the new page. Therefore, any props you send to Component will be received by the page.
pageProps is an object with the initial props that were preloaded for your page by one of our data fetching methods, otherwise it's an empty object.
I'm building a React site which uses live chat and am using the react-livechat package. I've paired this up with the react-lazyload plugin to try to prevent it from adversely affect page load times.
I'm now trying to work out a way to load the livechat component in as soon as the page is interacted with. Currently it only renders when the page is scrolled to within a set distance of the component which by default is the footer of the page. This does prevent the page load being impacted but requires a user to scroll a certain distance before the component loads. Ideally it would load form any interaction with the page.
import React, { Component } from 'react';
import LiveChat from 'react-livechat';
import LazyLoad from 'react-lazyload';
class App extends Component {
render() {
return (
<div className="App">
...
<LazyLoad once>
<LiveChat license={'xxxxxx'} />
</LazyLoad>
...
</div>
);
};
}
export default App;
I managed to get this behavior with a workaround and loading the component after a certain period of time. I found that 10 seconds worked well to ensure even on mobile everything had entirely rendered.
// App.js
import React, { Component } from 'react';
import LazyLiveChat from './components/utils/lazyLiveChat';
class App extends Component {
constructor() {
super();
this.state = { loadLiveChat: false };
}
componentDidMount() {
setTimeout(() => this.setState({loadLiveChat: true}), 10000);
}
render() {
return (
<div className="App">
...
<LazyLiveChat loadChat={this.state.loadLiveChat} />
...
</div>
);
};
}
export default App;
// lazyLiveChat.js
import React, { Component } from 'react';
import LiveChat from 'react-livechat';
class LazyLiveChat extends Component {
render() {
if (this.props.loadChat) {
return (
<LiveChat license={xxxxxx} />
);
}
return null;
}
}
export default LazyLiveChat;
I am trying to create a Next.js react app. One of the requirements is that a youtube player must persist when changing pages. Only issue is that I'm not sure if it's possible with the way Next works. It seems that pages will aways re-mount regardless of the structure.
Here in my app I export Index into page.js which acts as a parent component.
<Media/> //Youtube player
page.js will always remount thus the player will reload.
page.js:
import React from 'react';
import { Provider } from 'react-redux';
import { checkLang } from '../helpers/langSupport';
import { changeLang } from '../store/actions/langAction';
import store from '../store/store';
import { Router } from '../config/router';
import Media from './youtube';
import Head from './head';
import Nav from './nav';
const childPage = (ChildPage) => {
return (
class Page extends React.Component {
componentDidMount(){
this.checkLanguage()
}
checkLanguage() {
checkLang(this.props.url, (status, result) => {
if(status){
store.dispatch(changeLang(result))
}else{
Router.pushRoute('/en'+this.props.url.asPath)
}
})
}
render() {
return (
<Provider store={store}>
<div>
<Head />
<Nav />
<ChildPage {...this.props} />
<Media/>
</div>
</Provider>
)
}
}
)
}
export default childPage;
index.js:
import React from 'react';
import { connect } from 'react-redux'
import { add, minus } from '../store/actions/countAction';
import Page from '../components/page';
export class Index extends React.Component {
render() {
return (
<div>
<div className="hero">
Count: {this.props.count.count}
<br/><br/>
<button onClick={()=>this.props.dispatch(add(1))}>Add</button>
<button onClick={()=>this.props.dispatch(minus(1))}>Minus</button>
</div>
<style jsx>{`
.hero{
margin-left: 50px;
}
`}</style>
</div>
)
}
}
export default Page(connect(state=>state)(Index));
This has now been implemented as _app.js. Check out the next.js readme to learn more.
Unfortunately this is something that does not exist in Next.js yet. Though it is actively discussed and will probably be implemented in the near future.
ReactDOM.render is called on every page change, so this is not possible today.
See discussions on:
https://github.com/zeit/next.js/issues/88
https://github.com/zeit/next.js/pull/2440
https://github.com/zeit/next.js/pull/3288
UPDATE: after restart it works now. However it stills shows the logged out component first then the logged in one. Why is this because the user is logged in I just refresh the page?
UPDATE 2:
It has gone back to the flashing of the logged out => then then what it should be and then to white again, after no changes just restarting meteor.
UPDATE 3:
So it works then I navigate to this page but not others.It seems because the registration page subscribes to the items collection so that is how it picks it up. I thought it should not refresh the Box component when changing pages and should be subscribed to the items collection from the Box component itself. This page is loaded via flow router and is inputted into the content area of the site see below:
import Items from '/imports/collections/items/items.js';
export default class Registration extends TrackerReact(React.Component){
constructor(){
super();
this.state = {
subscription: {
items: Meteor.subscribe("allStarterItems")
}
}
}
The main page is here, the issues lies within the LeftNavbar area as this contains the boxes:
import React from 'react';
import ReactDOM from 'react-dom';
import TrackerReact from 'meteor/ultimatejs:tracker-react';
import LeftNavbar from './LeftNavbar';
export const MainLayout = ({content}) => (
<div className="main-layout">
<LeftNavbar />
<div className="right content-page">
<main>
{content}
</main>
</div>
</div>
)
Here is the left navbar page:
import React from 'react';
import ReactDOM from 'react-dom';
import TrackerReact from 'meteor/ultimatejs:tracker-react';
import Box from '/imports/ui/left_navbar/Box';
export default class LeftNavbar extends TrackerReact(React.Component){
constructor(){
super();
}
render(){
return (
<div className="left side-menu">
<div className="body rows scroll-y">
<div className="sidebar-inner ">
<Box />
</div>
</div>
</div>
)
}
}
Hey everyone I have an issue in my project.
I have an area where I have a stack of images stacked on top of each other and are overlayed. I know the css etc work as I have it on another page just not loading from a db.
Here the the file that checks if the user is logged in or not to decide what component to render:
import React from 'react';
import ReactDOM from 'react-dom';
import TrackerReact from 'meteor/ultimatejs:tracker-react';
import BoxSignedIn from '/BoxSignedIn';
import BoxSignedOut from '/BoxSignedOut';
export default class Box extends TrackerReact(React.Component){
constructor(){
super();
}
render(){
var layout;
if (Meteor.user()) {
layout = <BoxSignedIn />;
} else {
layout = <BoxSignedOut />;
}
return (
layout
)
}
}
Here is the component that is loaded. However when I reload the page it shows the logged out component for a split second, then it shows nothing. On the source of the page it shows no src from the images. In the console it sometimes shows 2 of the image sources, sometimes 3
import React from 'react';
import ReactDOM from 'react-dom';
import TrackerReact from 'meteor/ultimatejs:tracker-react';
import Items from '/imports/collections/items/items.js';
export default class BoxSignedIn extends TrackerReact(React.Component){
constructor(){
super();
this.state = {
subscription: {
items: Meteor.subscribe("allStarterItems")
},
layers: {
layer1: Meteor.user().profile.layer.1,
layer2: Meteor.user().profile.layer.2,
layer3: Meteor.user().profile.layer.3
}
}
}
componentWillUnmount(){
this.state.subscription.items.stop();
}
getItemSource(itemKey){
var itemer = Items.findOne({key: itemKey});
if(!itemer){
return "";
}else{
console.log(itemer.srcEntire); // shows src correctly
return itemer.srcEntire;
}
}
render(){
return (
<div className="media" >
<div className="Area">
<div className="container-on-top box-small" >
<img id="layer1" className="on-top img-responsive center-block on-top" name="layer1" src={this.getItemSource(this.state.layers.layer1)} />
<img id="layer2" className="on-top img-responsive center-block on-top" name="layer2" src={this.getItemSource(this.state.layers.layer2)} />
<img id="layer3" className="on-top img-responsive center-block on-top" name="layer3" src={this.getItemSource(this.state.layers.layer3)} />
</div>
</div>
</div>
)
}
}
I am learning meteor framework for the first time today. I installed react react-dom and react-mounter through npm instead of atmospherejs.I am facing a problem that says Cannot find module '../../client/components/layouts/home.jsx'. I dont think there is error in path.Because my routing.jsx is inside routing directory that is inside lib directory and home.jsx is inside layouts directory which is inside components subdirectory of client directory.
lib - routing - routes.jsx
client - components - layouts - home.jsx
routes.jsx
import React from 'react';
import {mount} from 'react-mounter';
import HomeLayout from '../../client/components/layouts/home.jsx';
import Layout from '../../client/components/layouts/layout.jsx';
publicRoutes = FlowRouter.group({
name:'publicroutes'
});
privateRoutes = FlowRouter.group({
name:'privateroutes'
});
publicRoutes.route('/',{
name:'Home',
action(){
mount(
HomeLayout, {}
)
}
});
publicRoutes.route('/dashboard',{
name:'Dashboard',
action(){
mount(Layout,{
sidebar:<div>Sidebar</div>,
content:<div>Content</div>
})
}
});
home.jsx
import React, { Component } from 'react';
export default class HomeLayout extends Component{
render(){
return(
<div className="container">
<div className="row">
<div className="col-md-6">
Features
</div>
<div className="col-md-6 col-md-offset-1">
Signup
</div>
</div>
</div>
);
}
}
What might be the reason?