I am teaching myself React.js. For now, I am avoiding having to set up and use node.js, servers, etc. (I want to focus on front-end functionality first). To avoid having to set up my own node server and worry about endpoints, etc., I have been using these CDNs:
<script src="https://unpkg.com/react#15/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom#15/dist/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>
These have worked great so far. But now I am trying to use the React.JS CSS transition library. I tried using cloudflare:
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-transition-group/2.3.1/react-transition-group.js"></script>
But this is not working. This is the only cloudflare link I could find on the topic.
Is there a way to use
<ReactCSSTransitionGroup></ReactCSSTransitionGroup>
without having to set up my own node server?
I would like to be able to pull the library in from a web link. Or if I could get the entire JavaScript file, I could simply put that file in the same folder and try to load from a local folder using:
<script src="ReactCSSTransitionGroup.js"></src>
It seems that there should be a way to use ReactCSSTransitionGroup without having to do npm, command line launch server, express, etc.
This may come too late but just in case somebody else is looking, just like me.
As per https://reactcommunity.org/react-transition-group/, the cdn is at https://unpkg.com/react-transition-group/dist/react-transition-group.js
And you can use <ReactTransitionGroup.Transition>...</ReactTransitionGroup.Transition>
or <ReactTransitionGroup.CSSTransition>...</ReactTransitionGroup.CSSTransition>, and the same goes for SwitchTransaction and TransitionGroup, to do the animation.
I'd suggest using Create React App https://github.com/facebook/create-react-app.
Bundling and tests all taken care of for you. Not the best way to learn about build processes, but it's very fast to get going and you get to install and import from npm. win win in my books.
Just a suggestion, but it will save you a lot of time and hassle if you learn npm and just add things like "ReactCSSTransitionGroup" etc. via npm.
Also Webpack + Babel are part of the build most React developers use.
Check out this article to get up and running: https://www.codementor.io/tamizhvendan/beginner-guide-setup-reactjs-environment-npm-babel-6-webpack-du107r9zr.
Related
I want to prototype a quick app but don't want to go down the road of using a framework like React or Vue. I'd also prefer not just creating an html file and a js file that is imported within the html.
Is there a way I can make use of npm packages, SCSS and still write vanilla Javascript without the usage of a framework?
Without using a framework, the most straightforward way to using NPM packages in the browser would be using Browserify. Check out https://medium.com/jeremy-keeshin/hello-world-for-javascript-with-npm-modules-in-the-browser-6020f82d1072 for instance.
Otherwise you can use Gulp,which helps running Browserify, SCSS etc, and use BrowserSync to refresh on changes. But I personally wouldn't go this way: while this is a great way to understand how stuff works, it takes a bit of time to setup properly, and isn't used that much anymore.
My advice is:
Go with Webpack or Rollup. Seems harder to grasp than Gulp but at the end of the day, learning Webpack is very useful (much more than learning Gulp), for instance if you happen to work on a project that uses it (and there are so many).
Use a backend framework that bundles all this kind of stuff. Like Laravel which uses Mix - you can even use Mix without Laravel but there will be a point at which you'll probably need some static data, some routing, interactions... So if you need something more than just hardcoded JSON data, go with a framework. Laravel is great for prototyping but it's not the only one.
I am currently in the midst of thinking of launching an open sourced version of my library on NPM. However, I'm wondering if there is a way for me to know whether the clients are using my CDN/NPM especially.
Is there anyway that this can actually be done?
I've thought about this and have come up with one idea so far:
Adding a commit tag to the minified file, which allows me to see the commit hash of a version either from NPM, or from our own CDN.
Would be good to hear if anyone else has ideas!
I have a meteor project where I want to include the conversational form framework.
There is a npm package, however it is not properly imported (probably due to some kind of bug). According to the github issue, this:
import cf from 'conversational-form'
does not work, because the export function exports cf.ConversationalForm, not cf (but cf is needed for existing declarations). The form is created and styled, but cannot be addressed in the js.
I was already able to use the framework in a normal html/js/css project, so now I wanted to just include the external script as a workaround.
However, downloading + importing in client/main.js did not work for me.
I've tried:
import '/imports/api/conversational-form.min.js
as well as:
$.getScript
in Meteor.startup.
Do I need to write specific exports in the external .js? I'm far from a professional, so I'm a little hesitant to dissect the external .js.
Any tips on how to simply mimic the html-script-inclusion? Or other ideas on how to get the framework running?
Sincerely, desperate.
Well Meteor allows you many ways to do that, the first ideas that come to my mind are:
Depending on your project structure you can create your own meteor package as a wrapper and internally load the library.
Hardcoding the script tag in you entry point.(Im not sure if this would work to be honest but you can try).
I ended up downloading the script, modifying it to set my options and including it via \imports.
VERY hacky solution, but well, it works...
Meteor allow you to load external library and scope them in all the client
via the /compatibility folder.
Just put the file in there, and it will be scoped automaticaly.
I encountered something debilitating.
I'm pretty far in a project right now, and it definitely needs to be rendered server-side at some point.
The webapp lets users upload pictures such as profile picture and also "regular" pictures.
I'm using Croppie from Foliotek (https://github.com/Foliotek/Croppie) to do the cropping, which works well and is exactly what I need.
But Croppie relies on jQuery. Yesterday I found out that could be an issue if I want to make the app server-side rendered.
All the jQuery is used in ngAfterViewInit lifecycle hooks, so I'm hoping this makes it server-side rendering proof?
I know there is ng2-img-cropper available, but I'm not so keen to implement that one. BUT, if I can use ng2-img-cropper together with server-side rendering then I'll have to.
Or is there something far better I'm overlooking?
You can use jQuery on server, with Node, AFAIK. Just browse npm and search for suitable module. And do not forget, that Node have no DOM implementation, so you need module for virtual DOM also.
For example, you can use this jQuery wrapper with this DOM implementation. Example:
npm install jsdom
npm install jQuery
var jsdom = require('jsdom').jsdom
var myWindow = jsdom().createWindow()
var $ = require('jQuery')
var jq = require('jQuery').create()
var jQuery = require('jQuery').create(myWindow)
$("<h1>test passes</h1>").appendTo("body")
console.log($("body").html());
I found out there is an Angular Universal (server-side rendering) starter project available:
https://github.com/angular/universal-starter
I cloned it and implemented Croppie as I did in my development version and everything works just fine!
So... I wonder why I've read multiple times that things will totally break if using jQuery in your Angular 2+ SSR project. Also Max Schwarzmuller told so in his lectures on Udemy. Anyway. I'm happy to have found everything still works.
as i know, when ever jquery use "Window", ssr gets confused, because in server we don't have window(window is in browser).
but normally, jquery works.
Hello everyone I am wondering if is possible to run two version of ReactJS on the same page , something similar to jQuery.noConflict().
With a bit of research i have found two interesting things :
Two Reacts Won’t Be Friends
While I’m happy that everybody seems to be converging on NPM in 2015 and NPM wants developers to use it for managing front-end dependencies, it still has rough edges. The biggest problem with using NPM for front-end dependencies is that if two packages specify a library like React as a dependency, they might get two separate copies of React. Even worse, they might get different versions of it. This works fine for something like Node, but not for browser libraries that want to mess with the same global mutable DOM! NPM tried to solve this with peerDependencies but all hell broke loose and they’re backing out.
https://medium.com/#dan_abramov/two-weird-tricks-that-fix-react-7cf9bbdef375#.hfx35f6hl
And an issue on github: https://github.com/facebook/react/issues/1939
However is not clear for me how we could wrap & delivery our ReactJS widgets in order they could run without conflicts on a page using other version of ReactJS .
thanks
However is not clear for me how we could wrap & delivery our ReactJS widgets in order they could run without conflicts on a page using other version of ReactJS.
You can use Browserify with reactify to load your JS and version of ReactJS without conflicting with another ReactJS version that may be loaded on the page.
More information is available here:
Embeddable JavaScript widget with React