Before We Get Started
- Navigate to the Node.js website to install the latest version of Node that is recommended to most users. No fancy commands needed, once you download the installer just click next a few times to get started.
- To verify that the node has successfully been installed open your terminal and run the command node -v.
- On your desktop, create a folder and name it react-and-webpack.
- Within your react-and-webpack folder create another folder and name it public.
- Within the public folder create an index.html file. Your index.html file should look identical to this:
- In your public folder create another folder title scripts. Within the scripts folder create a file called app.js
- In your terminal, navigate to the react-and-webpack folder
- When you are in the react-and-webpack folder run the command npm install -g live-server
- Let’s make sure live-server was properly installed. Run the command live-server -v
- In your terminal run the command live-server public. The web page in your browser should look like this.
Setting up Babel
- Using terminal, in your project folder run the command npm install -g babel-cli
- Next, run the command npm init. This sets up our project to use npm and allows us to specify local dependencies. You will then be prompt with a few questions. Go ahead and press enter until you are no longer asked questions.
In the root of the project, you should now have a file titled package.json.
Time to install some Babel presets:
- In there terminal, run the command npm install babel-preset-react babel-preset-env
Your package.json file should now show:
- In your root project folder, create an src folder.
- Within your src folder create a file title app.js.
- Now, make your app.js identical to this
- Navigate to your index.html file
- Above the script tags, add a div element with the id of app
- In the terminal, run the command babel src/app.js –out-file=public/scripts/app.js –presets=env,react. This will enable our application to run JSX code.
- Now run babel src/app.js –out-file=public/scripts/app.js –presets=env,react –watch. Adding watch at the end of the command will enable to the server to auto-generate the application
Your browser should look like this:
In the next article, I will discuss Webpack and its importance in Front End Development. Be sure to check out the article How to Become a Front End Developer.
If you want to get to know me better you can follow me on Instagram, GitHub, or LinkedIn. If you have any questions, you can reach me on my personal site: www.iAmDarronBrown.com. I cover a wide range of topics from tech, to relationships, to self-improvement. Thanks for reading.