react beginner question...
I am learning react on my Mac and I installed NPM and node js and created a basic react app for testing.
In VS code app - when I type in terminal 'npm start' it opens a browser and shows the app running. - all good
Next I tried to upload the app to a live Web server (it has cpanel).
Seems like it is not connected to react - or somehow I need to start the app?
What can I do to start / connect it?
the URL is something like:
https://example.com/reactlearn/
or
https://example.com/reactlearn/public/
empty
or
https://example.com/reactlearn/src/
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
Try deploying it to Vercel, Netlify or Heroku.
These should all provide free options with a url where you can see the app.
Related
There is a ready front-end built using React.
Is it correct to connect it?
So far, there is only 1 page with one div block in which there are pictures. I read the documentation and didn't quite understand how it was done.
Can you please describe in detail all the steps to enable it?
I have a fresh/clean Laravel project. I don't know Laravel & React well yet. Therefore, I ask you to tell in detail and step by step all the actions so that React styles work in welcome.blade.php.
React structure (src/index.js):
import React from 'React';
import ReactDOM from 'react-dom/client';
import './index.scss';
import App from './App';
import 'macro-css';
const root = ReactDOM.creactRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App/>
</React.StrictMode>
);
I tried to migrate the code from React index.js into Laravel's app.js and I threw all the other files next to it in the hope that it would work.
Please, first go through the Laravel Bootcamp which will take you through how Laravel integrates with React.
Writing Views In React / Vue
Our Breeze and Jetstream starter
kits give you a great
starting point for your next Laravel application powered by Inertia.
In addition, the Laravel Bootcamp
provides a full demonstration of building a Laravel application
powered by Inertia, including examples in Vue and React.
I am trying to integrate react in an existing project usreing CDN and following https://reactjs.org/docs/create-a-new-react-app.html
when I use import App from "./App"; it doesn't work but whne I add .js : import App from "./App.js"; it works. Do you know how to make it work without adding .js extension ?
We are refactoring some legacy code into React and it turns out it is all reactNative.
Does anyone have any idea how we can refactor this AppRegistry.registerComponent into React (Just regular React (like the one create-react-app installs), not React Native, not React-Web), the same goes for AppRegistry.getApplication? We don't want ANY react-native at all, so any help would be greatly appreciated...
Could someone also point me at a decent resource so I can stop asking these asinine questions? :(
You will not need AppRegistry in your case. This is the entry point for your app in react native.
AppRegistry is the JS entry point to running all React Native apps.
App root components should register themselves with
AppRegistry.registerComponent, then the native system can load the
bundle for the app and then actually run the app when it's ready by
invoking AppRegistry.runApplication.
In your app, you should refactor
// react native app
import App from "./App";
...
AppRegistry.registerComponent(appName, () => App);
to
// your new app
import App from './App';
...
ReactDOM.render(<App />, document.getElementById('root'));
I'm registering a service worker from create react app and I'm getting good scored in lighthouse for being a progressive web app and I can install the web app from the Chrome address bar, all is good
BUT when I update the content on the website nobody gets to see it unless they clear their cache, which they don't. How can I ensure they see the latest content while still getting a top score on lighthouse for being a progressive web app?
import React from 'react';
import ReactDOM from 'react-dom';
import * as serviceWorker from './serviceWorker';
import { Router } from './router';
import './scss/index.scss';
ReactDOM.render(<Router />, document.getElementById('shell'));
serviceWorker.register();
To service worker update your cache, you'll need to close ALL TABs of your website.
Another way is use this package to do this job.
https://www.npmjs.com/package/#loopmode/cra-workbox-refresh
It will do all the job for you, and after install the new files, it shows up a button allowing you to update the page
I built an application using jhipster v5.3.4 choosing React option for frontend. It works fine with Edge and Chrome but renders a blank page on Internet Explorer 11.
I've read the solution is install and include babel-polyfill but I´m not sure how to do this.
What I've done:
npm install --save-dev babel-polyfill
At the top of index.tsx, add import babelPolyfill from 'babel-polyfill';
The result is the same, blank page and console error: "Symbol is undefined"
Finally the answer to make it works is:
import React from 'react';
import ReactDOM from 'react-dom';
import 'babel-polyfill';