How react works

Before we start to understand about react we should be learn more about node js and javascript dom manipulation to get an Idea how the virtual dom and Id will work. ok so excited to get learn react , my first question is where does react begins ? react actually begin at node, yes first a short description I am going to write couple of lines at node as well , why it is import and how it is work then will jump to react how's the basic can started.

I’m not associated with any of the websites mentioned below

Just click on this node js link nodejs.org/en and here actually you will learn how the reacts begin and you should go through with news and doc link inside the node js website for better understand, lots of people think react begin with react website but this not true actually, let me go through that how in real word development happen and how's you go through with that, continue for this one , first of all after you click the above nodejs link you can see two version LTS and Current you can download anyone , nodejs has came in to the picture because of browser javascript engine history node is a just a good environment where you can run your javascript standalone you don't need to lod in your browser, there are couple of other environment to run your js code like deno deno.com bun : bun.sh and there are lots of other environment also doing same work but node is most used one.

What actually node does: It gives you npm that stands for (node package manager). this is kind of service for packages what kind of package want to run with our code and you might have notice in early javascript we used to write how to manipulate dom and other things but with the packages there will be the code and that code we will use like react package , oh react also a package yes react also a kind of package only.

Let me first walk you through what is the main concept and how we are going to learn in react:

Installation

Create a New React App with just a few commands :

npx create-react-app my-app
cd my-app
npm start

As you read more about npm but where is this npx has came into the picture (node package executor) which we will use one-time only and you can learn why the npx command is there to create new react app.

Actually in old version developer used to install a huge amount of full package to get package,but after the npx has came its not required to install a large code like a software in our system, you just take a command and execute that command then it will take direct from the internet, and we are not taking as package we are just grabbing from internet and this is how npx work. So far so good will move forward

npx create-react-app my-app --template [template-name]

As you can see the in above code there is --template this template used to get custom templates like fig , TypeScript etc. to start a new Create React App project with TypeScript, you can run

npx create-react-app my-app --template typescript

Now we are moving to create first react project , for creating a react you just create a empty folder to install tha react package and other stuffs then if you are using vscode , drage that folder and use this command

npx create-react-app [project-name]

After installed react move in this project and usels command to make sure all the json ,src node_module file install perfectly

ls 
README.md               node_modules            package-lock.json       package.json            public                  src

package.json

There are folders you find node_modules, public, src, package.json etc.., first look in to the package.json to identify your project and understand how to handle the project's dependencies where all the crucial information are there like project name, versions and npm packages dependencies :

{
  "name": "firstproj",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "bootstrap": "^5.2.2",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Public folder

After understood the package.json just make sure to understand that whatever you are building the code that code deploying in public folder, and Inside the public folder there are index.js,html file and all of that are shrinker files for production environment :

• manifest.json : There are files which gives some of the information about the icons, size of icons, background color etc.. also other files as well

• robots.txt : will gives the info about reader like google,and for SEO purposes you can have it this. this file is a text file created by the designer to prevent the search engines and bots to crawl up their sites.

• Index.html : Inside this there are normal html tags an important Id is there with div is root:

<body>

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

  </body>

This is the proof that you are building a single page application that showing the app will load by this single page included id root As continue you will learn about src folder

Src folder :

There are crazy amount of information in src file , you should understood src file to get depth knowledge about react, first will start with index.js :

• index.js : In this js file just look to 'ReactDOM' which is virtual dom for browser that doing dom manipulation and creating the the root by id 'root'. so if you looked in index.js file there are css, app, react files imported which are import to use in project:

import  ReactDOM  from "react-dom/client";
import App from "./App";
import './index.css';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

• App.js :

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

In this js file there are function App() which return something and we can used as per our requirement and can export to use as this function which already named App() known a component and to use this App function you can import and use as component This App component name you can change as per your code requirement.

Alright rest of the things are fine and you keep learning about src folder stuffs and other js files.

• README .md : In readme file there are npm start ,npm run build , npm test commands to use as per our requirement
  npm start script is used to execute the defined file in it without typing its execution command. Just add this in terminal and enter then You will start a development server(localhost:3000) to get your output. npm run build to produce the code in public folder.

A you can see in src folder there are index and app.css also there

• Index.css : Is use to target body, paragraph,font, background color for project but anything that is related to that particular component you should have a specific css .
• App.css : App.css in React is used to style the react component. The style attribute is the most used attribute for styling in react applications, Ideal practices says for bigger project something related to styling a component you should have same name css so wherever you will load a component automatically that css will load with component.

Important Note for public folder : Do not load any css directly in public folder.

Thanks