React #1: Create react projects

Pre-requisite:

• Code editor (VS CODE)

• Node.js

React:

Note: For documentation refer - React.dev

React is a free and open-source front-end JavaScript library for building user interfaces based on components. It is maintained by Meta and a community of individual developers and companies. React can be used to develop single-page, mobile, or server-rendered applications with frameworks like Next.js.

React library is the core library with attachments like:

• React DOM - for website and app

• React Native - for app

Installation:

• Open terminal

• Run npx create-react app project-name

Run:

• cd project-name

• npm run start

Now, at this stage, React is installed on your system and should be running fine.

Know your project

Go to the package.json file to learn more about your project, such as the project name, dependencies, and more.

• npm run build - Creates a build folder in your project. Whatever JavaScript has been written in React is converted into plain JavaScript.

Faster way to install :

Use package bundler like: Vite or Parcel

Using Vite to intall React:

• Open Terminal

• Run the command npm create vite@latest

• Project Name

• Select a Framework > React

• Select a variant > JavaScript

Bravo! You finally installed React using Vite.

Now, as you can see, the node_modules folder is missing in this project.

Follow the steps to install it:

• cd project-name

• npm install

Now, your project is ready to run : npm run dev

Cleaning up your project

#Basic React folder

The most crucial folder is the src folder.

Delete the following files:

• App.css

• Index.css

• App.text.js

• reportWebVitals.js

• logo.svg

• setupTest.js

Now, clean up the App.js and index.js accordingly.

• index.js should look like this:

      import React from 'react';
      import ReactDOM from 'react-dom/client';
      import App from './App';
  
      const root = ReactDOM.createRoot(document.getElementById('root'));
      root.render(
          <React.StrictMode>
              <App />
          </React.StrictMode>
      );
  

• App.js should look like this:

      function App() {
        return <h1>Chai aur React | Mark</h1>
      }
  
      export default App;
  

#Vite Folder

Delete the following files from the src folder:

• assets folder

• index.css

• App.css

Clean the main.jsx and App.jsx files:

• main.jsx should look like this:

  import React from 'react'
  import ReactDOM from 'react-dom/client'
  import App from './App.jsx'

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

• App.jsx should look like this:

  function App() {
    return <h1>Chai aur React with Vite | Mark </h1>
  }

  export default App

---

For further explanation, watch: -