Create your first React.js application with webpack and babel
Today we are going to kick off the new series of tutorials on leaning React.js. First let me tell you what React js is. well, React.js is one of the awesome JavaScript libraries developed by Facebook to facilitate the creation of interactive, stateful and reusable UI components. Don’t get confused with stateful and reusable UI components for now, we’ll be talking about those in detail later. So let’s just focus on the fundamentals first.
Prerequisites
You are going to need to have a basic knowledge on the JavaScript language and also some ES6 syntax so you can follow along easily. ES6 (EcmaScript 6) is a standard that JavaScript is based on. Basically you can call it a new version or new standard of JavaScript. ES6 has some new features like arrow functions, classes, statements like ‘let’ and ‘const’ etc which you will be needing in Recat.js. That’s pretty much it. Now we can move on to the next part.
Setup your working environment
We will be using npm (node package manager) to manage dependencies and packages, so you need to have node latest version installed on you machine or npx if you have installed npm 5.2.0+ on your machine.
Well, npx is super cool way to call when <command> isn’t already in your $PATHit will automatically install a package with that name from the NPM registry for you and the best part is when it’s done the installed package won’t be anywhere in your globals, so you don’t have to worry about pollution in the long-term.
That means you can use npx to download and execute the binary on the fly when needed which also ensures that you always use the latest version of a generator or build tool without having to upgrade each time you’re about to use it.
That’s little bit about npx so now let’s move on to the next part.
Creating a New Application
As the first step let’s create a basic react app with create-react-app. It is the best and easiest way to create a quick and reliable React boilerplate.
So just create a directory and follow those steps to create your very first react application
npm install -g create-react-appcreate-react-app my-app
cd my-app/
npm start
or now that you know what npx is, you can use npx with below steps.
npx create-react-app my-app
cd my-app
npm startAlright, now let’s see what we have,
When you open the folder structure you’ll see something like this,
When you create this basic application using create-react-app it just creates a frontend build pipeline for you. The fun part comes in when you are going to need backend logic or databases, therefore you will need build tools like Babel and webpack. So first let’s just understand what they are and what they have to do with our application.
First let me tell you what webpack is, well basically webpack is a module bundler. It takes modules in your project with dependencies and generates static assets representing those modules. Explain it more!! Okay so webpack bundles your client-side code like JavaScript, css, and etc into a single JavaScript file. Webpack is highly configurable with plugins, allowing you to bundle nearly any kind of asset in your project.
Webpack is a huge topic, you can read more about webpack from their documentation but here is how it works briefly, when you provide with an entry file to webpack like the JavaScript file to run first (index.js), it will analyze the file and determine which other files it depends on via calls to require. It then cleverly concatenates all necessary files into a single file. After this bundling process it will import them to our HTML files
