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.
Related
I have a project using react-router v6, and I am getting an error stating useNavigate() may be used only in the context of a <Router> component.
For some background, I have two projects that live in the same repo and get built together. We leverage code splitting and import them as needed, not sure if this matters.
Now, I have a setup that is pretty simple:
(in the #dummyInc/components project)
Dummy.tsx
import React from 'react'
export function Dummy() {
const navigate = useNavigate()
return <div> Hello World <button onClick={() => navigate('/someRoute')}> </div>
}
Then my code uses it in a different project that is just imported.
(in the #dummyInc/site project)
App.js
import React from 'react'
import Dummy from '#dummyInc/components'
export function App() {
return <div> <Dummy /> </div>
}
index.js
import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter } from 'react-router-dom'
import App from './src/App'
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById('root')
)
Now I have the above and when I try to render it in the browser, it says the following, but I'm not sure how that's possible, it's being rendered in that context.
Error: useNavigate() may be used only in the context of a <Router> component.
Am I missing something? Any help is appreciated.
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>
);
I have built authorization into my React App using passport.js, and I would like to, in my App.js file, fetch my authorization routes to see if a user is logged into the app, or if nobody is logged in.
To help with the question, I have shared a condensed version of my React App's App.js file, and Index.js file.
// App.js File
// Import React Libraries, Routes, Container Pages
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Route } from 'react-router-dom';
import { userActions } from './actions/auth/auth-actions.js';
import GameLanding from './containers/StatsPages/Game/GameLanding';
import AppFooter from './components/AppFooter';
// And Create The App
class App extends Component {
constructor(props, context) {
super(props, context);
}
componentDidMount() {
this.props.dispatch(userActions.authorize());
}
render() {
return (
<div>
<Route exact path='/stats/games' render={() => <GameLanding userInfo={this.props.userInfo} />} />
<AppFooter />
</div>
);
}
}
// export default App;
function mapStateToProps(reduxState) {
return {
userInfo: reduxState.authorizedReducer.userInfo,
authorized: reduxState.authorizedReducer.authorized,
loading: reduxState.authorizedReducer.loading
};
}
export default connect(mapStateToProps)(App);
... my entire App.js file has ~15 Routes components, and (part of) my goal with my App.js file is to fetch the authorized and userInfo props, and pass these to the components in the various routes. I showed an example where I pass the userInfo prop to the GameLanding component.
Here is how I have set up my Index.js file.
// Index.js
// Import Libraries
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { BrowserRouter } from 'react-router-dom';
// Import CSS and the App
import App from './App';
import 'react-table/react-table.css';
import './index.css';
import './App.css';
ReactDOM.render(
<Provider store={store}>
<BrowserRouter>
<App />
</BrowserRouter>
</Provider>,
document.getElementById('root'));
My current problem is as such: For some reason, fetching the userInfo and authorized props is breaking my app. I am unfortunately getting no error messages... rather, all of the react-router-dom Links in my app are simply not working... clicking them changes the url, but the pages of my app no longer change...
My questions are then, (a) am i allowed to fetch authorization data in App.js in the manner I am doing so (using connect, with mapStateToProps, etc.), or am I doing this all wrong?
Whether or not somebody is logged into my app is an app-wide thing, not a page-specific thing, and I figured for this reason (also to prevent having to fetch auth props in many many container pages) that App.js is the best place to grab these props.
Any thoughts on why my app is breaking, or how else my App.js file should look (I am ~99% sure my index.js is fine), would be greatly appreciated! Thanks!
Edit: For reference, doing the following: (i) importing userActions, (ii) calling userActions.authorize() in componentDidMount, (iii) including the mapStateToProps and connect on bottom of app, etc. works for loading the auth props in any of my container components. e.g. if i had this code in my GameLanding component, it doesnt break the react-router-dom Links app-wide in the same manner that it does when this code is in App.js. Hence the title of the question. Thanks!
1) Reason for app breaking:
I am assuming userInfo and authorized props will be undefined, as component renders initially before componentDidMount runs and you have not handled undefined props. You could also pass default props for these props.
2) Better structure for authorization
I am assuming you need to authenticate each route for authorization.
i) Create routes file and enter all routes for your app.
ii) <Route exact path='/stats/games' component={GameLanding} onEnter={reqAuth}/>
Inside reqAuth function you should check if the user is authorized for that route or not.
iii) Inside App component call action for fetching data, store in store and use GameLanding as child component and pass props only when they are defined.
That is not whole code, but should give you gist.
Happy Coding!!!
Most of the tutorials I am seeing use a express.js file to route all get and post requests. I am using a React component using react-router-dom, do I need to use express? If yes, what is the best way to do so? Here is what my app is looking like following along 1/4 of this tutorial so far: https://www.youtube.com/watch?v=WDrU305J1yw&t=1693s
The mongoose code is probably misplaced and breaks the app.
import React, { Component } from 'react';
import { Route } from 'react-router-dom';
import mongoose from 'mongoose';
import '../styles/App.css';
import Input from './Input';
mongoose.connect(
'mongodb://admin-01:PW#node-log-shard-00-00-ecvwz.mongodb.net:27017,node-shot-log-shard-00-01-ecvwz.mongodb.net:27017,node-shot-log-shard-00-02-ecvwz.mongodb.net:27017/test?ssl=true&replicaSet=node-shot-log-shard-0&authSource=admin&retryWrites=true',
{
useMongoClient: true
}
);
class App extends Component {
render() {
return (
<div>
<div>
<Route exact path='/' component={ Input } />
</div>
</div>
);
}
}
export default App;
The best and correct way to do this is to have a backend server in whatever language you prefer(javascript, java, etc.) and connect this server with your database. Then in your react application when you need data from your database you will make a request to the server and the server will retrieve the data and them back to your react application.
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"
}
}