I’m watching a video series from O’Reilly (also Addison-Wesley, LiveLessons, InformIT, Pearson) called ReactJS Fundamentals, by Charles David Crawford.
Step 1: Install Node. If you’ve installed Homebrew on a Mac, you can install Node with this:
brew install node
Having installed Node, you now have npm, a package manager for JavaScript.
Step 2: Use npm to create a file, package.json, which you can do simply with this command:
npm init
Since you’re just getting started, you can press Return/Enter for each option until you get back to the bare command prompt. Now you have package.json in whatever directory you’re in.
If instead of just hitting Return you wanted to fill in all the options properly, which of course you would do for a real project, here’s a guide. See also this. The package.json file is going to manage all your dependencies for the project, app, site, whatever.
Step 3: Since you’re starting a ReactJS project, you install it like this:
npm install --save react
This created a new file, package-lock.json, and a new folder, node_modules, inside of which is a whole bunch of crap that ReactJS apparently needs. This is why you had to install Node to get npm, etc. — because ReactJS needs all this stuff.
The guy in the video goes through all of this in less than 4 minutes, which is a bit overwhelming if you’ve never used npm or any of this before now.
Important: In a production environment, where you’re committing changes to GitHub, you will commit package.json, but you will add the folder node_modules to your .gitignore file. The package.json file will handle all the dependencies on the server. Therefore, you do NOT want to commit/upload the node_modules folder.
Step 4: Install even more stuff to make it all work.
In the videos, the guy is using Webpack to smush all the JavaScript into one file, so you have only one <script> tag in your HTML. It doesn’t minify the code, though. More about Webpack.
He’s also using Babel, a JavaScript compiler, to convert ES6 for old browsers. He has separate videos explaining these in some detail.
npm install --save-dev webpack -g npm install --save-dev babel-loader npm install --save-dev babel-preset-es2016 npm install --save-dev babel-preset-react npm install --save-dev react-dom
Yeah, I know — it’s a lot. And we haven’t even learned any ReactJS yet.
Step 5: Create webpack.config.js file and write a bunch of things in it.
I’m dying here. The code is not supplied with the library’s link to these video files. At this point I was getting lost because the guy is running code he’s got in the project, but he hasn’t shown us how to write it. I was able to cobble together working code based on a repo I found on GitHub, but I realized at this point I couldn’t continue this course without the code.
In package.json I’ve got (among other code):
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
}
So when I enter the following command, Webpack is invoked, and Webpack runs Babel:
npm run build
Babel applies ES6 transformations and React transformations (because webpack.config.js tells it to; it’s not automatic, and we did install the presets for those). Webpack also bundles all JavaScript files into one concatenated file, creating or rewriting bundle.js in the build directory. The directories app and build, as well as the filename bundle.js, are all set up in webpack.config.js.
Step 6: OMG another install:
npm install --save-dev webpack-dev-server
This is when I abandoned the ReactJS Fundamentals videos, because the guy opened a new set of files with a bunch of new code, and lacking those files, I couldn’t run anything.
