{"id":48,"date":"2021-12-29T16:00:55","date_gmt":"2021-12-29T16:00:55","guid":{"rendered":"http:\/\/frontendguruji.com\/?p=48"},"modified":"2022-07-01T18:13:03","modified_gmt":"2022-07-01T18:13:03","slug":"how-to-setup-react-project-without-create-react-app","status":"publish","type":"post","link":"https:\/\/frontendguruji.com\/blog\/how-to-setup-react-project-without-create-react-app\/","title":{"rendered":"How to setup React project without create-react-app [ Best way to learn React environment] [react-router-dom v6]"},"content":{"rendered":"\n

Hello Friends! 🙏. React JS Tutorial<\/strong> we will setup React project without create-react-app<\/strong> command😎, this is the best way to learn React as we will setup react environment<\/strong> and will explore react project dependencies<\/strong>. <\/p>\n\n\n\n

React JS project can be setup using only one command <\/a>& it only takes few minutes🚀 . Everyone use it & while command does its magic, all sit relaxed on their chair enjoing whatsapp\/Music… whatever… depends on your network speed🤣 . But in this tutorial, we will setup react project from scratch.<\/p>\n\n\n\n

Chalo suru kiya jaye!<\/strong>🍻 Lets start! <\/strong>🕺<\/p>\n\n\n\n

Step 1: Install\/Upgrade\/Verify Node<\/h2>\n\n\n\n

To start with setup React project, first please verify if your machine has node v >= 14 & npm v >=5.6.
If not, then install node package here<\/a>.<\/p>\n\n\n\n

While upgrading node package on my machine to latest version: 16.13.1 which includes npm 8.1.2, I faced one issue, may be you also get this type of error, check here to resolve it: WARN npm does not support Node.js v16.13.1<\/a><\/p>\n\n\n\n

Step 2: Initialize a folder<\/h2>\n\n\n\n

So friends! first thing we have to do is to create a blank folder 📁 & initialize it using below command<\/p>\n\n\n\n

npm init<\/code><\/pre>\n\n\n\n
This command will run a wizard of questions\/choices related to the project & we have to answer\/select them. This basically creates a package.json<\/strong> file which will include all our answers\/selections.<\/p>\n\n\n\n
\"React<\/figure>\n\n\n\n
Step 3: Adding React Project Dependencies<\/h2>\n\n\n\n
Adding React<\/h3>\n\n\n\n
To use React we need core react<\/strong> package that contains the functionality needed to define React components.
Then we need renderers like react-dom<\/strong> to render the app on the web browser, or react-native<\/strong> to render the app on iOS\/Android environment. 
In our case we need react-dom as we are building for the web browser.
And lastly react-router-dom<\/strong> to handle routing in the application , it contains DOM bindings for React Router. <\/p>\n\n\n\n
As we have installed the latest  react-router-dom<\/strong>  package i.e. v6, there are many breaking changes. I got to know about these breaking changes when I got stuck in a issue: WARN export \u2018Switch\u2019 (imported as \u2018Switch\u2019) was not found in \u2018react-router-dom\u2019<\/a>. So better read the v6 documentation before diving into it 😎. <\/p>\n\n\n\n
npm install react react-dom react-router-dom<\/code><\/pre>\n\n\n\n
Adding Babel – JS Compiler<\/h3>\n\n\n\n
Babel is a compiler which converts ES6 code to ES5 code, so that older browser can also run the application.
So basically It lets us write modern JavaScript code that still works in older browsers.<\/p>\n\n\n\n
npm install --save-dev @babel\/core @babel\/cli<\/code><\/pre>\n\n\n\n
babel\/core<\/strong> contains the main babel functionality i.e. converting the modern JS to ES5.
babel\/cli <\/strong>is used to run babel from command line using its inbuild commands<\/p>\n\n\n\n
npm install --save-dev @babel\/preset-env @babel\/preset-react<\/code><\/pre>\n\n\n\n
These presets tells babel to target specific type of code, like in our case we want to convert ES6+ and JSX code to ES5 code which is needed for React project. We will use these presets while doing configurations later in this tutorial.<\/p>\n\n\n\n
Adding Webpack – Bundler<\/h3>\n\n\n\n
Webpack is a bundler for modern JS projects, this basically combines all the modules used in the project to one or multiple bundles<\/p>\n\n\n\n
npm install --save-dev webpack webpack-cli webpack-dev-server<\/code><\/pre>\n\n\n\n
webpack <\/strong>contains the core functionality and webpack-cli<\/strong> is to run webpack from command line.
webpack-dev-server<\/strong> is to view projet in browser locally while development.<\/p>\n\n\n\n
By default Webpack process only JS files and to process other assest like images, CSS & HTML it requires loaders, below are some basic  loaders:<\/p>\n\n\n\n
npm install --save-dev babel-loader html-loader style-loader css-loader\n<\/code><\/pre>\n\n\n\n
babel-loader<\/strong>: loader for babel files
html-loader<\/strong>: loader for HTML files
css-loader<\/strong>: loader for CSS files
style-loader<\/strong>: loader to inject styles into DOM<\/p>\n\n\n\n
Optional<\/em>: To use CSS preprocessors like SCSS, you will have to install sass-loader<\/strong>.<\/p>\n\n\n\n
npm install --save-dev sass-loader sass<\/code><\/pre>\n\n\n\n
By default Webpack bundles CSS into JS, to generate seperate CSS file, you will have to install mini-css-extract-plugin<\/strong><\/p>\n\n\n\n
npm install --save-dev mini-css-extract-plugin\n<\/code><\/pre>\n\n\n\n
Now we need a HTML page to inject all the files\/bundles generated by Webpack. For that we need to add html-webpack-plugin<\/strong>.<\/p>\n\n\n\n
npm install --save-dev html-webpack-plugin<\/code><\/pre>\n\n\n\n
Now our package.json<\/strong> file looks like this:<\/p>\n\n\n\n
\"React<\/figure>\n\n\n\n
That’s all in the dependencies 😅, lets jump to create an App then some configurations and then will try to run it 🕺.<\/p>\n\n\n\n
 Step 4: Creating ‘Hello World’ React App<\/h2>\n\n\n\n
Create src <\/strong>folder📁 and then create a component App.js<\/strong> in it.<\/p>\n\n\n\n
\/\/ src\/App.js<\/strong>\nimport React from \"react\";\n\nconst App = () => {\n   return <div className=\"message\">Hello, World!<\/div>;\n};\n\nexport default App;<\/code><\/pre>\n\n\n\n
Now create a style for the App component styles.scss<\/strong>.<\/p>\n\n\n\n
\/\/ src\/styles.scss<\/strong>\n.message {\n    text-align: center;\n    font-size: 30px;\n}<\/code><\/pre>\n\n\n\n
Now we need to create the main entry file (index.js<\/strong>) which will render the app in a DOM element having id=”root<\/strong>“, this element we will create later in this tutorial. This rendering is done by react-dom<\/strong>.<\/p>\n\n\n\n
\/\/ src\/index.js<\/strong>\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport { BrowserRouter, Route, Routes } from \"react-router-dom\";\n\nimport App from \".\/App.js\";\nimport \".\/styles.scss\";\n\nconst routing = (\n  <BrowserRouter>\n    <Routes>\n      <Route path=\"\/\" element={<App \/>} \/>\n    <\/Routes>\n  <\/BrowserRouter>\n);\n\nReactDOM.render<\/strong>(routing, document.getElementById(\"root<\/strong>\"));<\/code><\/pre>\n\n\n\n
Step 5: Configure Webpack<\/h2>\n\n\n\n
Now we will have to configure webpack, webpack-dev-server, loaders and plugins that we installed above 😅, lets start!<\/p>\n\n\n\n
Create a blank webpack configuration file webpack.config.js<\/strong>  in the root folder and start adding the below configurations.<\/p>\n\n\n\n
Below is the main configuration for webpack<\/strong>, here you have to give the entry<\/strong> point of the file (index.js<\/em> in our case) and output <\/strong>path for the generated bundles (dist <\/em>in our case). Empty configurations like devServer, rules, plugins, optimization will configure one by one below.<\/p>\n\n\n\n
\/\/ \/webpack.config.js<\/strong>\n\/\/ imports\nconst path = require('path');\n\n\/\/ module\nmodule.exports = {\n  mode: 'development',\n  entry<\/strong>: '.\/src\/index.js<\/strong>',\n  output<\/strong>: {\n    path: path.resolve(__dirname, 'dist<\/strong>')\n  },\n  devServer: {},\n  rules: [],\n  plugins: [],\n  optimization: {}\n};<\/code><\/pre>\n\n\n\n
Now we will configure loaders<\/strong> in module rules: [] <\/strong>defined above<\/p>\n\n\n\n
Configure SCSS<\/strong>.<\/h3>\n\n\n\n
Note: Loaders are evaluated\/executed from bottom to top.<\/em>
Here execution starts with sass-loader, continues with css-loader and finally ends with style-loader.<\/p>\n\n\n\n
{\n  test:\/\\.scss$\/,\n  use: [{\n      loader: 'style-loader'\n    },\n    {\n      loader: 'css-loader'\n    },\n    {\n      loader: 'sass-loader'\n    }\n  ]\n}<\/code><\/pre>\n\n\n\n
Configure Babel<\/strong><\/h3>\n\n\n\n
babel-loader<\/strong> configuration. 
options.preset<\/strong> will tell babel to use these presets while compiling the code.<\/p>\n\n\n\n
{\n  test: \/\\.(js|jsx)$\/,\n  exclude: \/(node_modules)\/,\n  use: {\n    loader: 'babel-loader',\n    options: {\n      presets: [\"@babel\/preset-env\", \"@babel\/preset-react\"],\n    },\n  }\n}<\/code><\/pre>\n\n\n\n
html-loader<\/strong> configuration<\/p>\n\n\n\n
{\n  test: \/\\.html$\/i,\n  loader: \"html-loader\",\n}<\/code><\/pre>\n\n\n\n
Configure plugins<\/strong><\/h3>\n\n\n\n
mini-css-extract-plugin<\/strong> will extract the styles from bundle and generates a seperate file styles.css in the dist folder.
html-webpack-plugin<\/strong> will create html file at dist\/index.html<\/strong> and will automatically inject all the webpack generated files along with the CSS gerenated by mini-css-extract-plugin.<\/p>\n\n\n\n
\/\/ add in imports<\/strong>\nconst MiniCssExtractPlugin = require(\"mini-css-extract-plugin\");\nconst HtmlWebpackPlugin = require('html-webpack-plugin');\n\n\/\/ add in plugins array<\/strong>\nnew MiniCssExtractPlugin(),\nnew HtmlWebpackPlugin({\n  template:\".\/src\/index.html<\/strong>\"\n})\n\n\/\/ modify the CSS loader configuration<\/strong>\n{\n  test: \/\\.scss$\/,\n  use: [{\n      loader: \"style-loader\"\n    },\n    {\n      loader: MiniCssExtractPlugin.loader,\n      options: {\n        esModule: false,\n      },\n    },<\/strong>\n    {\n      loader: \"css-loader\"\n    },\n    {\n      loader: \"sass-loader\"\n    },\n  ],\n}\n\n\/\/ update optimization property<\/strong>\noptimization: {\n  splitChunks: {\n    cacheGroups: {\n      styles: {\n        name: \"styles\",\n        type: \"css\/mini-extract\",\n        chunks: \"all\",\n        enforce: true,\n      },\n    },\n  },\n}\n<\/code><\/pre>\n\n\n\n
Use of  esModule: false<\/strong> in above configuration<\/em>: while compiling the App I was getting some warnings related to mini-css-extract-plugin<\/strong> you can check that here: WARN export \u2018default\u2019 (imported as \u2018content\u2019) was not found <\/a>.<\/p>\n\n\n\n
For  html-webpack-plugin<\/strong> we need to create a html template which will be used by this plugin to inject the scripts & styles generated by webpack. For tha create index.html<\/strong> file inside src folder 📁. This html will contain the element having id=”root<\/strong>“, this will be the element where app will load using react-dom.<\/p>\n\n\n\n
<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" \/>\n    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" \/>\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\n    <title>Hello World App<\/title>\n  <\/head>\n  <body>\n    <div id=\"root<\/strong>\"><\/div>\n  <\/body>\n<\/html>\n<\/code><\/pre>\n\n\n\n
Now configure webpack-dev-server<\/strong>. It needs directory <\/em>which must be path to the dist <\/strong>folder and a port <\/em>to run on. If you want webpack to open the App in browser automatically provide open: true<\/strong>.<\/p>\n\n\n\n
devServer: {\n  static: {\n    directory<\/strong>: path.join(__dirname, 'dist'),\n  },\n  port<\/strong>: 9000,\n  open: true\n}<\/code><\/pre>\n\n\n\n
Check here the final webpack.config.js<\/strong> file<\/a>.<\/p>\n\n\n\n
Step 6: Adding build commands<\/h2>\n\n\n\n
To build or run the project we will have to add some commands in package.json file under scripts property.<\/p>\n\n\n\n
\"scripts\": {\n  \"start\": \"webpack-dev-server\",\n  \"build\": \"webpack\"\n}<\/code><\/pre>\n\n\n\n
start <\/strong>command will execute webpack-dev-server which will build the project in memory<\/em> and load the page on the browser. 
build<\/strong> command will build the project in dist <\/em>folder with all the files.<\/p>\n\n\n\n
Check here the final package.json<\/strong> file<\/a>.<\/p>\n\n\n\n
Now the final moment😅 🥳🥳 <\/p>\n\n\n\n
npm run start \/\/ to start the app in browser\nnpm run build \/\/ to generate the dist folder with files<\/code><\/pre>\n\n\n\n
\"React<\/figure>\n\n\n\n
And in source view, you can see the injected JS and Style file.<\/p>\n\n\n\n
\"React<\/figure>\n\n\n\n
👉Checkout the project here.<\/a> <\/p>\n\n\n\n
Thats all in this React JS tutorial<\/strong>, here we learned how to setup react project without create-react-app<\/strong> and also covered how to configure webpack<\/strong>, configure babel<\/strong>, configure Webpack loaders and plugins<\/strong>, added build commands<\/strong>. <\/p>\n\n\n\n
❓If you have any question or suggestion, please feel free to comment.<\/p>\n\n\n\n
👉 Do you know we can setup React App inside a docker container, check here!<\/a><\/p>\n\n\n\n
Thanks🙏. <\/p>\n","protected":false},"excerpt":{"rendered":"
In this React JS tutorial, you will learn how to setup react project without create-react-app and also how to configure webpack, configure babel, configure Webpack loaders and plugins and add build commands.<\/p>\n","protected":false},"author":1,"featured_media":186,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"default","ast-global-header-display":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":""},"categories":[4],"tags":[29,21,18,7,43,35,13,38,37,23,36],"_links":{"self":[{"href":"https:\/\/frontendguruji.com\/blog\/wp-json\/wp\/v2\/posts\/48"}],"collection":[{"href":"https:\/\/frontendguruji.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/frontendguruji.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/frontendguruji.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/frontendguruji.com\/blog\/wp-json\/wp\/v2\/comments?post=48"}],"version-history":[{"count":0,"href":"https:\/\/frontendguruji.com\/blog\/wp-json\/wp\/v2\/posts\/48\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/frontendguruji.com\/blog\/wp-json\/wp\/v2\/media\/186"}],"wp:attachment":[{"href":"https:\/\/frontendguruji.com\/blog\/wp-json\/wp\/v2\/media?parent=48"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/frontendguruji.com\/blog\/wp-json\/wp\/v2\/categories?post=48"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/frontendguruji.com\/blog\/wp-json\/wp\/v2\/tags?post=48"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}