We have a common widget in each of our pages across multiple services, and we want to write a common client-side rendition code in ReactJS for this widget as an external hosted js, such that each of the pages can include this externally hosted JS in their pages to render the widget. But many of these pages are written in different JS frameworks (angular/inferno/typescript/etc) or even in plain vanilla JS. Now pardon me if this is an ignorant question, but I think that ReactJS code can be compiled into javascript using babel, and the bundled js file can then be directly included in any page using any framework(angular/typescript/etc). Is my assumption correct, or will such an approach lead to problems. Any other inputs?
PS: I am very new to any of these JS frameworks, and have only worked on small projects involving plain vanilla JS.
You can mount your react root node (typically <App/> ) in any html DOM node. This is what react-dom does by
render( <App />, document.getElementById("root"));
which would be a familiar line for you.
Now, coming to how to actually do this. I assume you are using create-react-app.
Run npm run build inside your project folder.
When it finishes, you will find a bunch of files inside your-project-folder/build, including
build/index.html
build/static/js, build/static/css, etc
Open the build/index.html file in a text editor and study it. I think you will be able to figure out the rest.
Related
I have a question.
I am making an Universal React App and I understand the concept.
We take the best of the CSR and the SSR method to make a commun code for the front-end and the back-end.
We also split the element of a web page (HTML, CSS and JS) to the side who manage it the best.
So I did like this: the HTML is rendered by the back end and the CSS and JS by the front end on the browser.
That is on development mode because i use Webpack for bundle management and on this mode, i use a plugin to inject the css directly to the DOM by style markup (style-loader for HMR support)
But here's the trick, Webpack recommend extracting the css files to separates files on production mode. (by html-webpack-plugin and mini-css-extract-plugin)
So I need to inject the separate css files to the DOM by the link markup.
My question is doesn't it break the whole concept of Universal (Isomorphic) app by giving the CSS to the back end?
What is the configuration of an Universal React App on production mode?
Thanks in advance for your response.
Can Gatsby or Jekyll or any other static site generators render a React-authored site into purely static HTML? I'm looking to host on S3/CloudFront or similar and also have little to no JS in the output.
Basically I'm looking to create a static website but would like to use React as development tool to take advantage of reusable UI components. Actual runtime interaction is minimal and can be done without React at runtime.
I looked at react-static which seems to be exactly what I'm looking for but the rendered html pages still reference and load the React library.
With my minimal needs I could probably roll my own thing to create each page as a separate React SPA and then use ReactDOMServerto render each to a static HTML file. I'm looking to see if there are simpler/better options.
You can use pupeteer to get the rendered html of any webpage, including SPA. Or use rendertron, which uses pupeteer underneath.
Another one is react-snap, which will crawl your web on build and create the html for each page.
With Gatsby, sure you can. Gatsby has a html.js that serves as a template for all generated pages. You can simply remove Gatsby's javascript from that html.
/* Generated html */
...
<body>
<div id="___gatsby">...</div>
<script src="/common.js"></script> <-- remove this
</body>
First copy the default html to your src:
cp .cache/default-html.js src/html.js
Then, edit this line:
/* src/html.js */
<body {...this.props.bodyAttributes}>
{this.props.preBodyComponents}
<div
key={`body`}
id="___gatsby"
dangerouslySetInnerHTML={{ __html: this.props.body }}
/>
- {this.props.postBodyComponents}
+ {process.env.NODE_ENV !== 'production' && this.props.postBodyComponents}
</body>
This ensures you can still make use of gatsby's hot reload in development, but generated htmls will not include React & webpack generated scripts.
A more meticulous approach would be to loop over postBodyComponents & only removes the script tag that link to common.js, but for most case I think it'll be fine.
This definitely defeats the purpose of Gatsby, which has its own convention & complex process just so it can generate a progressive web app. For your case, if you're not already familiar with Gatsby, maybe it'd be simpler to roll your own SSR. My answer is only to show whether it's possible with Gatsby or not.
I'm looking to embed my react application into an existing plain html / javascript website. What I've found so far is that you are only able to embed individual components into existing websites, not entire react applications.
Naturally I have an app component which contains the entire application. Am I able to embed the full application by embedding this component? My concern is all the modules I'm using (e.g. axios, bootstrap) will break.
I've been looking for a good tutorial on how to do this but I'm not finding many examples of trying to embed the entire application into an existing page.
My understanding of how to do this, is to reference the react javascript source links in the html page head, possibly also babel although its unclear to me if babel will work. Then we can use the renderDom method like we normally would.
On page load can I run my index.js file to insert my react app component into the dom? If this would work, are there any issues with file structure, file updates I would need to take care of?
If I'm driving off path out into the wilderness and there is a better way to handle it I'm open to suggestions. I'm just looking to see if someone else has experience doing this before I start down a bad path.
I was able to embed my full react application by doing the following...
I built my react app production files with npm run build
I copied those files into the existing web project at the root level
Then I opened the index.html file generated from npm run build and copied the scripts in the head and body sections to the page I wanted to drop in my application
Finally I added a div with the id root (this is what my renderDOM method is looking for) where I wanted my application to appear on the existing web page.
That was it. Super easy, thanks for the help!
Just wanted to add a quick additional approach here.
If you already have a Flask app and you're trying to put React components or an app (so the base component of an app) onto an existing HTML page in the Flask app, basically the only thing that you need is Babel, unless you are able to write React components without using JSX (so in plain Javascript) in which case you'd need nothing.
Step 1: To attach Babel to your project, you'll have to grab the Babel node modules which means your project will be associated with NPM for the sole purpose of using the Babel functions. You can do this by running the following commands in your project root directory (Node.js must be installed):
npm init -y
npm install babel-cli#6 babel-preset-react-app#3
Step 2: Once Babel is attached to your project, you'll have to actually transpile the existing React component .js files from JSX into plain Javascript like so:
npx babel --watch (jsdirectory) --out-dir (outputdirectory) --presets react-app/prod
where (jsdirectory) is the path to the directory where your React component files written using JSX are, and (outputdirectory) is where you want your translated files to show up--use . for (outputdirectory) to have transpiled files appear in your root directory.
Step 3: After the plain Javascript versions of your React files appear, make sure they are linked to your HTML page instead of the original JSX-utilizing files (replace the original script tag's .js file)
Step 4: Make sure the HTML page in question is linked to the .CSS files you want (they will modify the transpiled Javascript in the same manner as they did the JSX files in a project made using Create-React-App because the class names are the same) as well as the required React resources:
<script src="https://unpkg.com/react#16/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.production.min.js" crossorigin></script>
After you do those quick steps your React components should render no problem on that page in your Python-Flask application.
Up until now I have been building my application using the following structure.
/src
/components
/shared
/messagebox
/alertbox
/Home
/About
So as you can see I have shared components which are components being used on other components / pages. and I have the concept of Home, About which are also components (which translate to viewable pages) as everything in Angular is now supposed to be a component - right?
Does anyone have a better implementation of the structure of a NG 1.5 app?
I now need to create some filters and as far as I am aware I cannot hang these off of a component, so where is the based place for putting this type of file?
Also other things that come to mind are constants, services etc.
There is no recommendation on Angular docs site as far as I can see.
The one which i used to follow for my project is :
project
/www
/assets
/components // directives
/accordion
/accordion.html
/accordion-directive.js
/accordion-controller.js
/accordion-controller-test.js
/core // shared services
/route
/router-service.js
/sections // pages we build by adding components
/registration-page
/registration.html
/registration-controller.js
/registration-controller-test.js
app.js
index.html
index-controller.js
app-configuration.json // for keeping constants
this might help you.Please check.
We're attempting to create a PHP Laravel application using ReactJS as the view for each page. Laravel handles the routing and the presenting of each view. Each view loads a react js bundle.js file. Each bundle.js file is custom to that view and inside contains the react components needed for that view (screen). What were finding out is that each bundle.js file is about 4MB because each contain its dependencies as well as the components. Also were still trying to figure out how to share a component such as a TableComponent.js file across multiple views but have been so far unsuccessful.
Are we architecting this totally wrong? Should there always be only one bundle.js file for the application as a whole?
Or are there good fixes to remove the dependencies from each bundle.js file in a single dependency js file that gets loaded for all views?
Is there a good way to reuse ReactJS components accross multiple bundle.js files ?
Sounds like a perfect case to use Webpack which is an amazing bundling tool, here is an example on how to build multiple entries(pages):
https://webpack.github.io/docs/multiple-entry-points.html
You just write your entry point code, and webpack will figure out the details on how to build shared dependencies of different entries(pages) into a common bundle.