how to Create a React project without create-react-app : Creating and running a React project from scratch can sometimes be a little tricky, even if it’s not your first time starting a React project . That’s why we use create-react-app , a command that prepares and installs all the components and modules for us, and once this process is complete, the app is ready.

create-react-app is great to get started with though, especially for those who are new to the React world or don’t want to spend time setting everything up. But it is interesting to know that there is another item that does these things for us.

 

you may also like reading on irabrod:

what you need to know to develop a website

how to install windows 10 using dvd in only 3 Super easy steps

how to install windows 10 using bootable usb

 

As you can imagine, this method won’t be as simple as running a simple command, but it’s certainly more satisfying and useful for your development career (not to mention it’s a reusable process). You’ll also get rid of unnecessary stuff that comes along with create-react-app that causes weighing your project down too much.

Note that I won’t use a specific structure for the project, as I think it’s a matter of taste and every developer works in a different way, so I’ll leave that choice up to you.

Well, with all these words, let’s get to the point.

Step 1: Create the folder that will Create a React project without create-react-app in it

Step 1: Create the folder that will Create a React project without create-react-app in it

First, we’re going to start by creating a new directory for our project in a location of our choosing.

mkdir my-react-project

After creating we want to enter it.

cd my-react-project

Step 2: Start the project

To start the project, we want to run an npm command .

npm is a package that manages versions and dependencies and is made for JavaScript. If you haven’t installed npm yet , you should install Node.js directly , because they work together and npm is included in the Node.js installation. Node.js also allows us to run JavaScript on the server side.

You can also use a different package manager like Yarn or Bower .

If you’re not sure if you already have npm/Node.js installed, just run the following commands to see the latest versions installed. If these commands show a version number, you already have them on your system. Otherwise, you need to install them again.

npm -v
node -v

Once we have prepared npm and Node.js for use in the system, we run the following command:

npm init

This command creates a file named package.json where all the dependencies and scripts of our project are specified there.

During the file creation process, the terminal will ask you questions to let you set up your project with the appropriate information about it. If you want to skip the current question, just press enter to go to the next question.

If you don’t want to give extra information to the project or want to configure it later, just use the command below instead:

npm init -y

After installation, we will have a new file package.jsonin our project as follows:

{
"name": "my-react-project",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}


Install react dependencies

Step 3: Install dependencies

it seems we have succeded in create a react project without using create-react-app , but In order for our React app to work properly and as expected, we need to install a few dependencies manually.

 

React dependencies

We will install the following dependencies on the React side :

react : JavaScript library that we will work with.

react-dom : a package containing some methods for managing DOM elements .

react-router-dom : A package that contains DOM bindings for React Router .

npm install react react-dom react-router-dom

Webpack dependencies

We will also need a module software package to prepare our project for the web. Webpack packages all the JavaScript files in the project and prepares all the necessary resources for use in the browser.

Since we only need Webpack to work in the development environment , we want to install all its dependencies by adding flag –save-dev or D to the command.

We will also install the following dependencies alongside Webpack :

webpack : software package.

webpack-cli : CLI for Webpack .

npm install --save-dev webpack webpack-cli

Babel dependencies

Babel is a JavaScript compiler that converts ES6 JavaScript to ES5 JavaScript , as not all browsers currently support ECMAScript 6 features .

The Babel dependencies we want to install include:

babel/core @: The core of the Babel compiler .

babel/preset-react @: A package containing a set of plugins used to support React features .

npm install --save-dev @babel/core @babel/preset-react

Before we delve further into dependencies, we want to configure Babel in our project so that our JavaScript files are

Let’s go back to the terminal to create a new file for this configuration:

touch .babelrc
Then just add the following code:

{
"presets": [
"@babel/preset-react"
]
}

Loaders for Webpack

Webpack requires something called a loader to preprocess files. They are useful for wrapping static resources beyond JavaScript .

These are the basic loaders we will be working with:

babel-loader : Loader for Babel .

html-loader : Loader for HTML .

style-loader : A loader that injects styles into the DOM .

css-loader : Loader for CSS .

(*) sass-loader : Loader for SASS .

(*) This loader is not absolutely necessary, but if you want to use the CSS preprocessor , you need a loader for that as well. There are also loaders for LESS , PostCSS , Stylus , etc.

npm install --save-dev babel-loader html-loader style-loader css-loader sass-loader

Webpack plugins

We also need Webpack plugins to help us with packaging purposes.

html-webpack-plugin: This plugin is used to create HTML files that reserve bundles.

Note: Since we are working in a development environment, we will only use one loader for styles. But for builds it is recommended to extract the CSS from the bundle using MiniCssExtractPlugin This plugin extracts CSS and groups it into separate files and creates files for each JavaScript file containing CSS .

Loader is faster and sets styles internally inside the < style > tag, while this plugin links external styles to the HTML document using the file tag .<link>

 

4 steps for how to fix ” no wifi adapter found error ” – super simple solution

Server dependencies

Our application also requires a server, so we’ll use server dependencies as well. We are going to install the following:

