Photo by Lautaro Andreani on Unsplash
Beauty of Creating React App, without create-react-app
The hidden world behind "npx create-react-app" 🫥
While creating react app, one of the most common ways of creating react app, is executing npx create-react-app command. We all know that this is the fastest way to setup react in your project, but at the same place, it hides you from most of behind the scenes working of react bundlers. 🫢
Did you hear this word "bundler" for the first time? 🤔
There are many more things, you didn't know about, because of building everything so fast, we even don't care about what's happening behind the scenes.
But here, we will setup react app without CRA, covering topics like project structure, Webpack, Babel setup, and installing essential React dependencies.
1. Project Setup
Ensure you have Node.js and npm installed on your computer.
First, we create a new directory for the project and navigate to it in terminal. This step creates a folder where all our project files will be located.
then initialize this project with new package.json file, for storing dependencies.
this type of content will be there in your package.json file:
2.Install React and ReactDOM
Now, we install the libraries which are the core React libraries: react and react-dom.
These libraries are essential to create React components and rendering them in browser.
3. Babel Setup
Babel is JavaScript transpiler that let us write in latest language feature and converts the latest JavaScript code into traditional compatible code while maintaining support for older browsers.
Make sure to install them in devDependencies.
Create a .babelrc configuration file in project's root directory. This file tells which preset to use when transpiling you code.
Here, @babel/preset-react: Used for transpiling JSX syntax in React applications.@babel/preset-env: It will apply the necessary transformations based on the environment settings or browser targets you specify
4. Webpack Configuration
Webpack is a module bundler that processes and bundles your application’s assets, such as JavaScript, CSS, and images. It takes your source files and creates a single, optimized output file for the browser.
Install the required Webpack dependencies also in devDependencies:
Create webpack.config.js file in project's root directory. This tells webpack how to process and bundle your project files.
const HtmlWebpackPlugin = require('html-webpack-plugin'); const path = require('path');module.exports = { mode: 'development', entry: './src/index.js', output: { filename: 'bundle.js', }, module: { rules: [ { test: /\.(js|jsx)$/, exclude: /node_modules/, use: { loader: 'babel-loader', }, }, { test: /\.css$/, use: ['style-loader', 'css-loader'], }, ], }, resolve: { extensions: ['.js', '.jsx'], }, plugins: [ new HtmlWebpackPlugin({ template: './public/index.html', }), ],devServer: { static: { directory: path.join(__dirname, 'dist'), }, hot: true, open: true, }, };
mode: Sets the mode for the build process (developmentorproduction).entry: Specifies the entry point for your application.output: Defines where the bundled files will be saved.module.rules: Determines how different file types should be processed.resolve.extensions: Specifies which file extensions Webpack should resolve.plugins: Configures additional plugins, such as theHtmlWebpackPlugin.devServer: Sets up the development server configuration.
5. Creating Basic Project Structure
react-app/
├── public/
├── index.html
├── src/
├── App.js
├── index.js
├── .babelrc
├── package.json
├── webpack.config.js
Create simple index.js file inside public folder. This file server as main HTML template for your webpage. Make sure to maintain the folder structure as provided.<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My Custom React App</title> </head> <body> <div id="root"></div> </body> </html>
Create one index.js file inside src/ folder. This file is the entry point of your application and is responsible for rendering the root React component.
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; ReactDOM.render(<App />, document.getElementById('root'));
Create an App.js file inside the src folder. This file defines the main App component, which can be used to build rest of application.
import React from 'react';const App = () => { return <div>Hello, world!</div>; }; export default App;
Now, mostly your work is completed, but now to run your app, add few scripts inside your package.json file
"start": "webpack serve --mode development", let's you run your application in development mode.
"build" "webpack --mode production" will run the application in build mode and will create dist folder in your project.
First, run script npm run build to make the project run in once build mode.
Then run npm start and BOOM!! your react app starts.
6. Conclusion
Scratching your head, what you just did? You just did the work of create-react-app, what it does behind the scenes.
Now you know about bundlers, babel, how they work together and how you react app is sent to browser. For at least once you should know that just writing npx create-react-app is very simple but starting react server from scratch really boost your knowledge.