ReactNative Webview - reactjs

React js : I am trying to open my react js production build folder under which the one html file is placed after run npm run build.
React Native: I am using react-native-webview Plugin for open the same index.html file. For android I placed this folder under assets.
The codebase giving me error File_Not_Found.
The build html file is minify html file. When I try to use any url here or any development plain html it is working fine. For this minify file it is not working.
Please help.
I am using this code for android react native.
if(isAndroid){
console.log(isAndroid);
return (
)
}
I want to open production this react js build folder html file in react native webview.

Create an object
const index = require('./assets/index.html');
set your source to the object instead of using a uri.

Related

React.js files are minified and I cant make frontend changes

I have got web app which is built using laravel and react.js ; I need to change something in frontend but found that all react files are minified in app.js file, so changing frontend files does not have any effect. I don't have experience in react. Can you please suggest how to regenerate update minified app.js file?
thanks a lot!
I have tried changing frontend js files like normal but it was not working.

Bundle react in some JS file instead of (Bundling and Adding) in HTML file (dev mode)

Im doing React project. Process of react is bundle all files and inject in public/index.html file. This process is like "watch" activity.
I want same process but only bundling JS file in public folder. like watch only JS file when changed/update. so I can link that JS file in any file I want.
By this approach I can use that JS file in any framework/technology like php,asp etc.
I guess webpack can do that but I don't know how, other possible solution are OK if they work.

I want to integrate Bootstrap to my react project (can we add them through dependency)

I have a custom files like
- bootstrap.css
- bootstrap.js
- owl-carosel.min.css
- owl-carosel.min.js
etc. I want to add them locally from my assets folder inside src to my index.js
I have tried adding them to my index.html but the problem is i have to move my assets folder to public folder.
When i try adding them using import statement it Fails to compile
Error:
Failed to compile
./src/assets/css/font-awesome.min.css (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-3-1!./node_modules/postcss-loader/src??postcss!./src/assets/css/font-awesome.min.css)
Module not found: Can't resolve '../fonts/fontawesome-webfont.eot' in '/home/cedex12/Gokul/food-day/src/assets/css'
Can we add them like
Step1:'bootstrap': 'file:/path/to/your/repo'
Step2:npm install
I want to integrate them to my index.js file.
With js you can use the function import() that allow you to import external js file in a js file ;) Just read the doc
try using react-bootstrap framework its build with react components! here a link:https://react-bootstrap.github.io/

Is possible to create a react component and use it in other projects html?

I was wondering before starting to do it, if is posible to create a react proyect(i need to do a forum widget) code it on react and the compile it and put the .js output file in other proyect, not with react the other proyects uses php symphony and twig, would be as easy as importing the script and adding a ?
Yes it can be done. The bundle of a react app is a complete js with everything that you need to run it. At the end you only import one js file in your html. I recommend you use a bundler library like webpack or browserify to generate a minified bundle and apply other functionality before creating the final bundle.

How to build react js static on c panel

I have built my react js app with create-react-app configs and it works fine in development build of React.
I built that with npm build command and now i have build folder.
this web page is static (server-less), Now I want to know how to use that and where put files in Cpanel.
After the bundle realized by webpack, you can check the transpiled and minified version inside the build folder. You should upload all the content to your public_html or another folder.
And the meaning of server-less is totally different than you're using. Check this article to understand what it is: What is serverless.
I do not use CRA boilerplate since i have my own but in your case, you should find where your js bundle is. You can find the bundle location in the webpack config. Then append that to your html somehow like this:
<div id="root"></div>
<script src='your-js-bundle'></script>
Assuming that somewhere in your code, you are appending your js code into a div like this:
const element = <h1>Hello, world</h1>; // assuming element is your entry point
ReactDOM.render(element, document.getElementById('root'));
That works if its just simple react project your working on (No SSR and such)

Resources