I am newish to react and looking for ways to improve/simplify this component - any suggestions welcome. The below code works to render my error page. The strings live in a strings.json file.
ErrorPage.jsx
import React from 'react';
import {FormattedMessage} from 'react-intl';
import {FormattedHTMLMessage} from "react-intl";
import './ErrorPage.pcss';
function ErrorPage() {
return (
<div className="error-page">
<h1>
<FormattedMessage id="EEL_HEADER_FAIL"/>
</h1>
<p>
<FormattedHTMLMessage id="EEL_ERROR1_MESSAGE"/>
</p>
</div>
);
}
export default ErrorPage;
strings.json
{
"EEL_HEADER_FAIL": {
"default_message": "Whoopsie, that didn't work"
},
"EEL_ERROR1_MESSAGE": {
"default_message": "Try refreshing your page or visit our <a href='https://example.com'>help center</a>."
}
}
Related
I am just started working with react js for couple of days it throws error like
src\App.js
Line 2:8: 'navbar' is defined but never used no-unused-vars.this error occurs while i am importing the navbar component into my app.js, i did install eslint package and update my npm version also,i really dontknow what to do .i would really appreciate if u guys provide solution
Below code is my app.js:
import React from 'react';
import navbar from"./components/navbar";
import './App.css';
function App() {
return (
<div className="App">
<navbar />
</div>
);
}
export default App;
below is my navbar.js code which i am trying to import in the app.js
import React, { Component } from 'react';
import{MenuItems} from "./MenuItems";
import "./navbar.css";
class navbar extends Component{
render(){
return(
<nav className="navbarItems">
<h1 className="navbar-logo">React<i className="fab fa-react"></i>
</h1>
<div className="menu-icon"></div>
<ul>
{MenuItems.map((items,index)=>{
return(
<li key={index}>
<a className={MenuItems.cname}href={items.url}>
{items.title}
</a></li>
)
})}
</ul>
</nav>
)
}
}
export default navbar;
I'm trying to add Laravel existing conditional statement on ReactJs component
I've tried to add it on render function.
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
export class Login extends Component {
render() {
return (
<div class="login">
#if (Route::has('login'))
<div class="top-right links">
#auth
Home
#else
Login
/*-- Register
#if (Route::has('register'))
#endif */
#endauth
</div>
#endif
</div>
);
}
}
if (document.getElementById('login')) {
ReactDOM.render(<Login />, document.getElementById('login'));
}
<div id="login"> </div>
require('./components/Welcome');
I'm trying to display the existing laravel script from react components.
Thanks in advance for the help.
#if use by blade template which output is <?php if(condition) ?>
you can try this
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
export class Login extends Component {
render() {
return (
<div class="login">
<div class="top-right links">
if (isLoggedIn) {
Home
} else {
Login
}
</div>
</div>
);
}
}
if (document.getElementById('login')) {
ReactDOM.render(<Login />, document.getElementById('login'));
}
isLoggedIn is coming from state of react where should true when user is logged in
I am using React Router on my website to link to other pages. On Google Chrome, when I click on a link to another page within the website (through React Router), it works just fine. However, on Firefox, I have to click twice (after my first click, the current page refreshes, but after the second click, the new page loads). On Safari, it just keeps refreshing the current page.
How do I get React Router to work on the first click on Firefox and Safari?
You can try it out yourself on Safari link http://riceappsv2.surge.sh/. Scroll halfway down to where you see 5 circles with AirBNB logos, and try clicking on the link that says "BeakSpeak". It should link to this page http://riceappsv2.surge.sh/beakspeak.
Here is our App.JS. The 5 AirBNB logos are in the page called Projects. (The import statements are just for the pages that I load.)
import React, { Component } from 'react';
import { ParallaxProvider } from 'react-scroll-parallax';
import LandingPage from './Pages/LandingPage.js';
import Testimonials from './Pages/Testimonials.js'
import WorkForUs from './Pages/WorkForUs.js';
import JoinUs from './Pages/JoinUs.js';
import Projects from './Pages/Projects.js';
import AboutUs from './Pages/AboutUs.js';
import WhatWeDo from './Pages/WhatWeDo.js';
import Partners from './Pages/Partners.js';
import './App.css';
import './hamburgers.css';
import './styles.css'
import ScrollIntoView from 'react-scroll-into-view';
class App extends Component {
constructor(props) {
super(props);
this.state = {
clicked: false,
};
}
render() {
return (
<ParallaxProvider>
<div>
<div>
<div id="home"><LandingPage /></div>
<div id="whatWeDo"><WhatWeDo /></div>
<div id="aboutUs"><AboutUs /></div>
<div id="projects"><Projects /></div>
<div id="partners"><Partners /></div>
<div id="testimonials"><Testimonials /></div>
<div id="contactUs"><JoinUs /></div>
<div id="joinUs"><WorkForUs /></div>
</div>
</div>
</ParallaxProvider>
);
}
}
export default App;
Here is the Projects page in which I use React Router to link to the page BeakSpeak.
import React, { Component } from 'react';
import Fade from 'react-reveal/Fade';
import './Projects.css';
import {BrowserRouter as Router, Link} from "react-router-dom";
export default class LandingPage extends Component {
render() {
return(
<div className = "projectsPageWrapper">
<Fade left duration = {1500}>
<div id = "beakspeak">
<div id = "BsTitle">
<Router>
<div>
<Link to = "/beakspeak" onClick = {() => window.location.reload()} class = "link">
<h1>Beakspeak</h1>
</Link>
</div>
</Router>
</div>
<div className = "circle">
<img className = "airbnb" src = "http://logok.org/wp-content/uploads/2014/07/airbnb-logo-belo-880x628.png" alt=""></img>
<div className = "projectText">
Anonymous social media platform exclusively for the Rice community</div>
</div>
</div>
</Fade>
</div>
)
}
}
In reactjs, I have already created one component and added it to my Main.js file but now, I need to add one more component to it and due to JSX restriction of having only one root element per JSX, I cannot add one more component to it. I don't know where I'm going wrong in this.
`~~~~index.js file`
import React from "react";
import ReactDOM from "react-dom";
import Main from "./Main";
ReactDOM.render(
<Main/>,
document.getElementById("root")
);
-------------------------------------------------------
Main.js file
import React, { Component } from "react";
import Header from './Header';
// import Body from './Body';
import './index.css';
class Main extends Component {
render() {
return (
<div className="Main">
<Header image={require('./demo.jpg')}/>
{/* <Body/> */}
</div>
);
}
}
export default Main;
-------------------------------------------------------
Header.js file
import React from 'react'
import './Header.css';
// import Body from './Body';
export default (props) => {
const style= {
backgroundImage : "url(" + props.image + ")"
}
return (
<div className="body" style={style}>
<button className="btn" > Drawer </button>
<h1 className="heading1"> Questions </h1>
<button className="heading2"> Eye Button </button>
<h2 className="heading3"> Hi.. Sandeep Gautam </h2>
<h3 className="heading4"> Mind answering a few questions </h3>
</div>
)
}`
I have setup a basic react app using create-react-app and created my first component. However, the project is not able to build or render due to this error in browser window:
CountDown(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.
./src/index.js
D:/ReactDev/CountDownReact/countdown/src/index.js:8
Here's my index.js file code:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import Bulma from 'bulma/css/bulma.css'
import App from './components/App/App';
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();
and the App.js where I have imported the new component:
import React, {Component} from 'react';
import './App.css';
import CountDown from '../countdown/Countdown';
class App extends Component {
render() {
return(
<div className="App">
Hello React
<CountDown/>
</div>
);
}
}
export default App;
Finally, my Countdown component code:
import React from 'react';
const CountDown = (props) => {
<section class="section">
<div className="hero-body">
<div class="container">
<h1 class="title">Section</h1>
<h2 class="subtitle">
A simple container to divide your page into <strong>sections</strong>, like the one you're currently
reading
</h2>
</div>
</div>
</section>
};
export default CountDown;
Do I need to also import my new component here? How do I solve this issue. Thanks.
Your Countdown component doesn't return anything, you can replace the {} with () in order to have it return.
import React from 'react';
const CountDown = (props) => (
<section class="section">
<div className="hero-body">
<div class="container">
<h1 class="title">Section</h1>
<h2 class="subtitle">
A simple container to divide your page into <strong>sections</strong>, like the one you're currently
reading
</h2>
</div>
</div>
</section>
);
export default CountDown;
That should do it.
CountDown component doesn't return the JSX. You can add an explicit return statement for returning the JSX.
Had the same problem with this:
function Input(props) {
return
<input type={props.type} placeholder={props.placeholder} />
}
Instead it had to be:
function Input(props) {
return <input type={props.type} placeholder={props.placeholder} />
}