i'm using react create app. ejected project.
When I console.log('hello') in the home component, nothing output. And it seem the server restart every time I save somethig.
This is my component
import React from 'react';
const css = {
}
export default function Home(props) {
console.log('hello')
return (
<div> something</div>
)
}
This is what the console shows every-time I save some change. it does nothing. I expect it show 'hello in the console'
Try to open http://localhost:3000 in your browser, after that open your browser devtools and select console tab, there you will see the console output.
Related
I created a brand new NextJS app via npx create-next-app#latest --ts, and the app is pretty much unusable when hot-refreshing or trying to load a new route. For example, I made a new route while the app was running called pages/about.tsx.
import React from "react";
import type { NextPage } from "next";
type Props = {};
const about: NextPage = (props: Props) => {
return <div>I am about finances</div>;
};
export default about;
Saving this, and trying to navigate to the page just never loads. If I stop the app and re-run it I can get to it. However, if I change the text to "I am about stuff", it will infinitely load and just never hot-refresh.
What's the deal? Can anyone help?
Below is the version of NextJS I am using.
myself:~/code/my-net-worth$ npx next -v
Next.js v12.0.8
I created complete offline ReactJS web application and I want to run it from android application from Web View using React-Native.
I followed the following procedure to do so:
1. I created a compiled ReactJS web application got the build using the following command:
npm run build
Then I created react-native project and placed the build folder with following architecture
I updated App.js with the following content:
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, WebView} from 'react-native';
import {roscon} from "./build/index.html";
type Props = {};
export default class App extends Component<Props> {
render() {
return (
<View style={{height: 300, width: 300,overflow:'hidden' }}>
<WebView
source={{uri: roscon}}
scalesPageToFit={true}
domStorageEnabled={true}
javaScriptEnabled={true}
startInLoadingState={true}
/>
</View>
);
}
}
After running this code I expected it to run my ReactJS Web application, instead I got white screen.
Can you please tell what can be the causing issues and how i can make my ReactJS Web App run on react-native?
Note: I was able to run generated build folder using npm command
serve -s build
But I still can't figure out how to port it to react-native project as WebView
After research and testing, I found a solution.
The main issue i found was the compiled build folder is rendered as static html. And it needed a server to serve pages.
So, I followed this link for getting build project to get it up and running
Then, integrating it with nodejs Android Project Samples to get my build folder running in android as a Webview.
Note: I also tried react-snapshot and react-snap but they didn't gave satisfactory results.
Try to require the html file correctly and pass it in to source prop in this way:
<WebView
source={require('./build/index.html')}
/>
Install
npm install react-native-react-bridge
These are used to render React app in WebView
npm install react-dom react-native-webview
Requirements
react 16.8+
react-native 0.60+
Usage
Fix metro.config.js to use babelTransformer from this library.
module.exports = {
transformer: {
babelTransformerPath:
require.resolve('react-native-react- >.
.bridge/lib/plugin'),
...
},
};
Make entry file for React app. web.js
import React, { useState } from "react";
import {
webViewRender,
emit,
useSubscribe,
} from "react-native-react-bridge/lib/web";
const Root = () => {
const [data, setData] = useState("");
// useSubscribe hook receives message from React Native
useSubscribe((message) => {
if (message.type === "success") {
setData(message.data);
}
});
return (
<div>
<div>{data}</div>
<button
onClick={() => {
// emit sends message to React Native
// type: event name
// data: some data which will be serialized by JSON.stringify
emit({ type: "hello", data: 123 });
}}
/>
</div>
);
};
// This statement is detected by babelTransformer as an entry point
// All dependencies are resolved, compressed and stringified into one file
export default webViewRender(<Root />);
Use the entry file in your React Native app with WebView.
import React from "react";
import WebView from "react-native-webview";
import { useBridge } from "react-native-react-bridge";
import webApp from "./WebApp";
const App = () => {
// useBridge hook create props for WebView and handle communication
// 1st argument is the source code of React app
// 2nd argument is callback to receive message from React
const { ref, source, onMessage, emit } = useBridge(webApp, (message) => {
// emit sends message to React
// type: event name
// data: some data which will be serialized by JSON.stringify
if (message.type === "hello" && message.data === 123) {
emit({ type: "success", data: "succeeded!" });
}
});
return (
<WebView
// ref, source and onMessage must be passed to react-native-webview
ref={ref}
source={source}
onMessage={onMessage}
/>
);
};
I'm trying to use lazy loading for my create-react-app with react#16.5.2 and I did this :
import React, { Component } from 'react';
import { BrowserRouter } from 'react-router-dom';
const Header = React.lazy(() => import('./_header'));
class SomeFile extends Component {
render() {
return (
<BrowserRouter>
<React.Fragment>
<Header />
</React.Fragment>
</BrowserRouter>
);
}
}
export default SomeFile;
Do you know why this error occurs ? is it because of my react version ? based on this everything seems fine!
Edit
What does this mean? based on reactjs.org :
Note:
React.lazy and Suspense is not yet available for server-side rendering. If you want to do code-splitting in a server rendered app, we recommend Loadable Components. It has a nice guide for bundle splitting with server-side rendering.
React.lazy is only available from v16.6.0 https://reactjs.org/blog/2018/10/23/react-v-16-6.html
In your comand line interface, try updating React using the following command:
npm i react#latest
Restart Development Server, if you still face issue try the above steps:
Search for REACT_EDITOR on the Readme.md file, and insert =atom in front of it, like as follow:
REACT_EDITOR=atom
Then, save, restart the development server. It should work now
I'm trying to create an automatic slideshow in react, using react-slideshow. I'm very new to react and have just begun. I got this code from here.
import React from 'react';
import { Fade } from 'react-slideshow-image';
const images = [
'./img/p1.png',
'./img/p1.png',
'./img/p1.png'
];
const Slideshow = () => {
return (
<Fade
images={images}
duration="5000"
transitionDuration="1000"/>
)
}
What I am not getting is how to make this slideshow actually render. What I have done is called this function from inside a component in the same file i.e.
class App extends Component {
render() {
return (
<div className="App">
{Slideshow();}
</div>
);
}
}
export default App;
This is not rendering any slideshow or image, about which I'm not too surprised. The function is running. I console logged something and it got logged on the console. The rest of the page (I have other divs not shown here) is rendered and there is no error thrown. How to make this work?
Nothing seems wrong in this code.
try defining Slideshow() function inside app component.
make a call like "{ this.Slideshow }".
Check by removing "./" in image path. (Try..)
Also check the path of image. Sometime they refer to public folder outside the src folder. maybe public/images/img.png
Slideshow is a React component, so you need to render it using JSX, not invoke the function:
class App extends Component {
render() {
return (
<div className="App">
<Slideshow/>
</div>
);
}
}
export default App;
Does anyone know how to trigger an event whenever a reactnative app is opened? eg. to refresh data whenever a user opens the app again.
Figured it out.
Need to use this. https://facebook.github.io/react-native/docs/appstateios.html#content
Go to that file where navigation starts from.
import React, { Component } from 'react';
import { Root } from './config/router';
class Index extends Component {
componentWillMount(){
//your event function code
}
render() {
return <Root />;
}
}
export default Index;
Here Root contains all screens where navigation starts.