How to write your 1st REACT frontend code for web application?

This page gives details of how one can quickly create first REACT code for front end application in windows PC.

For running the code, one needs to download and install Node.js from the below URL:

I hope you like this video. For any questions, suggestions or appreciation please contact us at: https://programmerworld.co/contact/ or email at: programmerworld1990@gmail.com

Code:

Initial default code:

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;

Output:

My updated code:

import React from 'react';

function App() {
  return (
    <div>
      <h1>Hello, World!</h1>
      <p>
      This is a test page.
      </p>
    </div>
  );
}

export default App;

Output:

To create the project, run below command:

npx create-react-app my-firstapp

And below commands to run start/ run the app:

C:\Work\ReactProject>cd my-firstapp

C:\Work\ReactProject\my-firstapp> npm start

Complete log from the command prompt:

C:\Work\ReactProject>npx create-react-app my-firstapp

Creating a new React app in C:\Work\ReactProject\my-firstapp.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...


added 1480 packages in 1m

261 packages are looking for funding
  run `npm fund` for details

Initialized a git repository.

Installing template dependencies using npm...

added 63 packages, and changed 1 package in 9s

261 packages are looking for funding
  run `npm fund` for details
Removing template package using npm...


removed 1 package, and audited 1543 packages in 6s

261 packages are looking for funding
  run `npm fund` for details

8 vulnerabilities (2 moderate, 6 high)

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.
Git commit not created Error: Command failed: git commit -m "Initialize project using Create React App"
    at genericNodeError (node:internal/errors:984:15)
    at wrappedFn (node:internal/errors:538:14)
    at checkExecSyncError (node:child_process:890:11)
    at execSync (node:child_process:962:15)
    at tryGitCommit (C:\Work\ReactProject\my-firstapp\node_modules\react-scripts\scripts\init.js:62:5)
    at module.exports (C:\Work\ReactProject\my-firstapp\node_modules\react-scripts\scripts\init.js:350:25)
    at [eval]:3:14
    at runScriptInThisContext (node:internal/vm:209:10)
    at node:internal/process/execution:118:14
    at [eval]-wrapper:6:24 {
  status: 128,
  signal: null,
  output: [ null, null, null ],
  pid: 12652,
  stdout: null,
  stderr: null
}
Removing .git directory...

Success! Created my-firstapp at C:\Work\ReactProject\my-firstapp
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd my-firstapp
  npm start

Happy hacking!

C:\Work\ReactProject>cd my-firstapp

C:\Work\ReactProject\my-firstapp> npm start

> my-firstapp@0.1.0 start
> react-scripts start

(node:13056) [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
(Use `node --trace-deprecation ...` to show where the warning was created)
(node:13056) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: 'onBeforeSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
Starting the development server...

One of your dependencies, babel-preset-react-app, is importing the
"@babel/plugin-proposal-private-property-in-object" package without
declaring it in its dependencies. This is currently working because
"@babel/plugin-proposal-private-property-in-object" is already in your
node_modules folder for unrelated reasons, but it may break at any time.

babel-preset-react-app is part of the create-react-app project, which
is not maintianed anymore. It is thus unlikely that this bug will
ever be fixed. Add "@babel/plugin-proposal-private-property-in-object" to
your devDependencies to work around this error. This will make this message
go away.
Compiled successfully!

You can now view my-firstapp in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.1.8:3000

Note that the development build is not optimized.
To create a production build, use npm run build.
webpack compiled successfully
Compiling...
Compiled successfully!

You can now view my-firstapp in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.1.8:3000

Note that the development build is not optimized.
To create a production build, use npm run build.
webpack compiled successfully
Compiling...
Compiled successfully!

You can now view my-firstapp in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.1.8:3000

Note that the development build is not optimized.
To create a production build, use npm run build.
webpack compiled successfully
Compiling...
Compiled successfully!

You can now view my-firstapp in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.1.8:3000

Note that the development build is not optimized.
To create a production build, use npm run build.
webpack compiled successfully

Screenshots:

To install node.js, browse below:

https://nodejs.org/en

Leave a Reply Cancel reply