Develop Reference

React and Node show nothing when i run the localhost

i have a issue with my projec, i am doing everything just like the man of tutorial, but when i run the server, my http://localhost:3000/ show me nothing, there is not error, but neither do nothing.
All this hapenned when i imported the react-roter-dom and changed the App.js
from This
function App() {
return (
<div>
<h1>Hello world</h1>
</div>
);
}
export default App;
to this
import React from "react";
import { createRoot } from "react-dom/client";
import {
createBrowserRouter,
RouterProvider,
Route,
Link,
} from "react-router-dom";
import Login from "./pages/Login";
import Register from "./pages/Register"
const router = createBrowserRouter([
{
path: "/",
element: <div> This is home world!</div>,
},
]);
function App() {
return (
<div>
<RouterProvider router={router}> </RouterProvider>
</div>
);
}
export default App;
and it should at least show the message "this is home world"
Please help me, Because i dont know what is hapening, no show error but it doesn't do anything either
this is what i got
after the router dom
before put the router dom show me " hello world" with this
function App() {
return (
<div>
<h1>Hello world</h1>
</div>
);
}
export default App;
index.JS
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
dev console
App.js
import React from "react";
import { createRoot } from "react-dom/client";
import {
createBrowserRouter,
RouterProvider,
Route,
Link,
} from "react-router-dom";
import Login from "./pages/Login";
import Register from "./pages/Register"
const router = createBrowserRouter([
{
path: "/",
element: <div> This is home world!</div>,
},
]);
function App() {
return (
<div>
<RouterProvider router={router}/>
</div>
);
}
export default App;
the consolo show me these errors

I think you just didn't save the initial code. You might want to turn on autosave on your vs code. And use the normal react render method for your index and app files.
Index.js :
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<App/>,
document.getElementById('root'));
App.js:
import React from 'react'
const App = () => {
return (
<div>
<h1>GPT-3</h1>
</div>
)
}
export default App
Try to run this but save the code or turn on auto-save

React-Router-Dom (v6) not working / Can't render the home component

After updating to react router V6 my component no longer renders:
Trying to render the home component within my app, seems like the router is correctly organized according to React Router V6.
I am able to render the "SubredditAside" component which is located outside of the in the App.js but trying to render the Home component doesnt seem to be working
App.js:
import React from 'react';
import {
BrowserRouter,
Routes,
Route,
Router,
} from "react-router-dom";
import { selectDarkMode } from "../features/Theme/themeSlice";
import { useSelector } from "react-redux";
import './App.css';
import "../features/Theme/theme.css";
import Header from "../features/Header/Header";
import Home from "../features/Home/Home";
import SearchResults from "../features/SearchResults/SearchResults";
import SubredditsAside from "../features/SubredditsAside/SubredditAside";
import Subreddit from "../features/Subreddit/Subreddit";
import NotFoundPage from '../features/NotFoundPage/NotFoundPage';
function App() {
const darkMode = useSelector(selectDarkMode);
return (
<BrowserRouter>
<div id="app-container" className={darkMode ? "dark" : "light"}>
<Header />
<main>
<Routes>
<Route path="/" component={Home}/>
<Route path="/r/:id" component={Subreddit}/>
<Route path="/search/:id" component={SearchResults}/>
<Route component={NotFoundPage} />
</Routes>
</main>
<aside>
<SubredditsAside />
</aside>
</div>
</BrowserRouter>
);
}
export default App;
Home.js
import React, { useEffect } from "react";
import Filters from "../Filters/Filters";
import Post from "../Post/Post";
import PostLoading from "../Post/PostLoading";
import NotFoundPage from "../NotFoundPage/NotFoundPage";
import { AnimatedList } from "react-animated-list";
import { useDispatch, useSelector } from "react-redux";
import {
loadPostsHot,
selectPosts,
selectIsLoading,
selectError,
} from "../../app/appSlice";
import { setCurrentSubreddit } from "../SubredditsAside/SubredditAsideSlice"
import { setCurrentFilter } from "../Filters/filtersSlice";
const Home = ({ match }) => {
const dispatch = useDispatch();
const posts = useSelector(selectPosts);
const isLoading = useSelector(selectIsLoading);
const error = useSelector(selectError);
const currentSubreddit = match.params.id;
useEffect(() => {
dispatch(setCurrentFilter("hot"));
dispatch(setCurrentSubreddit(""));
dispatch(loadPostsHot());
}, [dispatch, currentSubreddit]);
if (error) {
return <NotFoundPage />;
}
return (
<>
<Filters />
{isLoading ? (
<AnimatedList>
<PostLoading />
<PostLoading />
<PostLoading />
</AnimatedList>
) : (
posts.map((post, index) => (
<Post key={index} post={post} postIndex={index} />
))
)}
</>
);
};
export default Home;
Index.js:
import React from 'react';
import { ReactDOM } from 'react';
import { createRoot } from 'react-dom/client';
import { Provider } from 'react-redux';
import { store } from './app/store';
import App from '../src/app/App';
import reportWebVitals from './reportWebVitals';
import './index.css';
import "#fontsource/roboto";
// import "./base.css";
import { BrowserRouter } from 'react-router-dom';
const container = document.getElementById('root');
const root = createRoot(container);
root.render(
<React.StrictMode>
<Provider store={store}>
<App />
</Provider>
</React.StrictMode>
);

React shows blank white screen for localhost:3000

Building a test web3 website and can't figure out why to react is showing blank. Hoping you guys can help!
App.js
import { useState } from 'react';
import './App.css';
import MainMint from "./MainMint";
import NavBar from "./NavBar";
function App() {
const [accounts, setAccounts] = useState([]);
return (
<div className="App">
<NavBar accounts={accounts} setAccounts={setAccounts} />
<MainMint accounts={accounts} setAccounts={setAccounts} />
</div>
);
}
export default App;
Index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);

