ReactJS

Operating ReactJS with Windows

 

First Install: Node & React

Preparation: Install Node.js and NPM on Windows

By How to Install Node.js and NPM

1. Download “node-v16.13.0-x64.msi” file  - see How to Install Node.js and NPM on Windows Step 1  
2. Install “node-v16.13.0-x64.msi” How to Install Node.js and NPM on Windows Step 2
3. Verify the installation
   1. enter windows command prompt (cmd) 
      1.  type here to search
      2. 
      3. enter: "cmd"
      4. 
      5. enter Command Prompt
      6. 
      7. Command Prompt is here!!!
      8. 
   2. Verify NPM and Node version - see How to Install Node.js and NPM on Windows Step 3
   3. Basic Node.js Usage - see Basic Node.js Usage 
   4. 
   5. Basic Node.js Usage - see Basic Node.js Usage 
      1. text editor
         1. Open text editor (notepad++ Etc.)
         2. copy the following to 

            var http = require('http');
             http.createServer(function (req, res) {
               res.writeHead(200, {'Content-Type': 'text/html'});
               res.end('Hello World!');
             }).listen(8080);

         3. save the file
            1. save as "myprogram.js"
            2. at "C:\Users\username"
      2. cmd
         1. Access to the Windows command line (Search--> cmd--> left key)
         2. enter

         3. cd c:\users\username
            node myprogram.js​

         4.  
      3. Bowser
         1. Enter a browser (Chrome Etc.)
         2. Enter the following link localhost:8080/ and you "see Hii World!"
         3. 

React Getting Started

 By w3schools: React Getting Started

1. Setting up a React Environment
   1. 1. Access to the Windows command line (Search--> cmd--> left key)
      2. enter 

      3. cd c:\users\username
         npx create-react-app my-react-app

      4. open "File Explorer" at "c:\users\username" and verify a new directory "my-react-app" with sub-directories
      5. 
      6. enter ..my-react-app/src and open App.js to see the main file, that is JS file and not HTML!!!
      7. 

2. Run-the-React-Application

   1. Access to the Windows command line (Search--> cmd--> left key)
   2. enter 

      cd my-react-app
      npm start

   3. wait until the process complete
   4. 
   5. Enter a browser (Chrome Etc.)
   6. Enter the following link http://localhost:3000/ (not localhost:8080/ ) and you "see the following:
   7. 
   8.  App.js code, brought the file here because the file in its place is about to change...

      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;​

3. Modify the React Application

   1. open c:\users\username/my-react-app/src/App.js file at any browser
   2. change it to

   3. function App() {
        return (
          <div className="App">
            <h1>Hellow, name is Arie</h1>
          </div>
        );
      }
      
      export default App;

   4. Save
   5. Enter http://localhost:3000/ and see:
   6. 
   7. Pay attention that immediately after saving the App.js file --> browser is updated with the need ti do the refresh!!!

Quick Start

Run-the-React-Application

Note: If Node and React are already installed on this computer - you are in the right place

1. Access to the Windows command line (Search--> cmd--> left key)
2. enter 

   cd my-react-app
   npm start

3. wait until the process complete
4. 
5. Enter a browser (Chrome Etc.)
6. Enter the following link http://localhost:3000/ (not localhost:8080/ ) and you "see the following:
7.