Installing React in Meteor: Atmosphere or NPM - node.js

I have been installing React into Meteor projects using
npm install --save react react-dom
What is the difference between doing that and using a package from Atmosphere:
meteor add reactjs:react

It's more like a consistency assumption rather a real deal.
You may install react via bower , NPM , Atmosphere or even by cloning the repository.
In my projects, I had clarified dependency management as:
Use NPM for backend dependencies ( using Node.js ) or frontend dependencies that require a building / piping / bundling system like Babel, Webpack or Gulp.
Use Bower for "presentation" dependencies like Bootstrap, jQuery or prebuilt modules used as is.
Use any additional package management tool for any further dependency injection.
TL;DR
There are no differences between the two approaches ( although Atmosphere is not mentioned as a proper way to install / build React into the official docs)
If you prefer to keep React rendered in the browser use NPM or Bower. If you need to use React mapped into Meteor backend's code as an isomorphic app you may use Atmosphere as it is semantically used as a dependency.

Related

Should I save or save-dev client-side webpacked dependencies?

I have dependencies that are only getting used client-side (and are getting packed into dist files on compilation through webpack). Should I save them as dev dependencies or just regular dependencies?
I'm just thinking in a server environment I'd have to recompile each time I update. Or would I? Does anyone have any pointers?
I would suggest using --save in your situation. --save is for those packages being used in production and --save-dev for those used when you are developing your app.
--save is used to save packages required for the application to run.
Here's an article for more details on what it means for a package to be a development dependency vs a dependency.

What should I install for react and babel?

Trying to install react with Babel. What is the difference between all of these installs? Which ones should I choose?
npm install --save-dev babel-preset-react
npm install --save-dev babel-preset-es2015
npm install --save-dev babel-cli
npm install --save-dev babel-core
npm install --save-dev babel-preset-env
EDIT:
I'm working from this tutorial:
https://facebook.github.io/react/docs/installation.html
which says to install babel-preset-react and babel-preset-es2015, but when I go to https://babeljs.io/docs/setup/, or any other site, everyone has a different idea of what to install.
I'm guessing, but most likely you're working from a React tutorial and wondering what you're installing. You can look up each of these modules on npmjs.com, the web frontend for npm repository.
Babel is ECMAScript2015 (aka: ES6) pre-processor that converts ES6-style javascript to ES5-style so that it can be run in browsers that don't support all the ES6 features yet. Features such as module importing, arrow functions, generators, etc. It is most likely part of a webpack build which, among other things, will expand your react jsx templates inside your components as well as "babelify" your source.
React generally encourages modular design using ES6 so it's necessary to follow their patterns and still have the code run reliably in browsers.

What is the difference between node.js runtime and npm package manager options while installing node.JS?

I am trying to install node.js by downloading the .exe file, I am confused and stuck on the Node.js setup where in it asks to install node.js runtime or npm package manager so I want to proceed through the installation after knowing fully the difference between the two.
My question is what is the difference between node.js runtime and npm
pacakage manager and what are all the features do I get on the two
options.
My basic purpose of installing node.js is to compile Typescript, Please help me to understand the features of the two package
First of all, it does not ask you to install Node.js runtime OR npm package manager, it offers you to install them both (if you want)
Now, Node.js runtime is basically what will understand your javascript code and execute it to produce a result.
Npm package manager is a tool which will allow you to install third party libraries (other people's code) by using the command line.
npm install express
will install the framework called express for example.
Node JS
Node.js is a platform built on Chrome's JavaScript runtime for easily
building fast, scalable network applications.
Real-Time services (Chat, Games etc)
NPM
Npm is a package manager. Typically this software is installed to
build Node applications.
It let's you install software (libraries, plugins, frameworks and
applications).
Node.js or Node is an open-source, cross-platform, JavaScript runtime environment(JSRE) that executes JavaScript code outside of a web browser.
npm is a package manager(like Nuget package manager in .NET -Microsoft ) for the JavaScript programming language. It is the default package manager for the JavaScript runtime environment Node.js.
You can differentiate them by finding their version using below code.
node --version
npm --version
node is a framework that can run JavaScript code on your machine while npm is a package manager. Using npm we can install and remove javascript packages also known as node modules. Now, it is not a rule that you should use npm to install and remove node modules. We can use yarn also. npm and yarn are capable of the following:
Read and understand package.json file
Download and put javascript modules in node_modules folder.
Run scripts mentioned in package.json such as starting a node server, running in dev and production mode, running scripts for unit testing etc.
npm by default run node server.js; if you didn't specify scripts in the package.json
"scripts": {
"start": "node your-script.js"
}
Which means npm run node
if you need use yarn, you'd better choose node.js runtime, usually the default choice is a better one for beginner //TAT

