Build React the Old School Way
The React website (https://reactjs.org/docs/add-react-to-a-website.html) lists a couple of ways to add React to a web app that differ from the manual shell script specified in Stoyan Stefanov’s book (https://amzn.to/2YIJD27), which is the book I used to learn React a while ago. Unfortunately, updates to React and Babel prevent the original shell script in that book from working.
I still think it’s worth knowing what’s going on in the compile / bundle process rather than having it all hidden away with the two methods on the React website, so let me show you a way to update the script so that it works with React apps today.
Create the following shell script called build.sh (or whatever you want). Also, change the css bundling to fit your particular director structure, and the name of the js app file to whatever you use. The echo date line is just to see the finished time in the terminal.
And add the dependencies to your package.json.
Now run npm install to get everything installed, but remember this installs things locally in your project folder, not globally, so Babel and Browserify won’t run on the command line (as your project folder isn’t in your $PATH variable). So add your build shell script to the the “scripts” section of package.json.
Then, to run it, navigate to your project folder in your Terminal and type npm run build. This will run the shell script and find the executables in the appropriate places in your node_modules folder. Old school build method!
Hope this helps! Follow my blog for more tips and insights!
Disclosure of material connections: Some of the links in the post above are “affiliate links”. This means if you click on the link and purchase the item, I will receive an affiliate commission. Regardless, I only recommend products or service I use personally and believe will help you out! I am disclosing this to comply with Federal Trade Commission 16 CFR 255.
Some of the products or services mentioned here may be claimed as trademarks. All trademarks are the property of their respective owners.
