In my webpack, the entry point of the application is set to index.js:
entry: {
app: [
'react-hot-loader/patch',
'./client/index.js'
]
In node Js, For path / in my application, I am routing it to index.html
from routes.js on server side using:
app.route('/*')
.get((req, res) => {
res.sendFile(path.resolve(`${app.get('appPath')}/index.html`));
});
Above code understandably serves index.html.
But what if I wanted my application routing to be initialized using React-router?
index.html gets rendered but I don't see index.js getting initialized at all.It is defined as entry point in webpack so that should happen ,right?
Problem: To have React-routing initialized which should work once the flow gets to index.js
My routes.js in client folder looks like this :
import React from 'react';
import {Route, IndexRoute} from 'react-router';
import About from './components/About/About';
import Header from './components/Header/Header';
import Outlet from './components/Home/SelectOutlet';
console.log("routes file client")
export default (
<Route path="/" component={Header}>
<IndexRoute component={Outlet}/>
<Route path="about" component={Footer}/>
</Route>
);
and index.js
import 'babel-polyfill'; //certain functions like array.from , set, map can't be transpiled by babel so ue poyfill for that
import React from 'react';
import { render } from 'react-dom';
import { Router, browserHistory } from 'react-router';
import routes from './routes';
//import '../node_modules/bootstrap/dist/css/bootstrap.min.css'; //webpack can import CSS files too
import './styles/styles.css';
render((
<Router history={browserHistory} routes={routes}/>),
document.getElementById('app')
);
console.log("In index js render ")
Consoles in index.js and routes.js never get consoled and the application just serves index.html because of express routing
my webpack file is taken from here: https://github.com/Hashnode/mern-starter
but I don't see bundle.js getting created anywhere with npm start command.
Edit:
error screenshot:
screen 1:
error message
When I click on this error message:
I get all the content from html in js:
<!DOCTYPE html>
<html>
<head>
<title>
ABC
</title>
</head>
<body>
<h1> XYZ</h1>
<div id="app"></div>
<script src="index.js"></script>
</body>
</html>
Well... Are you including
<script src="index.js"></script>
in your index.html?...
Related
I have a create-react-app project that uses SemanticUI for styling. My App component is the following:
import React from 'react';
import './App.css'
import { LandingComponent } from '../components/landing/LandingComponent/index'
import { LoginComponent } from '../components/login/LoginComponent/index'
import { DashboardComponent } from '../components/dashboard/DashboardComponent/index'
import { MenuComponent } from '../components/menubar/MenuComponent/index'
import { BrowserRouter as Router, Route, Link } from "react-router-dom"
const App: React.FC = () => {
return (
<>
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/semantic-ui#2.4.2/dist/semantic.min.css" />
<MenuComponent />
<Router>
<Route exact path="/" component={() => <LandingComponent />} />
<Route exact path="/login" component={() => <LoginComponent />} />
<Route exact path="/dashboard" component={() => <DashboardComponent />} />
</Router>
</>
);
}
export default App;
Whenever I am working in development mode, I will be able to see the raw HTML for a few milliseconds before the styling kicks in. I figured this would be solved after I build an optimized build using npm run build
However, in a production build, I am having the same issue. I was reading other accounts of people with the same issue, and some recommended using mini-css-extract-plugin. However, I wanted to know if there was a solution to this without adding any additional plugins to my project?
Yes, what you want to achieve is to load the CSS resource as a render blocking resource, which means the browser will load the resource first before rendering the content.
This has nothing to do with React or your build tooling, but rather how web pages work.
This can be achieved by moving the element from your App component to your document . So, move your line to the index.html file that is in the public folder.
Your index.html will then look something like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
...
<title>React App</title>
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/semantic-ui#2.4.2/dist/semantic.min.css" />
</head>
<body>
...
Please note, that from web performance point-of-view it is recommended to add the CSS resource only after your title attribute, so that the title gets "rendered" before the browser starts fetching the CSS resource.
I'm trying to add the react app I made to my existing website, I followed the existing documentation here but apparently the navigator doesn't regconize the import parts of my code, brobably because the babel parser isn't working properly?
Here's my index.js code:
I tried the babel as a type in my script, but no luck
here's my index.js code:
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();
here's my index.html code:
<head>
<script src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/react-content-loader#3.4.1/dist/react-content-loader.min.js" crossorigin ></script>
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
</head><body>
<div id="root"></div>
<script src="index.js"></script>
</body>
the console output:
Uncaught SyntaxError: Unexpected identifier in index.js:1
You are loading your dependencies as globals using dedicated <script> elements.
Don't use import as well.
You are using JSX. You need to mark the script containing it as text/babel.
I have a main.js file
main.js
import React from 'react';
import { Meteor } from 'meteor/meteor';
import { render } from 'react-dom';
import { renderRoutes } from '../imports/startup/client/routes.jsx'
Meteor.startup(() => {
render(renderRoutes(), document.getElementById('target'));
});
and an index.html file which contains the divider "target"
index.html
<head>
<body>
<div id="target" />
</body>
</head>
How can I remove the HTML file and render it on the main.js file as I need it for react-helmet.
Im starting coding reactjs and im confusing how html5 work on reactjs. Do we need to build a separate html5 sheet or code html5 direct into jsx sheet?
React is component based java-script lib. so on your html code just link jsx by main.js code structure. your xml code build and make application in the extension of JSX like App.jsx . Refer here to build react app
index.html
This is just regular HTML. We are setting div id = "app" as a root element for our app and adding index.js script which is our bundled app file.
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>React App</title>
</head>
<body>
<div id = "app"></div>
<script src = "index.js"></script>
</body>
</html>
App.jsx
import React from 'react';
class App extends React.Component {
render() {
return (
<div>
Hello World!!!
</div>
);
}
}
export default App;
main.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
ReactDOM.render(<App />, document.getElementById('app'));
I have managed to render my component on a div on my template like so:
Index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Example</title>
</head>
<body>
{% load render_bundle from webpack_loader %}<h1>Example</h1>
<div id="react-app"></div>
{% render_bundle 'main' %}
</body>
</html>
My react app:
Index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
const rootElement = document.getElementById('react-app');
ReactDOM.render(<App />, rootElement);
Whats a good approach to pass in data to react? i'm using Django templates
It is possible to pass props to the root element through data attributes and pass them to root element in index.js
<div
id="root"
data-custom-props='{aKey: "a value"}'
></div>
index.js file:
ReactDOM.render(<App {...(root.dataset)}/>, root);
A common pattern is to output a json string into a script tag, which you can then refer to in your init function.
For example:
// Above where you include your main bundle
<script>
window.__INITIAL_STATE.__ = { your: 'DATA', encodedIn: 'json', here: true }
</script>
You can then reference window.__INITIAL_STATE__ in your index.js and pass data as props into your root component.
What data do you want to pass to react?
Props is the concept that allow user to pass data from one component to another within react. It is not made to pass data from outside world to react app.
I believe this answer can guide you in right direction.
How to get Django and ReactJS to work together?
also read following to get some idea of back-end and front-end working together.
http://geezhawk.github.io/using-react-with-django-rest-framework
http://www.openmindedinnovations.com/blogs/3-ways-to-integrate-ruby-on-rails-react-flux