Render React code to HTML file with npm - javascript

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.

Related

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

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.

How to make a npm package from Create React App /build folder?

I have an app, made in create-react-app boilerplate, that i compile and build using npm run build.
I would like to take the folder /build and create an npm package out of it and publish it so i can use this package in other project as a micro app.
Is it possible? how to do it?
Tnx!!
You may check this this article if you want to make it simple. However, if you want to publish a component or component library than the recommended way is using nwb.

Adding a app.js file from resource folder not public

I'm using vue.js for the first time and the files are located in 'Resources/Assets/js/app.js'
How can I import that app.js file into my partials scripts. Currently the assets()points to the public folder and I need it like that.
When I try to move the asset folder into the public I get an error for 'multi'
Are you familiar with any build tools like webpack, grunt, gulp, etc? Those are commonly used to bundle your application resources and move them to the desired destination, i.e. public in your case. I'd suggest reading some intro material to webpack as it is very often used in laravel + vuejs projects.
There are additional scripts in the package.json file that will run mom tasks too.
You will find npm run dev for local development and npm run prod for production.
Try npm run dev
This will compile all your assets and you will get a single app.js file in the public folder.
You can then use that app.js file in your HTML file

React native can't find some package

In a folder outside of my react native app I have placed a project I cloned from github in order to include it in my project.
I have run npm link on that project and npm linked it to my project, however when trying to run the project I get this screen
The github repository for the project is here
All the file need to be under the root directory of the package. The packager doesnt work well if the files are outside.
A workaround described here
node_modules/react-native/packager/packager.sh --projectRoots <ROOT-1>,<ROOT2>,<ROOT-3>

Using Node package in NativeScript app

I am learning NativeScript. For example, I would like to include this Guid generator package in my NativeScript app. My question is, how? I look at the directory structure generated by the command-line tool and I see the following relevant pieces:
node_modules
app
tns_modules
package.json
package.json
Do I add node-uuid to the ./package.json or the ./app/package.json? How do I reference it in my app then? For example, if I want to use uuid from the app.js file, what does that look like? I'm a little confused because of the package structure of NativeScript and how things actually get loaded at runtime.
Thanks
Run npm install from the root of your {N} app.
npm install --save node-uuid
The dependency will be added to the outer package.json.
And then in your app.js file, just use it like usual.
var uuid = require('node-uuid');
When you run tns run <platform> or tns build <platform>, the modules inside node_modules/ will be copied to folder under platforms/, take Android for example, it will be at platforms/android/assets/app/tns_modules/node-uuid. The building process is completed under platforms/ directory.

Categories

Resources