Checking the versions of your packages in your Node app
There is a package for everything in life ^^ Install npm-check-updates or use it directly with npx.
npx ncu
There is a package for everything in life ^^ Install npm-check-updates or use it directly with npx.
npx ncu
Node.js strongly recommend using a Node version manager like n to install Node.js and npm. They do not recommend using a Node installer, since the Node installation process installs npm in a directory with local permissions and can cause permissions errors when you run npm packages globally.
Install n directly from Github:
curl -L https://bit.ly/n-install | bash
Then check your versions (remember than node comes with npm)
node --version && npm --version
Note: if you are already having problems, first remove everything related with Node.js and NPM
Use rsync and exclude node_modules:
rsync -rv --exclude=node_modules my_projects /media/my_name/Seagate\ Expansion\ Drive/
-rv stand for recurse into directories and increase verbosity (see more info while copying)
Make things easy with package n.
n latest
How to deal with the React Setup fatigue? I have seen many tutorials out there, many of them complex and outdated, therefor I would like to bring you my best with a basic working setup.
First of all, I suppose that you know at least what is Node, NPM, React, Babel and Webpack, I know, I know, the headline is about React but we cannot use React as we use JavaScript directly in the browser, although React is JavaScript, it has extra things like JSX for example that can not be execute directly in the browser.
Ok, that’s all, so, why do we need also Node and NPM? Everything is linked. You need to install them before continue with the setup.
Don’t be panic, things look difficult when you don’t know anything about them at first, but as soon as we dive into them you will see that they are not (that much :P).
const HTMLWebpackPlugin = require('html-webpack-plugin') const HTMLWebpackPluginConfig = new HTMLWebpackPlugin({ template: './app/index.html' }) module.exports = { entry: './app/index.js', output: { filename: 'transformed.js', path: './build' }, module: { loaders: [ { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' } ] }, plugins: [HTMLWebpackPluginConfig] }
So far, we have set up our environment, let’s test it.
const React = require('react') function App() { return <h1>Yuhuu, It is working</h1> } module.exports = App
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>React example</title> </head> <body> <div id="app"></div> </body> </html>
const React = require('react') const ReactDOM = require('react-dom') const App = require('./components/App') ReactDOM.render( <App />, document.getElementById('app') )
Welcome to React! Try to change our component and you will see how everything changes on the fly 🙂
You have learned how to deal with React configuration from scratch. You spent a lot of time but not code for your app at all.
No configuration or complicated folder structures, just the files you need to build your app.
Create Apps with No Configuration: Welcome to Create React App!