relationship between webpack, npm, bower, gulp

I have recently just went in web-development and heard about these tools, I still confusing about it even I done research after, and also I have some questions as well. this is the following research I have done if there are something wrong please correct me.
Webpack is replacing bower and gulp
Bower was use to manage front end lib(eg: bootstrap), which gulp was use to manage backend lib(eg: backbone.js )
In some big project people still use gulp because give more control of the project
npm is the package manager for JavaScript.
If I want to I can install bootstrap from either npm or bower or gulp.
People choose to use bower and not just npm to install bootstrap is because npm does nested dependency tree, which Bower requires a flat dependency tree, which means faster.
Webpack replacing bower and gulp is because those are overkilling people's time.
The last thing is a question, I saw on youtube people download sass sass(which I understand is a front end thing tool)eg:(npm install gulp gulp-sass --save-dev) in gulp and then not using bower, is that even the the right way to do things? because if yes why do we still need to use use bower?
Webpack can be an alternative for gulp. Webpack doesn't do anything Bower does.
Bower was often used to manage frontend dependencies (eg, bootstrap), while npm was often used to manage backend dependencies (eg, express).
People use gulp because it's worked out for them so far, and the time/effort it takes to learn something else and switch to something else might not be worth it.
npm is a package manager for dependencies, but it isn't exclusive to JavaScript dependencies.
You can install bootstrap with Bower or npm.
Starting with version 3, npm installs everything in a flat hierarchy. You can use npm to manage dependencies that are used on the frontend AND backend, so some people don't see the point in having Bower.
Webpack can be an alternative to Gulp, but a lot of people had a hard time learning how to use Webpack.
Yes, you would npm install gulp-sass --save-dev, which installs gulp-sass with npm. I imagine gulp-sass is a tool that lets you use SASS and Gulp together. You wouldn't use Bower in any of this.

Where do I install a package with npm in Meteor 1.3 so that other npm libraries can require it

I’m trying to get set up with cloudinary in Meteor 1.3 beta, and I’m going for an NPM package right now. I’ve run in to a larger problem where in one of the package libraries there is a declaration crypto = require('crypto'); Which is fine. I just installed the crypto package through npm. But the client is still giving me the error Uncaught Error: Cannot find module 'crypto' . … any suggestions?
Note, both modules are in the same node_modules directory:
node_modules
crypto
material-ui
react
react-cloudinary
react-dom
react-mounter
react-tap-event-plugin
This is particularly a Meteor 1.3 issue since I’m importing npm libraries
If module A requires module B than module B needs to be available in the node_modules directory of module A. That's the usual thing that npm and node do and that you're probably familiar with. It works the same way in meteor 1.3.
If you are the developer of module A than you can look at peer dependencies in npm or npm link. Or you just run npm install in the module and see if that fixes the problem.
The NPM package crypto can only be used on the server side because it's a built-in library of NodeJS. It's a high-performance library so perhaps it's compiled.
If you can change the code you could instead use a pure js library for creating hashes such as JS Hashes.
JS Hashes can be used on the client-side as well as the server-side.

Resources