Tag Archives: create-react-app

[Solved] Use of create react app on Mac platform (command not found)

 

You are able to apply the following solution:

$ npm config set prefix /usr/local
$ sudo npm install -g create-react-app
$ create-react-app my-app

Use of create react app on Mac platform (command not found)

Labels (space delimited): react

Before the beginning of BB: as a new front-end Xiaobai, in order to self-study front-end bought some books to see, half a year later. If you think you have achieved the right result, you can kill all the people. However, it turns out that there are people outside, there is a day outside, and I am still the original Xiaobai… So I planned to practice again. Who would have met the pit in the first step

Gorgeous dividing line

Problem Description:

Today, in the process of learning react, the first thing is to build the environment (Environment Building Article). After browsing the above link article, I found that there are two ways to build the react environment. The first one is relatively simple, so I decided to use the first one to build the environment. But who would have thought that there was a problem:

“`shell

create-react-app hello

“`

After executing the above code, create react app: command not found is returned with an error, which means that the command does not exist

Thinking process:

At first glance, I thought it might be that it was not installed in the global environment, so I deleted it first, and then passed it

“`shell

npm install -g create-react-app

“`

I thought it was this problem, but the result is still abnormal

After consulting the data and looking at the NPM documents, I found that the NPM install – G command installed the module in the/usr/local/lib directory by default. So I went to the directory to find out whether the create react app module was successfully installed

Uncaught type error: create-react-app and electronfs.existsSync is not a function

Add create react app to a project created by electron. Electronic cannot be used in react

When using require (‘Electronic ‘) in react, it will report
uncaught type error: fs.existssync is not a function at getelectronpath (index. JS: 8)
because the module of node.js cannot be used in react.
therefore, Baidu has proposed the following scheme:

Create the render.js file

global.electron = require('electron');

Modify the main.js file

Modify the entry code of creating browser and add preload configuration item. Render.js as preload file

win = new BrowserWindow({
        width: 1000,
        height: 800,
        webPreferences: {
            javascript: true,
            plugins: true,
            nodeIntegration: true, 
            webSecurity: false,
            preload: path.join(__dirname, '../public/renderer.js') 
        }
    })

in the react component, use electron

const electron = window.electron as follows

Because you want to use process communication, you can directly write this in the rendering process:

const ipcRenderer = window.electron.ipcRenderer;

At this time, there is no error in typeerror: fs.existssync is not a function
when fs.existssync is not a function error is no longer reported, a new error starts

Uncaught ReferenceError: require is not defined

I don’t know what’s going on. I’m just looking at my main.js. The node environment shouldn’t report an error that doesn’t have the definition of require. So Baidu has made a lot of changes, so I modified several of my files:
index.html:

<script>
    window.electron = require('electron');
  </script>
  <div id="root"></div>

main.js:

win = new BrowserWindow({
        width: 1000,
        height: 800,
        webPreferences: {
            nodeIntegration: true, 
        }
    })

In the rendering process that references this:

getName = (e) =>{
        e.preventDefault()
        const ipcRenderer = window.electron.ipcRenderer;
        // console.log(ipcRenderer.sendSync('synchronous-message', 'ping')) // prints "pong"

        // ipcRenderer.on('asynchronous-reply', (event, arg) => {
        //     console.log(arg) // prints "pong"
        // })
        ipcRenderer.send('asynchronous-message', 'ping')
        // ipcRenderer.send('get-reader-list', '')
    }

And then you can

npm run electron

It’s working perfectly

Happy ~ ~ ~ thank you for helping me@ The way of heaven rewards diligence,
although small water drops are insignificant, they can gather little by little into the sea! Take your time. Sometimes when you feel it’s hard to walk, you’re going uphill. Come on
later, a new project was created, and it was found that both methods were feasible and could be tried many times