How to convert html into react components by using CLI command html2react? - javascript

I am trying to implement automated process of converting html into react components. I am following below link to automatically convert html into react components.
https://www.npmjs.com/package/html-to-react-components
but i am getting failure of command html2react. I also installed the package by using below command.
"npm i -g html-to-react-components".
But still it is saying "'html2react' is not recognized as an internal or external command,operable program or batch file".

The problem was that I installed the package globally. As i installed globally so i have to place my html file in C:/Users/YourComputerName/AppData/Roaming/npm.
and then from CLI I have to open the above folder and directory in which my html2react package is installed.
And then from that directory I have to implement the html2react command.
For clear understanding i am also attaching snapshot as well. CLI command description
Have a good learning.

Related

How to build partly typescript enabled project in React

I had a normal react web app project. There was no typescript implementation.
So I added
npm install --save typescript #types/node #types/react
#types/react-dom #types/jest
This command is to bring typescript into the project.
I have converted some components to typescript and some are still remaining as vanilla js components. Everything works in the local environment. Even though the build command is working without any issues. Once I deploy the build folder to the server It gives a completely blank page and no console errors as well.
This is my firebase hosted link https://portfolio-e251d.web.app/
This is my repo https://github.com/pathum-kalhan/react-material-ui-portfolio
Are there any special steps to build a partly typescript react project?

Electron with Vue.js, not using a boilerplate

Not using a pre-existing boilerplate like electron-vue, I'd like to set up a Electron app with Vue.js. What is the procedure to do so, specifically for a beginner?
So far,I have installed vue cli globally with NPM, created my project with vue create, then installed electron into it with npm install electron.
From here is where everything falls apart. The article I was following specifies starting the app with dev, which runs: "NODE_ENV=DEV vue-cli-service serve & sleep 5 && NODE_ENV=DEV electron app.js". For whatever reason, this doesn't work. Comments on the article seem to suggest these commands are linux formatted, but no one has provided a windows formatted equivalent.
electron . starts the app, as expected, but vue components just dont work. Adding a basic <script src="> tag to the vue CDN at the top of the index.html works, and causes it to work, but ideally I'd like the electron app to work offline, which I believe was the point of using vue-cli as opposed to just importing it from the CDN.
Is there a simple way to do this? or would I be better off just downloading vue manually, throwing it into a folder in the electron app, and loading it with a script tag?
The easiest way to create an Electron app with vue.js as the frontend framework:
install vue-cli 3:
npm install -g #vue/cli
create a project (be patient because it may take a while):
vue create myproject
cd myproject
add and invoke the generator of vue-cli-plugin-electron-builder (it will automatically set up electron for you and let you check changed files):
vue add electron-builder
test your app:
npm run electron:serve
or build your app:
npm run electron:build
See more in this guide: https://nklayman.github.io/vue-cli-plugin-electron-builder/guide/#to-start-a-development-server
This works in Windows Powershell if all PATH variables to vue-cli-sevice and electron are correct:
set NODE_ENV=DEV ; vue serve ; timeout 5 ; electron app.js
Note that the new version of vue changed some commands:
https://cli.vuejs.org/guide/installation.html
Windows command help:
Setting and getting Windows environment variables from the command prompt?
How do I run two commands in one line in Windows CMD?
What solved the issue in the end was changing relative paths to absolute.
Also this was useful: https://nklayman.github.io/vue-cli-plugin-electron-builder/

Render React code to HTML file with npm

I didn't know how to name this question but here is the thing. I installed React with NPM: npx create-react-app my-app and I start app with npm start. After that localhost:3000 opens. The thing is html file in folder public isn't connected anyhow to the script.
I want to serve the development with package called "serve". The only thing there is nothing to serve, the HTML file in public isn't updated at all while I can't serve App.js or anything like that.
Is it required to use CDN links for this task? Or how else it is possible to connect React to that generated html file?
You need to setup your environment with Webpack. you can follow this tutorial:
https://www.valentinog.com/blog/react-webpack-babel/
Or you can clone a react boilerplate project from github directly.

How to build this project into a single Javascript file?

I am currently working on integrating a chat system into my web application. This is the project which is given to me to take as a base: https://github.com/smilefam/SendBird-JavaScript/tree/master/web-widget
I have made some changes to the JS and SCSS files. Now how do I build it into the single Javascript file so that I can import it to my application?
I am executing the following command
npm run build
But it throws an error saying,
npm ERR! missing script: build
I am a complete newbie to Node and hence looking for some help.
From what I can see in your package.json I understand that you have not defined a build command under the scripts section.
Adding a build command there should work.
This error appears because you don't have a build script inside of the scripts field in your package.json.
Your scripts should be defined in your package.json.
To read more information about how to make a package.json, click on here
Hope this helps.

IntelliJ Idea React-native not working properly

I have recently installed intellij idea on my PC and started react-native application. I installed all libraries required for react native and react js. Also installed node js module and all plugins for this ide. Still i am getting error below like this in import statement.
When i move to that line that shows me error like.
-> Install TypeScript definition for better type information.
But my typeScript definition are also as per required.
Also I have changed my JS to ReactJSX.
I have attached image over here for reference.
You should try to create a new project using following commands
npm install -g create-react-app
create-react-app my-app
cd my-app
npm start
If you still facing error then try to use vscode editor and select react language. If you still face issue let me know

Categories

Resources