by When we want to start a ReactJS project, there is a simple npm command: ‘create-react-app’. Thanks to this command we can easily set up the project and start it. However, what if we wanted to know what is going on under the hood? What are dependencies being installed and why are they being needed? If you are searching the answers for these questions like me, let’s figure them out.
Yes. As we said, there is a simple command to start a ReactJS app. Let’s look at this first.
npx create-react-app my-app
cd my-app
npm startWhen we run these commands, our project will be ready for development. ‘create-react-app’ command installs some required dependencies for us. Now. Forget this command and let’s start our ReactJS app from scratch.
mkdir react-app
cd react-app
npm init -yWe created a new directory and ‘package.json’ in it with accepting all default project info.
Firstly and of course, we need to install ‘react’ and ‘react-dom’.
npm install --save-prod react react-domAlso, we need Babel to translate our ES6+ code to ES5 that is the most supported specification by the browsers.
npm install --save-dev @babel/core @babel/preset-env @babel/preset-reactWhat are these packages?
- @babel/core: As on the name. It is the core of Babel.
- @babel/preset-env: It is the smart preset (an array of Babel plugins) that helps us to use required plugins for our environment.
- @babel/preset-react: It adds ‘jsx’ support for the code translation.
Additional to these packages we will create a config file that Babel needs. Babel supports project-wide config file with the name ‘babel.config.json’.
touch babel.config.jsonThen edit the file as follow.
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
}Babel will recursively search and will find our config file.
Finally, we need Webpack to bundle all of our source files and assets.
npm install --save-dev webpack webpack-cli webpack-dev-serverWow again?. What are these packages?
- webpack: It is the core of the Webpack.
- webpack-cli: Webpack command-line interface.
- webpack-dev-server: It provides us simple development server to serve and test our UI.
And, if we use Webpack, we will also need to use loaders and plugins.
npm install --save-dev babel-loader css-loader style-loader html-webpack-pluginLoaders and plugins help us while bundling our project. Webpack uses these to be able to process the files. Let’s look at them.
- babel-loader: To process the source code files that is written in ES6+.
- css-loader and style-loader: To process ‘css’ files.
- html-webpack-plugin: To use ‘html’ files as template.
As in Babel, we will create our custom Webpack config file with the name ‘webpack.config.js’.
touch webpack.config.jsThen edit the file as follow.
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
entry: path.resolve(__dirname, "app.js"),
output: {
path: path.resolve(__dirname, "build"),
filename: "bundle.js",
publicPath: "/"
},
mode: "development",
devtool: "inline-source-map",
devServer: {
contentBase: path.resolve(__dirname, "build"),
historyApiFallback: true,
port: 8080
},
plugins: [
new HtmlWebpackPlugin(
{
template: path.resolve(__dirname, "index.html"),
filename: "index.html"
}
)
],
module: {
rules: [
{
test: /.js$/,
exclude: /(node_modules)/,
use: "babel-loader"
},
{
test: /.css$/,
use: [
"style-loader",
"css-loader"
]
}
]
}
};This Webpack config file can be new a topic for another article. We will come together for it later.
Well. Where are our source files? Let’s create them.
touch index.html app.js app.cssThen edit them as follow.
// index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React App From Scratch</title>
</head>
<body>
<div id="app-root"></div>
</body>
</html>// app.js
import React from "react";
import ReactDOM from "react-dom";
import "./app.css";
const appRootElement = document.getElementById("app-root");
const GreetingComponent = () => {
return (
<div>
<h1>React App From Scratch</h1>
<p>Hello from react app :)</p>
</div>
);
}
ReactDOM.render(<GreetingComponent />, appRootElement);// app.css
h1 {
color: brown;
}
p {
font-style: italic;
}We are done. There is a final command to start up the project.
npx webpack-dev-server --openThis command will bundle our project and open the browser automatically then serves our UI from the port 8080 (specified in Webpack config file).
