I created a Reactjs app by create-react-app.
... but the components are not shown in the page, I think it is probably because App.js is not rendering the components?
Here is my code:
App.js
import React, { Component } from 'react';
import './App.css';
import login from "./containers/login/login";
class App extends Component {
render() {
return (
<div className="App">
<login/>
</div>
);
}
}
export default App;
/containers/login/login.js
import React, { Component } from 'react';
import "./login.css";
class login extends Component {
render() {
return (
<div className="headings">
<form action="">
Username <br/>
<input type="text" name="userrname" />
<br/>
Password <br/>
<input type="password" name="password" />
<br/>
<input type="submit" value="Login" />
</form>
</div>
);
}
}
export default login;
The component in the browser is like this:
<login></login>
Your own component need to start with a capital letter, or Babel will treat them as strings.
Rename the variable to Login and it will work.
import Login from "./containers/login/login";
class App extends Component {
render() {
return (
<div className="App">
<Login />
</div>
);
}
}
Related
import React, {Component} from 'react';
import './App.css';
import Navbar from './components/Navbar/Navbar.js';
import Merch from './components/Merch/Merch.js';
import Footer from './components/Footer/Footer.js';
class App extends Component {
render() {
return (
<div >
<Navbar />
<Merch />
<Footer />
</div>
);
}
}
export default App;
I created one component and I'm exporting it
import React , {Component} from 'react'
import logo from './logo.svg';
class Item extends Component {
render () {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">ReactND - Coding Practice</h1>
</header>
<h2>Shopping List</h2>
<form onSubmit={this.addItem}>
<input
type="text"
placeholder="Enter New Item"
value={this.state.value}
onChange={this.handleChange}
/>
<button disabled={this.inputIsEmpty()}>Add</button>
</form>
<button onClick={this.deleteLastItem} disabled={this.noItemsFound()}>
Delete Last Item
</button>
</div>
)
}
}
export default Item
And I want to use this component in my app component as below
import React from 'react';
import './Item';
class App extends React.Component {
render() {
return (
<div>
<Item />
</div>
);
}
}
export default App;
But I got this error in App.js
Line 9: 'Item' is not defined react/jsx-no-undef
pretty sure I did everything. I have exported and imported this component , so what I'm missing here?
You have to name your import.
import React from 'react';
import Item from './Item';
class App extends React.Component {
render() {
return (
<div>
<Item />
</div>
);
}
}
export default App;
I have a very simple react app.
In the main App.js I have a Routerwith my routes.
In another separate component, PostItem, which lives in MainComponent, I have a Link button to another component, JobPost.
I keep getting:
Cannot GET /job/7
Does this set up work? Or do I need to have a Router element in my component with my Link?
App.js:
import React from 'react';
import { render } from 'react-dom';
import MainComponent from './index.js';
import JobPost from './components/JobPost.js';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
const App = () => (
<Router>
<div>
<Route path="/" exact component={MainComponent} />
<Route path="/job/:id" exact component={JobPost} />
</div>
</Router>
);
render(<App />, document.getElementById('root'));
PostItem.js:
import React from 'react';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
export default function PostItem(props){
return(
<div className="post-item">
<div className="job-details">
<h2 className="job-title" dangerouslySetInnerHTML={{__html: props.title }} />
<h3 className="job-location"> Test Company - <i>Test Location</i></h3>
<div className="job-description">
<span dangerouslySetInnerHTML={{__html: props.content }} />
</div>
</div>
<button className="view-btn">
<Link to={ `/job/` + props.id } >
View
</Link>
</button>
</div>
);
}
JobPost.js:
import React, { Component } from 'react';
//make actual class and render again
export default class JobPost extends Component{
constructor(props){
super(props);
this.state={
id: this.props.match.params.id
};
}
componentDidMount(){
//fetch id from component
console.log(this.state.id);
}
render(){
return(
<div className="post-container">
<div className="job-details">
<h2 className="job-title" dangerouslySetInnerHTML={{__html: props.title }} />
<h3 className="job-location"> Test Company - <i>Test Location</i></h3>
<div className="job-description">
<span dangerouslySetInnerHTML={{__html: props.content }} />
</div>
</div>
<button className="apply-btn">Apply</button>
</div>
);
}
}
I'm using Filter Input from blueprintjs in a reactjs project, but the style doesn't load correctly, here's my code:
Assigning.jsx
import './Assigning.scss';
export default class Assigning extends Component {
render() {
return (
<div className="bp3-input-group modifier">
<span className="bp3-icon bp3-icon-filter" />
<input
type="text"
className="bp3-input modifier"
placeholder="Filter histogram..."
/>
</div>
);
}
}
Assigning.scss
#import '~#blueprintjs/core/lib/css/blueprint.css';
#import '~#blueprintjs/icons/lib/css/blueprint-icons.css';
is ~ character required at the beginning of import ?
It works with me with the following imports
import "#blueprintjs/table/lib/css/table.css";
import "#blueprintjs/icons/lib/css/blueprint-icons.css";
The full code for the component is
import React, { Component } from 'react';
class TestComponent extends Component {
render() {
return (
<div className="bp3-input-group modifier">
<span className="bp3-icon bp3-icon-filter" />
<input
type="text"
className="bp3-input modifier"
placeholder="Filter histogram..."
/>
</div>
);
}
}
export default TestComponent;
I got the following output
I have been trying to render the correct HTML page using react. However, for some reason when I click the navigation button link in my signin page, I do not get directed to the right page, it is the same html. I am using react-router-dom' but it still does not render my sign up page.
My code looks like
App.js
import React, { Component } from 'react';
import cupcake from './images/cupcake.png';
import './App.css';
import {BasicExample} from './route.js'
import { Link } from 'react-router-dom'
import {
BrowserRouter as Router,
Route
} from 'react-router-dom'
class App extends Component {
render() {
return (
<div className="App">
<div className = "loginBox">
<div className = "glass">
<img src= {cupcake} className = "user" />
<h3>Sign in Here</h3>
<form>
<div className = "inputBox">
<input type="text" name="" placeholder="Username" />
<span><i className="fa fa-user" aria-hidden="true"></i></span>
</div>
<div className = "inputBox">
<input type="password" name="" placeholder="Password" />
<span><i className="fa fa-lock" aria-hidden="true"></i></span>
</div>
<input type="submit" name="" value="Login" />
</form>
Forgot Passwordk?
<br />
<Router>
<Link to="/Signup">Signup??</Link>
</Router>
</div>
</div>
</div>
);
}
}
export default App;
Signup.js
import React, { Component } from 'react';
import cupcake from './images/cupcake.png'
import './App.css';
export class Signup extends Component {
render() {
return (
<div className="ignup">
<div className = "loginBox">
<div className = "glass">
<img src= { cupcake} className = "user" />
<h3>Signup Here!</h3>
<form>
<div className = "inputBox">
<input type="text" name="" placeholder="Username" />
<span><i className="fa fa-user" aria-hidden="true"></i></span>
</div>
<div className = "inputBox">
<input type="password" name="" placeholder="Password" />
<span><i className="fa fa-lock" aria-hidden="true"></i></span>
</div>
<input type="submit" name="" value="Login" />
</form>
Login!
</div>
</div>
</div>
);
}
}
export default Signup
route.js
import React from 'react';
import { BrowserRouter as Router, Link, Route } from 'react-router-dom';
const Signup = require('./Signup.js');
const BasicExample = () => (
<Router>
<div>
<Route path="/Signup" component={Signup}/>
</div>
</Router>
)
export default BasicExample
Thank you so much, any advice will be appreciated!
One thing is that you use BrowserRouter here and there. It should be top-level-component, meaning it should wrap your whole app and used only once.
So if your App component is the main component where everything starts then do:
class App extends Component {
render() {
return (
<Router>
<div className="App">
...
...
</div>
</Router>
);
}
}
And remove BrowserRouter from anywhere else.
Another thing I believe (could be wrong) that you cannot use import and require together. So change
const Signup = require('./Signup.js');
to
import Signup from './Signup';