express : The Node.js framework that we will use to create the server file and handle server requests.

nodemon : A tool that refreshes our web application whenever there is a change in the application directory.

npm install express
npm install --save-dev nodemon

Step 4: Configure Webpack

The next step is to put the Webpack loaders and plugins we just installed into a configuration file to tell it how to behave in the process of packing our files.

To begin with, we are going to create an empty file for this purpose. Return to Terminal:

touch webpack.config.js

Before going into the contents of this configuration file, we want to see what this program actually does and how it behaves.

First of all, we need to tell Webpack what the entry point of our application will be. This is the entry point of a JavaScript file called index.js .

We also need to specify the output file, which is the last JavaScript file bundled and the only file that is explicitly referenced from the rendered HTML file.

At this stage, it is important to mention the folder dist . This folder is a directory created as part of the bundling process and holds all the static files generated as a result.

More things that Webpack needs to know are the types of files it works with in It currently includes HTML , CSS , SASS/SCSS and JavaScript . But if in the future we need to work with different types of files (this will definitely happen), including images, fonts, etc., these also need their own loaders.

And finally, we need to configure the necessary plugins. In this case , the HtmlWebpackPlugin creates the generated HTML for the browser.

webpack.config.js

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

module.exports = {
entry: "./index.js",
output: {
filename: "bundle.js",
path: path.resolve("dist"),
publicPath: "/",
},
module: {
rules:[
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: "babel-loader"
},
{
test: /\.html$/,
use: "html-loader"
},
/*Choose only one of the following two: if you're using
plain CSS, use the first one, and if you're using a
preprocessor, in this case SASS, use the second one*/
{
test: /\.css$/,
use: ["style-loader", "css-loader"],
},
{
test: /\.scss$/,
use:[
"style-loader",
"css-loader",
"sass-loader"
],
},
],
},
plugins: [
new HTMLWebpackPlugin({
template: "index.html"
}),
]
}

how to Create a React project without create-react-app

Create the HTML template in react

Step 5: Create the HTML template

what is CSS abbreviation ? what is CSS used for ? and how to use it


This is the easiest step, but we have to do it anyway.

We need to create an original HTML document that will be used by the HTMLWebpackPlugin as a template to generate a new document. So easily!

index.html


<!DOCTYPE html>
<html>
<head>
<title>My React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>


Notice the empty < div > with the root id . We will talk about it later.

Step 6: Create the server

The server is going to be a new JavaScript file that opens a port to listen to you and make a few requests.

touch app.js

We’re going to call it app.js but you can name it anything you want. Just be careful with capitalization. You will understand this later.

app.js


const express = require("express");
const app = express();
const path = require("path");
const port = process.env.PORT || 3000;

app.listen(port, () => {
console.log(`The app server is running on port: ${port}`);
});

const DIST_DIR = path.join(__dirname, "dist");
const HTML_FILE = path.join(DIST_DIR, "index.html");

app.use(express.json());
app.use(express.static("public"));
app.use(express.static("dist"));

app.get("/", (req, res) => {
res.sendFile(HTML_FILE, function(err){
if(err){
res.status(500).send(err);
}
});
});


What we do in this file is start a new server that listens for connections on port 3000. The HTML file generated by Webpack is then sent to the main URL (in other words, this HTML will be the main page of our application). We also show that any files in the public and dist directories are static and should be treated as such.

 

Create the React application

Step 7: Create the React application

Now we’re going to create App.js , which will be the main component of our React app (the capitalization warning we mentioned earlier becomes important here).

App.js


import React from "react";

const App = () => {
return <div>Hello, World!</div>;
};

export default App;


The rendering of this component is injected into HTML , so what we will see when we open the browser:Hello, World!

Let’s take a look at how to do this.

Step 8: Create an entry point to the React application

At this point we want to specify the routing for our app as well as where in the DOM the React content should be inserted.

index.js


import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";

import App from "./App.js";
import "./styles.scss";

const appRouting = (
<Router>
<Switch>
<Route exact path="/" component={App} />
</Switch>
</Router>
);

ReactDOM.render(appRouting, document.getElementById("root"));


We only show that when the URL exactly matches the root path, the application component should be rendered and its content should be placed inside the tag with the id root in the index file .

 

Define scripts in react

Step 9: Define scripts

Finally, we want to set up the scripts so that we can build and run our application.

Back to package.json , we originally had something like this in the scripts section:


{
...
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
}
...
}
Now we want to add two more:

{
...
"test": "echo \"Error: no test specified\" && exit 1",
"build": "rm -rf dist && webpack --mode development",
"dev": "nodemon app.js"
...
}


Step 10: Build and run the program
The last stage is the creation and implementation of the program.

First, we need to enter a build command for bundling:

npm run build

Then just run it:

npm run dev

Our app is now available: localhost: 3000.

If you’ve made it this far, congratulations, you’re done. I hope this tutorial was useful for you.


0 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

RABROD

Copyright © · All Rights Reserved designed & developed by · irabrod.ir