So reactjs.org has an excellent tutorial on how to add react js to an existing website HERE by adding react js code as scripts. That is working well for me. My doubt is that how would we work with components that we download from npm?(eg: react-router, react-bootstrap,etc.) Usually when we work on a complete react project we just install them with npm and import them in react js, but how do we install such components or get their script files like we got react script files?
The process would be similar to the process described on the React site. In their example, they implement a simple single-component (<LikeButton />) application with no external dependencies. To use external components/modules you would need to either bundle them into your app, or load them as scripts.
Preferred Method
The preferred method would be to use a bundler like webpack, parcel, or similar to bundle your code and modules into a single script.
Create your app.js file, using imports to load external components
import React from 'react';
import Button from '#material-ui/core/Button';
const LittleApp = () => (
<Button variant="contained" color="primary">
Hello World
</Button>
);
ReactDOM.render(<LittleApp />, document.getElementById("littleApp"));
Use webpack, parcel, or similar to bundle the app.js into a single bundled.js file
Load the bundled.js file into your page
Alternate Method
It's also possible to load certain components using Universal Module Definition (UMD) files in <script> tags. This could work for a simple add-on app, but probably not recommended in most cases. I tend to use these only when prototyping ideas, or demoing solutions on Stack Overflow.
Something like this:
const LittleApp = () => {
return (
<div>
<MaterialUI.Button variant="contained" color="primary">
Hello World
</MaterialUI.Button>
</div>
)
}
ReactDOM.render(<LittleApp />, document.getElementById("littleApp"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/#material-ui/core#latest/umd/material-ui.development.js"></script>
<div id="littleApp"></div>
I think you can add those library using <script> as well.
react-router: <script src="https://unpkg.com/react-router/umd/react-router.min.js"></script>
react-bootstrap: <script
src="https://unpkg.com/react-bootstrap#next/dist/react-bootstrap.min.js"
crossorigin
/>
check the documentation for corresponding library.
https://cdnjs.com/ hosts many FOSS (Free and Open-Source Software) web libraries. Searching react-router yields links to development and minified versions you can use in your applications. But much like klugjo's answer, I would highly advise against this, and manage your project's modules with npm if at all possible.
I would highly recommend against that and go the standard route:
Use create-react-app to create a full fledged react app
Install your modules using npm
Code your app
Build the app and deploy the resulting bundle (create-react-app provides all the tools you need for that)
Fetching react from a CDN like in the link you have provided is suitable for a quick Proof of concept but not for a production app
Related
So I have a corporate laptop and I can't install npm in that, that's why I have been using react with cdn. I'm facing some problems with updating states in my project so I decided to use a state management library, I did find the cdn link but I can't find any tutorial or materials on how to use the library using a cdn. I'm new to the js ecosystem and really need some pointers on the starting direction. For eg:
import {observable} from 'mobx-react'
doesn't work with cdn.
It gives the error:
Uncaught ReferenceError: require is not defined
add the cdn script in the head tag of index.html to make it work :
to use mobx v 6.6.2 :
<script src="https://cdnjs.cloudflare.com/ajax/libs/mobx/6.6.2/mobx.umd.production.min.js" integrity="sha512-eIWf4utGE5IvRknZTPJQurSa6SKD8gT4B430UugX3afhpnjNqQ0fAY6/1rfPNro+8pwVd3bWaMTovLMoIgYWEw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
for other versions you can see the cdnjs doc
I'm currently pulling hairs trying to figure out how to go about this.
So, I'm working in a vanilla JS environment with no webpack setup served with capacitor and want to use this capacitor-plugin: https://github.com/CodetrixStudio/CapacitorGoogleAuth
However, to use this plugin I have to import the package into my client code.
Here's what I've tried:
Unpkg type="module": however browser support in mobile isn't that great. And this app will be served to a ton of users
Using browserify + esmify to bundle the plugins code into something I could import with a <script> tag into my index.html. Didn't work
My last thought is to setup webpack to bundle everything for me, similar to the browserify approach and import that. However before I go through with all of that I wanted to reach out here to see if you guys had any other ideas.
Is there a way to access this plugin from window maybe?
so I figured out the way to go about this by following this article: https://medium.com/#SmileFX/a-complete-guide-building-a-capacitorjs-application-using-pure-javascript-and-webpack-37d00f11720d
Basically you have a www/js directory (vanilla js), and a src directory (ES6/import code goes). You then configure webpack to output in your www/js/ directory.
Note: Any variable you want accessible to your vanilla js code must be explicitly stored in the window object.
Example
./src/toBeWebpacked.js
import Module from "your-module"
window.doSomething = () => Module.doSomething()
./www/js/vanilla.js
const useModuleCode = () => {
// use code from webpacked ES6 JavaScript here
return window.doSomething();
}
I am using in a web application react-router.
When using import 'lodash' I import the whole lodash lib in my project.
Code splitting is about using an async import using import().then() to dynamically load chunk while the application is running.
Read about code splitting in react-router/web.
For example: function atRuntime() { import('lodash').then(() => {});}
This will import the library at runtime with an ajax request so it is not bundled in the main.js.
I'd like to recycle my code between web and native and we use a lot of code splitting for each page change.
My app has two main parts and some user will only visit one part so they don't need all user authenticated part.
I expect to be able to use tree shaking during react-native, but it is missing in react-router/native documentation.
What's react-native opinion about code splitting?
if you want to use webpack, you can try with haul https://github.com/callstack/haul
but i highly recommend this implementation without webpack -> https://www.npmjs.com/package/react-native-bundle-splitter
I need to assimilate some code into a React app. Problem is, that the code i want to use comes from some example i found on the web, which uses "normal" tags to import various other scripts, via an HTML file.
The main script file that i want to use calls countless various functions from external scripts.(The script "assumes" those functions are available). This of course works in the browser, but not in a build system like Babel/Webpack.
To make things short: what would be the node/es6 equivalent of:
<script src="/dev/getHTMLMediaElement.js"></script>
And how do i make those functions available anywhere in the React app?
My React app is a fairly standard one, booted with react-create-app.
You can require or import this file directly after adding externals option in webpack config
Ref: https://webpack.js.org/configuration/externals/
I'm quite new in Vue, so maybe it would be an obvious question for you.
I'm working on Java web application in microservices architecture and I've decided to prepare frontend part of all my services in Vue. My frontend views schould look very similar because this will be a CRM type of app. I already prepared my HTML skeleton, CSS styles and JS using Pingendo.
What is important I need to keep my Header and Footer sections the same all the time in specified microservice. Best option for such thing is to use routing in Vue and rout only the content between Header and Footer components. Generally rather obvious idea.
The problem is how to create new Vue project using already prepared HTML, CSS and JS files?
I used Vue CLI to create my project and just run vue create project-name command with default configuration.
Pingendo use Bootstrap, JQuery and Popper libraries, which I have to import to my Vue project using npm
install bootstrap jquery popper.js to install it and I have no warnings and errors now coused by lack of dependecies to this libraries.
I have also follow this instructions and installed basic config of webpack using npm install -D vue-loader vue-template-compiler but after npm run serve I have an error:
ERROR Failed to compile with 1 errors 10:10:28 PM
error in ./src/components/test
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#
loaders
> <template>
| <h2>this is TEST Component content</h2>
| </template>
# ./src/router/index.js 4:0-37 14:15-19
# ./src/main.js
# multi (webpack)-dev-server/client?http://192.168.1.7:8080/sockjs-node (webpack)/hot/dev-server.js ./src/main.js
My Test.vue component is very simple:
<template>
<h2>this is TEST Component content</h2>
</template>
<script>
export default {
name: 'test'
}
</script>
<style>
</style>
I don't know what I'm doing wrong. Everything has a default config with necessary additions. What steps should I do to make such project working?
Repository: https://bitbucket.org/jacekmucha91/storycrm-manager-vue/src/master/
It is questionable using jQuery with Vue. You can do the things you need to in Vue without jQuery, so I would first check that you are correctly choosing the tools you need. What exactly do you need jQuery for that Vue won't handle?
Additionally, there are a lot of plugins for Vue that handle the nuances properly, so for Bootstrap you should be installing Bootstrap-Vue as well. Check that there aren't specific-to-Vue versions of libraries you want to use. This will let you avoid these issues.
For reference:
https://vuejsdevelopers.com/2017/05/20/vue-js-safely-jquery-plugin/