In my react application, when I am using Helmet to show the title of the browser dynamically, the page in which I am using the CODE Like -
**<Helmet>
<title>Login</title>
</Helmet>**
then my page is getting disappeared Mode, nothing error is showing. In my react app I installed the react-helmet-async and I also imported the config ----
import { Helmet } from "react-helmet-async";
How can I solve the problem?
You must wrap the APP in index.js by HelmetProvider and also import HelmetProvider. You can follow following lines of code:
index.js:
import { HelmetProvider } from 'react-helmet-async';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<HelmetProvider>
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>
</HelmetProvider>
);
Related
When I try to access the relevant component under app.js, I get the error "WARNING in [eslint] rc\App.js Line 2:8: 'personAdd' is defined but never used no-unused-vars". When I run the project, I see tags in the form of in html, but the component does not appear on the screen. I have included the codes below. Thanks in advance.
Note : Changes under .eslintrc.json didn't work.
App.js
import React from 'react';
import personAdd from './screens/personAdd';
function App() {
return (
<personAdd />
)
}
export default App;
personAdd.js
import React from 'react';
class personAdd extends React.Component{
render(){
return(
<div id = "personAdd">
<h1>Kullanıcı Bilgileri</h1>
<form>
<label htmlFor="id">Ad</label>
<input id="id"/>
<button>Add</button>
</form>
</div>
)
}
}
export default personAdd;
index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
//import personAdd from './screens/personadd';
import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
/*const personadd = ReactDOM.createRoot(document.getElementById('personadd'));
personadd.render(
<React.StrictMode>
<personAdd />
</React.StrictMode>
);*/
You don't need to manually create new root elements for every component you want to render.
React inserts an initial element 'root' into the DOM so that the app can render within that.
Try removing:
/*const personadd = ReactDOM.createRoot(document.getElementById('personadd'));
personadd.render(
<React.StrictMode>
<personAdd />
</React.StrictMode>
);*/
If you want to render your personAdd component you can add it as a child of App as you've already done.
function App() {
return (
<personAdd />
)
}
The other reason you're getting these issues is because you're not using Pascal case when naming your components (PersonAdd).
function App() {
return (
<PersonAdd />
)
}
In addition as others have mentioned, stick to function components rather than class components.
I'd recommend having a look at the React Beta Docs which now do everything with functional components. There are helpful walkthroughs on there that should help you out.
As #evolutionxbox said. Try naming the component with UpperCamelCase. It's used to specify a React element
https://reactjs.org/docs/jsx-in-depth.html#specifying-the-react-element-type
Also, it is now common to create components as functions and not Classes. Of course it's up to you if you do prefer classes.
https://reactjs.org/docs/components-and-props.html#rendering-a-component
I'm building an Express-React-Node app that I want to deploy on Google App Engine.
As I'm following several tutorials I've encountered these two apps architecture:
https://github.com/BalasubramaniM/react-nodejs-passport-app/tree/master/src
and
https://hackernoon.com/m-e-r-n-stack-application-using-passport-for-authentication-920b1140a134
I'd like to understand the differences.
The first one is only one app with Webpackand Babel.
On the client-side, I have a App.jsx file and Index.html file.
This is the App.jsx file:
import React from 'react';
const App = () => (
<div className='app'>This is a React app</div>
);
export default App;
And this is the html file:
<!DOCTYPE html>
<html>
<head>
<title>A Web App</title>
<script crossorigin src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<script src="./bundle.js"></script>
</head>
<body>
<div id="app">This is an Express App</div>
<script>
ReactDOM.render(
React.createElement(App.default),
document.getElementById('app')
);
</script>
</body>
</html>
The second one comes with a client app and a server app.
There is a index.jss file with the following code :
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import registerServiceWorker from "./registerServiceWorker";
import { Route, Switch } from "react-router-dom";
import { BrowserRouter } from "react-router-dom";
ReactDOM.render(
<BrowserRouter>
<Switch>
<Route path="/" component={App} />
</Switch>
</BrowserRouter>,
document.getElementById("root")
);
registerServiceWorker();
and a App.js file with the following code:
import React, { Component } from "react";
import logo from "./logo.svg";
import "./App.css";
import queryString from "query-string";
class App extends Component {
componentWillMount() {
var query = queryString.parse(this.props.location.search);
if (query.token) {
window.localStorage.setItem("jwt", query.token);
this.props.history.push("/");
}
}
render() {
return (
<div className="App">
//some stuff here
</div>
);
}
}
export default App;
There is nothing related to react in the html file.
I kind of understand that with the first project the rendering part is mixed within the html file but I'm not really able to understand the differences and does things articulate in one app and the other.
The 2nd one appears to be using the create-react-app engine to generate the scaffolding and starter files. The 2nd example incorporates JWT user authentication that gets stored in local storage whereas the first does not appear to do so. Additionally, the 2nd example leverages React Router which allows you to build a single-page web application with navigation without the page refreshing as the user navigates. React Router uses component structure to call components, which display the appropriate information and allows you to add routes rapidly to build out the navigation. That is how the App component is being rendered within the imported Route component prop in index.jss. And if someone adds another Route with another path containing another component prop like this:
<Route path="/another-path" component={SubComponent} />
you could then access that component by traveling to baseURL/another-path
Token authentication and the use of React-Router are the primary differences between these two projects.
There are no differences. Both versions will call ReactDOM.render with an App element.
If you compile the second version using webpack, webpack will bundle all files together and will produce the same code as your first, partly manual solution.
first of all i'd like to say that i'm a new developer of React and NodeJS.
I want use this technologies:
- React as a client
- NodeJS as a server
- Webpack for build my files.
My project structure is the follow:
my-application/
webpack.server.js
webpack.client.js
server.js
client/client.js
client/app.js
client/components/header.js
client/components/mainLayout.js
client/components/footer.js
The header and footer files are not important so i'm not writing here.
The important file are the following:
mainLayout.js
import React, { Component } from 'react';
// import component
import Header from './header';
import Footer from './footer';
class MainLayout extends React.Component {
constructor (props) {
super(props)
}
render() {
return (
<div className="App">
<Header />
{this.props.children}
<Footer />
</div>
);
}
}
export default MainLayout;
app.js
import React, { Fragment } from 'react';
import { Route, Switch } from 'react-router-dom';
import MainLayout from './components/mainLayout'
const AppComponent = () =>
<Switch>
<Route path="/" exact render={props => (
<MainLayout>
<h1>Hello World</h1>
</MainLayout>
)} />
</Switch>
;
export default AppComponent;
client.js
import 'babel-polyfill';
import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter} from 'react-router-dom';
import AppComponent from './app';
ReactDOM.hydrate(
<BrowserRouter>
<AppComponent />
</BrowserRouter>,
document.querySelector('#root')
);
server.js
import express from 'express';
import React from 'react';
import AppComponent from './client/app'
var app = express();
const PORT = 3000;
app.use("/", express.static("build/public"));
app.get("/", (req, res) => {
res.send(<AppComponent />)
});
app.listen(PORT, () => console.log('Now browse to localhost:3000'));
Run my project:
npm run build
npm run dev
but when i'm going at http://localhost:3000 my page response is
{"key":null,"ref":null,"props":{},"_owner":null,"_store":{}}.
I don't understand why i have the error, something probably escapes me but i don't what.
Can you help me please?
Thanks you in advance,
AS
You are running both front and back end on the same port. Go to package.json for your react app and replace your start script with the following script:
"scripts": {
"start": "set PORT=3007 && react-scripts start",
// the rest of your scripts
}
This will be the first step for resolving your issue. If you keep getting errors after that, let us know what are they.
I ran the application again using npm.
In the command I entered: npm start in the application folder after this it worked again.
In App.js, add Routes in the import. Use element instead of component.
For Example:
import {BrowserRouter, Routes, Route, Link, Switch} from 'react-router-dom'
<Navbar />
<BrowserRouter>
<Routes>
<Route path="/" exact element = {</>}/>
<Route path="/" exact element = {</>}/>
</Routes>
</BrowserRouter>
This can be from the browser you are using.
Copy the local host address on your address bar and paste on a different browser, Chrome recommended.
This is based on personal experience. It kept rolling on Opera browser until I opened it on Chrome.
I am building SSR React app with razzle tool. Server is using express framework. I would like to load React components dynamically according to value included in API response.
I have folder structure like:
views
- default
-- Home.js
- theme1
-- Home.js
I am using SSR. On the server I have
const markup = renderToString(
<Provider store={store}>
<StaticRouter context={context} location={req.url}>
<App theme={theme} />
</StaticRouter>
</Provider>
);
Inside App component, I need to import component from corresponding subfolder or if its absent than import default component from the default subfolder. There can be many theme subfolders so I can't import all the components manually.
Should this by done on server by express or is there another way?
Thanks
Are you looking for something like this? I'm not quite sure if you are using server side rendering.
import DefaultComponent from './views/default.js';
import Theme1Component from './views/theme1.js';
this.state = {
visibleDefault: true
}
You can then simply update the state base on the response.
Then in your render you can have this
render(){
return(
{ visibleDefault ? <DefaultComponent/> : <Theme1Component/> }
)
}
I am building a React-based website, started with create-react-app and using react-router-dom`. This is my structure:
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();
App.js
import React, { Component } from 'react';
import { BrowserRouter, Route } from 'react-router-dom';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import reducers from './reducers';
import Menu from './components/Menu';
import Blog from './components/Blog';
import Books from './components/Books';
import Contact from './components/Contact';
import Curriculum from './components/Curriculum';
import Lectures from './components/Lectures';
import MainPage from './components/MainPage';
import Mathematics from './components/Mathematics';
import SocialNetworks from './components/SocialNetworks';
import Software from './components/Software';
export default class App extends Component {
render() {
return (
<Provider store={createStore(reducers)}>
<div className="contents">
<div className="banner-top shadowed-text">
<div className="my-name">
Ed de Almeida
</div>
<div className="my-professions">
Mathematician, Software Developer, Writer and Lecturer
</div>
<SocialNetworks />
</div>
<Menu />
<div className="page-area">
<BrowserRouter>
<div className="top-margin-area">
<Route exact path="/" component={MainPage} />
<Route path="/curriculum" component={Curriculum} />
<Route path="/math" component={Mathematics} />
<Route path="/software" component={Software} />
<Route path="/blog" component={Blog} />
<Route path="/books" component={Books} />
<Route path="/lectures" component={Lectures} />
<Route path="/contact" component={Contact} />
</div>
</BrowserRouter>
</div>
</div>
</Provider>
);
}
};
When I run it in my local server it works perfectly well. I may navigate to all URLs defined in the routes and I see exactly what is is expected.
The trouble starts when I do my git push heroku master. Although it builds perfectly at Heroku, with no error messages, I may only open the homepage ("/"). If I navigate to "/curriculum", for example, I get a 404 Not Found error message.
Important:
This is the Heroku URL: http://eddealmeida.herokuapp.com/
I am relatively new to React and this is my first time hosting React at Heroku. I created my Heroku app using this buildpack here.
Am I missing something?
Oh, before I forget... When I run locally using heroku local it also works perfectly well. It is only there at Heroku which things go wrong!
Based on the documentation of the buildpack you are using, you’ll need to configure the Heroku app for routing by creating a static.json file:
React Router (not included) may easily use hash-based URLs like https://example.com/index.html#/users/me/edit. This is nice & easy when getting started with local development, but for a public app you probably want real URLs like https://example.com/users/me/edit.
Create a static.json file to configure the web server for clean browserHistory with React Router v3 & BrowserRouter with v4:
{
"root": "build/",
"routes": {
"/**": "index.html"
}
}