Am a new bee with React and I usually have custom css files and libraries I use for my web app development. I have been able to import my css files with require and css-loader npm install. I want to know If I can use SystemJS to import libraries like waves.js from bower_components and use it like I would in JQuery/Javascript Waves.attach(".btn:not(.btn-icon):not(.btn-float)"), Waves.attach(".btn-icon, .btn-float", ["waves-circle", "waves-float"]), Waves.init()
If it is possible how would I do this and If not how can I import waves because into my project.
I imported my waves.js file like so without system js and called the attach functions in the componentDidMount function and it worked like a charm
import Waves from "../../libs/bower_components/Waves/dist/waves.min.js";
componentDidMount() {
Waves.attach(".btn:not(.btn-icon):not(.btn-float)");
Waves.attach(".btn-icon, .btn-float", ["waves-circle", "waves-float"]);
Waves.init();
}
Related
There maybe some documentation out there on how to deal with this situation but i don't even know how to look for it.
Here's the deal, we have a Symfony "module" (ex Bundle) company-made that we share across multiple projects. Atm it is not listed on packagist and we require it with local composer repository paths if that matters.
Inside the shared module we have some css and some js that needs to be included. Since one of those shared-module (or bundle, w/e you want to call it) has bootstrap (the css frontend toolkit) the module itself requires it together with his css.
Inside the shared module we have a JS file "CoreLibrary.js" and we import the required js like this:
import $ from 'jquery';
import 'bootstrap';
export class CoreLibrary {
... more code
}
Then, inside the main application we include the common js file from the app.js file like this:
import { CoreLibrary } from '../public/bundles/thebundlename/js/CoreLibrary';
That doesn't seem to be ideal, and beside that, with encore we have to repeat
import $ from 'jquery';
import 'bootstrap';
import { CoreLibrary } from '../public/bundles/thebundlename/js/CoreLibrary';
In every .js file we need. That's so much of a burden that I can't belive there are no better ways do to that.
Sidenote: not so long ago i had to even follow this one:
Yarn and Webpack Encore configuration in Symfony 4.1 project because i was getting error during "yarn watch".
What is the correct way of doing it with company-shared module that requires 3rd party library like bootstrap?
For global jquery i have this in main js file
const $ = require('jquery');
global.$ = global.jQuery = $;
Also uncommented line in webpack config about jquery.
I have two libraries of Stencil JS web components, library-a and library-b. These are not apps, just separate npm packages of components.
I would like to use some of the components from library-a inside library-b. How do I import components from A into B?
The StencilJS docs offer some import instructions but don't cover this particular use case.
Basically all you have to do is npm install (or npm link) the project and import it.
As far as I know there are two places you can include the import:
Inside a global app.ts which is configured as a globalScript in stencil.config.ts.
Inside the root component.
In your case the second option probably won't work since component libraries usually don't have a root component.
Import inside app.ts:
First, create a global script and configure it in your stencil.config.ts:
export const config: Config = {
// ...
globalScript: 'src/global/app.ts',
};
Then add the import inside that file. Example for Ionic Framework:
import '#ionic/core';
Now you can use the components just like any other HTML element.
I have a JS app which is importing a custom node_module with helper functions etc. I'd like to import these functions using ES6 imports like so:
import exampleHelper from 'mycustommodule/helpers/foo'
and have Webpack just import this file as though it was any other include in the app. ie Use the same babelrc, webpack config, package.json as the existing app.
At the moment none of the imports in the custom module are resolving.
I've looked into Webpack externals but I can't work out if they are what I'm looking for. Any advice would be appreciated.
I'm experimenting with using web components for a project — essentially custom elements powered by attributes, ideally imported by <link rel="import">.
Here's the problem: I can't find conclusive guidance on where to stick any external libraries my component relies on, such as moment.js or even jQuery.
Most component examples I've seen strictly use vanilla JS. When they do use an external library, they often seem to drop them in using Bower or npm and and refer to them explicitly within the component's HTML:
<script type="text/javascript"
src="/bower_components/jquery/dist/jquery.min.js></script>
These days I'm more accustomed to using webpack to bundle dependencies, so this seems a bit odd.
My question: is it considered better form to include each component's library dependencies within the component directory, or have a central node_modules folder at the project level? How does webpack fit into this?
It's better to have a central node_modules folder at the project level. Most people use Webpack to bundle their code with their dependencies. They use require or import their modules for each component.
a.component.js
import React from 'react'
import $ from 'jquery'
b.component.js
import React from 'react'
app.js
import A from 'a.component.js'
import B from 'b.component.js'
Webpack will have one "entry": app.js and compile it output: app.min.js
why?
It's easier to manage (update, delete, add) dependencies with npm.
The browser will load one file instead of multiple external files.
External info:
https://webpack.js.org/concepts/
https://www.quora.com/Why-use-Bower-when-there-is-npm
I'm trying to setup TypeScript HTML app in visual studio. I want to use reactjs v0.14.7
I would like to avoid using tools like Browserify.
However, how to use the react-dom module then?
Let's forget about typescript for a while. I need to get pure ES5 up and running first.
currently, I have this:
<script src="Scripts/react/react.js"></script>
<script src="Scripts/react/react-dom.js"></script>
<script>
var Button = React.createClass({
render: function () {
return (React.createElement("div", { className: "btn btn-default" }, 'hello world'));
}
});
ReactDOM.render(React.createElement('Button'), document.getElementById('container'));
</script>
however, browser complains, ReactDOM object does not exists.
I have tried:
<script src="Scripts/require.js"></script>
<script src="Scripts/react/react.js"></script>
<script src="Scripts/react/react-dom.js"></script>
<script>
var React = require('react');
var ReactDOM = require('react-dom');
....
</script>
however, it does not work with require.js: Module name "react" has not been loaded yet for context: _. Use require([])
Can someone bring a little more light into this, please? How to use react without any server side tools like bundling, transpiling etc.
Answers like "use npm" won't be accepted as answer.
RequireJS and require are very different things - more on that later.
If you want to use React without a tool like Browserify or Webpack, then you don't necessarily need a module loader. The hosted versions of React and ReactDOM will expose global variables that you can use out of the box.
<script src="https://fb.me/react-0.14.7.js"></script>
<script src="https://fb.me/react-dom-0.14.7.js"></script>
<script>
console.log(React, ReactDOM);
</script>
Just download these files if you want to work with them locally.
SystemJS
All of that out the way, it sounds like SystemJS and JSPM might be exactly what you're looking for.
First use jspm to install your packages.
jspm install systemjs react react-dom
Then link and configure SystemJS.
<script src='jspm_packages/system.js'></script>
<script>
System.import('app.js');
</script>
Now inside app.js you can write CommonJS style code.
var React = require('react');
var ReactDOM = require('react-dom');
SystemJS will handle the loading of the rest of your scripts. If you want to make a production build, then it's as simple as running jspm bundle app.
CommonJS
The calls to require that you're seeing in the React tutorials and other examples are for a module format called CommonJS.
You use require('react') to get a reference to the value exported by the React module (installed into node_modules with npm). This means you need a pre-browser build step like Browserify or Webpack, that can staple all of the modules you need together and output one big script file.
RequireJS
Confusingly, CommonJS and RequireJS use a function with the same name to specify dependencies. You're trying to use the RequireJS require function as though you were working with CommonJS modules.
If you want to import React with RequireJS instead, then you need to something like this:
<script src="js/require.js"></script>
<script>
require.config({
'baseUrl' : 'Scripts/',
});
require(["react-0.14.7", "react-dom-0.14.7"],
function(React, ReactDOM) {
console.log(React, ReactDOM);
});
</script>
When your code executes, RequireJS will go off and add script tags for the modules you've specified. Then once these scripts have loaded, it will pass the values that they export into the callback function for you to use.
Take a look at this project
https://github.com/ORESoftware/hr4r2
it is doing what you want to do - it is using RequireJS + React + TypeScript. And it is doing serverside rendering and is a SPA.
This project is not using Webpack or Babel.
Here is an example by Dan Abramov himself, the creator of Redux in which he makes a react app without using webpack, babel or browserify.
http://codepen.io/gaearon/pen/ZpvBNJ?editors=0010
In your HTML file inside your body tag write
<div id="root">
<!-- This div's content will be managed by React. -->
</div>
And In your script tag type this
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
PS Make Sure You Include These 2 Libraries At Top
https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.js
https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.js
Hope it helps.