Set a cookie in react to true all the time

I want to set a cookie to be on true all the time, not when something is happening or something is clicked.
So there are several tutorials and articles about that. In my case it should be something like: 'mySpecialCookie = true'.
Installing the package: npm install react-cookie
Does it need to be imported in both index.js and App.js?
My index.js looks like this:
import React from 'react';
import ReactDOM from 'react-dom';
import configureStore from './store/configureStore';
import getMiddlewares from './middlewares';
import App from './containers/App';
import * as serviceWorker from './serviceWorker';
const storeConfig = configureStore(getMiddlewares());
ReactDOM.render(
<storeConfig.Provider store={storeConfig.store}>
<App />
</storeConfig.Provider>,
document.getElementById('root')
);
serviceWorker.unregister();
So I assume that inside ReactDOM it should be changed to this?
import { CookiesProvider } from "react-cookie";
...
ReactDOM.render(
<storeConfig.Provider store={storeConfig.store}>
<CookiesProvider>
<App />
</CookiesProvider>
</storeConfig.Provider>,
document.getElementById('root')
);
And in App.js I added it using useCookies hooks but don't know where to use it:
import React, { useEffect } from 'react';
import { useCookies } from 'react-cookie'; //// <--- added it here
import { IntlProvider } from 'react-intl';
import { useSelector, shallowEqual, useDispatch } from 'react-redux';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import Main from './Main';
import OrderDetails from './OrderDetails';
import { fetchDictionary } from '../actions/dictionary';
import { getLanguageCode } from '../utils';
import { HOME_PAGE, ORDER_DETAILS } from '../constants/routes';
const App = () => {
const dictionary = useSelector((state) => state.dictionary, shallowEqual);
const routes = [
{ path: HOME_PAGE, component: Main },
{ path: `${ORDER_DETAILS}/:id`, component: OrderDetails }
];
const dispatch = useDispatch();
const [mySpecialCookie, setMySpecialCookie] = useCookies(true); //// <--- added it here
useEffect(() => {
dispatch(fetchDictionary(getLanguageCode()));
}, [dispatch]);
return (
<IntlProvider
key={dictionary.locale}
locale={dictionary.locale}
messages={dictionary.messages}>
<Router>
{routes.map((route, index) => (
<Route
key={index}
path={route.path}
exact
component={route.component}
/>
))}
</Router>
</IntlProvider>
);
};
export default App;
Any suggestions?

I have found a much shorter way to do it using js-cookie.
In the App.js file:
...
import Cookies from 'js-cookie';
...
const App = () => {
...
Cookies.set('mySpecialCookie', true);
...
}

Could not find store using redux-form

Console is throwing the following error:
Could not find "store" in either the context or props of "Connect(Form(Form))". Either wrap the root component in a < Provider >, or explicitly pass "store" as a prop to "Connect(Form(Form))".
Done everything as said in redux-form tutorial, previously store was working with a mock reducer.
The line in which the error appears is where render() is executed -take a look at index.js file-.
configureStore.js
import { createStore } from 'redux';
import { devToolsEnhancer } from 'redux-devtools-extension';
import rootReducer from './rootReducer';
export default function configureStore(initialState = {}) {
const store = createStore(rootReducer, initialState, devToolsEnhancer());
return { store };
}
index.js
import React from 'react';
import { render } from 'react-dom';
import Root from './Root';
import './index.css';
import App from './whitesheet-components/App';
import registerServiceWorker from './registerServiceWorker';
import configureStore from './store/configureStore';
const { store } = configureStore();
const MOUNT_NODE = document.getElementById('root');
render(
<App>
<Root store={store} />
</App>,
MOUNT_NODE,
);
registerServiceWorker();
Root.js
import React from 'react';
import PropTypes from 'prop-types';
import { Provider } from 'react-redux';
const Root = ({ store }) => (
<Provider store={store} />
);
Root.propTypes = {
store: PropTypes.object.isRequired,
};
export default Root;
rootReducer.js
// use combineReducers when they are more than one
import { combineReducers } from 'redux';
import { reducer as form } from 'redux-form';
import mockReducer from './mockReducer';
const rootReducer = combineReducers({
mockReducer,
form,
});
export default rootReducer;
Form.js
import React from 'react';
import { Field, reduxForm } from 'redux-form';
import PropTypes from 'prop-types';
import titleField from './titleField';
const Form = (props) => {
const {
handleSubmit, submitting,
} = props;
return (
<form onSubmit={handleSubmit}>
<Field component={titleField} />
<div>
<button type="submit" disabled={submitting}>
Submit
</button>
<button type="button" disabled={submitting} onClick={() => console.log('boton para agregar input')}>
+
</button>
</div>
</form>
);
};
Form.propTypes = {
handleSubmit: PropTypes.any.isRequired,
submitting: PropTypes.any.isRequired,
};
// validate: nombreFuncion, // <--- validation function given to redux-form
export default reduxForm({
form: 'exerciseCreatorForm', // a unique identifier for this form
})(Form);
ExerciseCreator.js
import React from 'react';
import Form from './Form';
import './styles.css';
const ExerciseCreator = () => (
<div className="component-exercise-creator">
<Form />
</div>
);
export default ExerciseCreator;

Have the provider wraps the your App component, not the other way around. Like this:
// Root.js
// ...other codes...
const Root = ({ store, children }) => (
<Provider store={store}>{children}</Provider>
);
// ...other codes...
// index.js
// ...other codes...
render(
<Root store={store}>
<App />
</Root>,
MOUNT_NODE,
);
// ...other codes...