I learn react and came across this code:
import React, { Component } from "react";
import Header from "./components/structure/Header";
import Content from "./components/structure/Content";
import Footer from "./components/structure/Footer";
import Resume from "./resume.json";
class App extends Component {
componentDidMount() {
document.title = [
Resume.basics.name,
Resume.basics.label,
[Resume.basics.location.region, Resume.basics.location.country].join(", ")
].join(" | ");
}
render() {
return (
<div>
<Header />
<Content />
<Footer />
</div>
);
}
}
export default App;
What I cant figure out is how is document.title used? I cant see that it is exported or that
any part of the code(other components) are using it.
Maybe it's not used and could be removed??
The variable "document" is an environment variable provided by the browser,
It gives you access to various features to access the page elements, on of those features is to access the "title" of the page and read or edit it, which you can see at the top of the browser.
Related
I am using React and Firebase and receive the following when logged in
photoURL: https://graph.facebook.com/10157648190117379/picture
If I try to display this in JSX using:
<image src={this.props.user.photoURL} />
nothing renders.
I notice navigating directly to the link doesn't actually show an image, but prompts a download. Any ideas?
Thanks.
Yes, it won't work. Because there is a typo and there is no tag named Image in HTML.
To display an image, you have to use an img tag.
import React from 'react';
import './App.css';
class App extends React.Component {
state = { url: 'https://graph.facebook.com/10157648190117379/picture'}
render() {
return <img alt='Profile' src={this.state.url} />;
}
}
export default App;
No Problem in the URL. Just make sure to use the correct tag.
I try this and it work
import React from "react";
const TestCompOne = (props) => {
console.log("[TEST COMP 1]");
return (
<div>
<img src={"https://graph.facebook.com/10157648190117379/picture"} />
</div>
);
};
export default TestCompOne;
I am learning to develop a multi-page app with React Router. I have been following a tutorial and have managed to set up multiple page without any content. However, I want to add the original main content of the home page that was originally running properly before I used react-router. If I delete the code that is in the div called App, I have added in Home.js, then I can go back to switching between blank pages with no errors:
import React from 'react';
//import "./App.css";
import List from "./List";
import Title from "./Title";
import Ending from "./Ending";
import MoviePage from "./MoviePage";
const home = () => {
return (
<div className="App">
<Title pics={this.state.pics} changePageNumber={this.changePageNumber}/>
<List parentCallback={this.loadMoviePage} movieList={this.state.movieList}/>
<Ending toad={this.state.toad} speedUp={this.state.speedUp}/>
</div>
);
}
export default home;
So I know that I am not able to access the content from this.state.pics.(Nor the other 3 components). I created this content(and by content I mean the arrays that have the general information, i.e image location, etc). in App.Js so I am wondering how can I pass it in to this new Home.js file?
You can not access state in stateless component , if you need some data from another component you need to pass it as props from parent to children , just to show you i just make an example of your code follow it, you will get it
App.js
import React from 'react';
import Home from "./Home";
class App extends Component {
constructor() {
super();
this.state = {
pics: YourArrayDataHere,
};
}
render () {
return (
<Home pics={this.state.pics} />
);
}
export default App;
Home.js
import React from 'react';
//import "./App.css";
import List from "./List";
import Title from "./Title";
import Ending from "./Ending";
import MoviePage from "./MoviePage";
const home = (props) => { //access throught props
return (
<div className="App">
<Title pics={props.pics} />
</div>
);
}
export default home;
I would like to know, is it possible to run script only for 1 component?
In my code I have imported 5 components
import React from 'react';
import Intro from './includes/Intro';
import Counter from './includes/Counter';
import Feedback from './includes/Feedback';
import FeedbackAll from './includes/FeedbackAll';
import Faq from './includes/Faq';
class Home extends React.Component {
render() {
return(
<main>
<Intro />
<Counter />
<Feedback />
<FeedbackAll />
<Faq />
</main>
)
}
}
export default Home
So I have some script which I want to run only for the component <Counter />
When I write that script inside of that component, it runs in every single component of my project.
This is the file Counter.js
import React from 'react';
const Counter = () => {
return (
<section id="benefits">
</section>
);
};
window.addEventListener('scroll', function() {
let hT = document.querySelector("#benefits").offsetTop;
alert (hT)
});
export default Counter
When I navigate another page, on scroll the script still works and looking for the element #benefits, and shows error.
So I need to run that script only inside of the component Counter.js
Please help me to do that!
You should refactor counter.js as class component. Trick is to move event listeners inside class definition and remove event listeners when un-mounting the class.
Now only in the pages you user <Counter />, scroll listeners are attached and it gets removed when <Counter /> component is un-mounted.
Solution here 👇
I am getting the "Empty object" in React console when rendering the Container component into the App component.
1,user-list.js: This is my container component.
import React , {Component} from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
class userList extends Component {
render() {
return (
<div>
<h1>sample</h1>
</div>
);
}
}
export default userList;
2,App.js: This is my App file this is where I am trying to display the "userList " but "sample" is not displayed in the browser.
import React from 'react';
import userList from '../containers/user-list';
require('../../scss/style.scss');
const App = () => {
return (
<div>
<h2>User List</h2>
<userList />
<hr />
<h2>User Details</h2>
</div>
);
}
export default App;
Please correct me if I am missing something?
I solve your problem with only one single small step: Changing the userList into UserList.
import React from 'react';
import UserList from '../containers/user-list';
const App = () => {
return (
<div>
<h2>User List</h2>
<UserList />
<hr />
<h2>User Details</h2>
</div>
);
};
export default App;
The reason is "React treats components starting with lowercase letters as DOM tags". From the Official React Document:
React treats components starting with lowercase letters as DOM tags. For example, represents an HTML div tag, but represents a component and requires Welcome to be in scope.
The reason behind this convention:
User-Defined Components Must Be Capitalized
When an element type starts with a lowercase letter, it refers to a built-in component like or and results in a string 'div' or 'span' passed to React.createElement. Types that start with a capital letter like compile to React.createElement(Foo) and correspond to a component defined or imported in your JavaScript file.
We recommend naming components with a capital letter. If you do have a
component that starts with a lowercase letter, assign it to a
capitalized variable before using it in JSX.
Try changing userList to UserList, with capital U.
In JSX, lower-case tag names are considered to be HTML tags. However, lower-case tag names with a dot (property accessor) aren't.
So the problem is your userList begins with small u. You should change it while exporting as well as wherever you are using it. Look at the below code to see where it needs to be corrected.
class UserList extends Component
export default UserList;
import UserList from '../containers/user-list';
<UserList />
How does Youtube, Instagram, Github change the content only after they receive data?
<Switch>
...Other Route
<Route path = "/" exact component={HomeComp} />
<Route path = "/articles" component={ArticleComp} />
</Switch>
In my knowledge when I click a Nav Link to replace url from / to /articles the component replace from HomeComp to ArticleComp as well. But what I saw from other SPA application(those I mention above) even though the url is replace but the components aren't replace instead there is an progress bar, components are replace only until receiving response from fetch request. If you can't understand my word I try to include a picture for better understanding
If I want to do something like that where should I perform fetch request? From the doc It say it should perform in componentsDidMount(). But it seem not right since the component wasn't initial until the data is loaded.
Very simple question how can achieve the goal? Replace components only after receiving fetch response rather than replace url > replace components > start fetch request. The solution I seek for is like how github,youtube do(photo below).
Can I still stick with react-router if I want to achieve this?
Sorry for keep repeating the same question, I was worry what I ask is not clear. English is not my primary language so it is really hard for me research, I don't know include what keyword to find the correct solution. If this question is asked before kindly include the link for me. Thank you!
So, the assumption here is that you want certain parts of your UI common across different pages. i.e... HomeComp and ArticleComp.
Imagine that you have a Layout component (container):
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Header from './Header';
import Footer from './Footer';
class Layout extends Component {
static propTypes = {
actions: PropTypes.object.isRequired,
children: PropTypes.node,
};
render() {
return (
<div className={_className}>
<Header />
<div className={_rhsContentClassName}>
{ this.props.children }
</div>
<Footer />
</div>
);
}
}
export default Layout;
Now, in your routes file, you describe the routes as,
<Switch>
...Other Route
<Route path = "/" exact component={HomeComp} />
<Route path = "/articles" component={ArticleComp} />
</Switch>
and for each of the Route Component, HomeComp or ArticleComp, your react component should look something like this:
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Layout from './Layout';
import Preloader from './Preloader';
class ArticleComp extends Component {
static propTypes = {
actions: PropTypes.object.isRequired,
};
componentWillMount() {
this.setState({ isLoading: true };
actions
.fetchData()
.then(() => {
// do something
// store data for the content
this.setState({ isLoading: false };
});
}
render() {
if (isLoading)
return <Preloader />;
return (
<Layout>
<div> {/* content based on the fetch request */}</div>
</Layout>
);
}
}
export default ArticleComp;
This way, you get to segregate your Header, Footer or other static ( or even dynamic concerns ) with the real request-based content.