1

Create React App without create-react-app !

 2 years ago
source link: https://dev.to/riddhiagrawal001/create-react-app-without-create-react-app-2lgd
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Cover image for Create React App without create-react-app !

Create React App without create-react-app !

Aug 13

・4 min read

The simplest way to create a basic react app is to run npx create-react-app and boom your basic react app will be created but have you ever wondered, can I do that whole process on my own? Well yes, you can.

Pre-requisites: Node js and Vs code. That’s all you need.

Let’s do it ..!!!

1. Open your vs code terminal and run the below commands: 

npm init -y
Enter fullscreen modeExit fullscreen mode

By running this command package.json will be formed which holds important information which is required before publishing to NPM, and also defines attributes of a project that is used by npm to install dependencies, run scripts, and identify the entry point of the project.

npm install react react-dom
Enter fullscreen modeExit fullscreen mode

React will be needed to create user interfaces whereas React-Dom is a glue between React and browser DOM.

After running this command, node_modules and package.lock.json will be created. Node modules hold all the dependencies downloaded from npm. Package.lock.json keeps track of the exact version of every package that is installed as well as the dependency tree of every package.

npm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader
Enter fullscreen modeExit fullscreen mode

Babel is a JS Compiler that converts modern JS code into vanilla Js code that can be supported in older browsers and environments. Babel-loader transpile JS files using Babel and webpack.
For further reading visit https://babeljs.io/docs/en/

2.Create a file .babelrc and copy the code below 

{  
 "presets": [
        "@babel/preset-react",
        "@babel/preset-env"
            ]
}
Enter fullscreen modeExit fullscreen mode

This file is a configuration file for babel whereas presets act as a shareable set of Babel plugins and/or config options.

npm install --save-dev webpack webpack-cli webpack-dev-server
Enter fullscreen modeExit fullscreen mode

Webpack is a tool that lets you compile JavaScript modules, also known as module bundlers.Given a large number of files, it generates a single file (or a few files) that run your app. Webpack-CLI provides the interface of options webpack uses in its configuration file.

npm install --save-dev html-webpack-plugin style-loader css-loader file-loader
Enter fullscreen modeExit fullscreen mode

All these are loaders that help in bundling various files along with webpack.

3.Create a file webpack.config.js and copy the code below 

const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require("path");

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "bundle.[hash].js",
    path: path.resolve(__dirname, "dist"),
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/index.html",
    }),
  ],
  resolve: {
    modules: [__dirname, "src", "node_modules"],
    extensions: ["*", ".js", ".jsx", ".tsx", ".ts"],
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: require.resolve("babel-loader"),
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.png|svg|jpg|gif$/,
        use: ["file-loader"],
      }, 
    ],
  },
};
Enter fullscreen modeExit fullscreen mode

This config file provides all the required information like an entry point,bundle output filename and path , plugins and various loaders that are being used for webpack to bundle and resolve various kinds of files.
For further reading visit: https://webpack.js.org/concepts/

4.Create a folder “src” and inside that create a file “App.js” 

import React from "react";

const App = () => ( 
    <div>
        <h1>Hello React</h1>
    </div>
);

export default App;
Enter fullscreen modeExit fullscreen mode

This is a basic arrow function that returns Hello React wrapped inside an h1 tag.

5.Create a file “index.js” that will be the entry point of our code. 

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

ReactDOM.render(<App/>,document.querySelector("#root"));
Enter fullscreen modeExit fullscreen mode

6.Create another file “index.html” 

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React</title>
</head>

<body>
    <div id="root"></div>
</body>

</html>
Enter fullscreen modeExit fullscreen mode

In our configuration, we specified that it should read ./src/index.HTML as a template. We have also set the inject option to true. With that option, Html-webpack-plugin adds a script with the path provided by Webpack right into the final HTML page. This final page is the one you get in dist/index.html after running npm run build, and the one that gets served from / when you run npm start.

7.In your package.json write the following lines of code in place of the script tag 

"scripts": {
    "start": "webpack serve  --hot --open",
    "build": "webpack --config webpack.config.js --mode production"
  }
Enter fullscreen modeExit fullscreen mode

You can start your react app by writing npm start and you will see a blank page with Hello React written on it.

And you are done ..!!

Now you can customize your React app and add various components to it .

Though it was quite a long process and that’s what create-react-app makes it easier for you. It automates this whole hefty process of making every single file by replacing it with just a single command npx create-react-app filename.


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK