Create React Projects

Pre-requisite:

• Code Editor (VS Code or other)

• Node.js (an open-source, cross-platform JavaScript runtime environment)

  • Install Node.js

  • node -v (check version in command line)

• React.dev (react documentation)

React is a core library

• Attachments with React are:

  • react-dom (for web app)

  • react-native (for mobile app)

Building React

• npm: Node Package Manager

• npx: Node Package Execuiter (running without installing in a local machine)

• create-react-app: Utility (means Software)

How to install and run React in a basic way

Follow the following steps:

1. npx create-react-app project-name

2. cd project-name

3. npm run start

How to understand react projects:

• Always start reading with package.json

  • You will see the Project name, version, dependencies, scripts, browserslist, etc.

How to install and run React with Vite (The fastest way to install React)

Note: Vite is a bundler.

Follow the following steps:

1. npm create vite@latest

2. Project Name

3. Select a Framework > React

4. Select a variant > JavaScript

Congrats your project is ready :)

1. Go to the project folder: cd project-name

2. Install node modules folder: npm install or npm i

3. Run your project: npm run dev

Note: devDependencies is used during development, it does not go with production-ready apps.

Clean up the basic React folder:

• Update your README.md file according to your projects.

• Most of the time we work on the src folder.

  • Let's delete the unnecessary files:

    • setupTest.js

    • reportWebVitals.js

    • logo.svg

    • App.text.js

    • index.css

    • App.css

    • Clean up the index.js, and App.js.

      • Your index.js looks 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>
          );
        

      • Your App.js looks like this:

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

Clean Vite React Folder:

• Go to the src folder:

  • Let's delete the unnecessary files and folders:

    • assets folder

    • App.css

    • index.css

  • Clean up the main.jsx, and App.jsx

    • Your main.jsx looks like this:

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

    • Your App.jsx looks like this:

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

Watch ReactJS series by Hitesh Choudhary