PR-753737: Cambiando la carpeta src a client y moviendo todo a una carpeta dentro de client llamada src.

client/src/frontend/components/App.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import PrincipalRoutes from './PrincipalRoutes';
+
+const App = () => <PrincipalRoutes />;
+
+export default App;

client/src/frontend/components/InitialComponent.jsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+const InitialComponent = () => <h1>Hello React!</h1>;
+
+export default InitialComponent;

client/src/frontend/components/OtherComponent.jsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+const OtherComponent = () => <h1>Other Component!</h1>;
+
+export default OtherComponent;

client/src/frontend/components/PrincipalRoutes.jsx

@@ -0,0 +1,11 @@
+//Router
+import { useRoutes } from 'react-router-dom';
+//Routes
+import routes from '../../routes';
+
+const PrincipalRoutes = () => {
+	let element = useRoutes(routes);
+	return element;
+};
+
+export default PrincipalRoutes;

client/src/frontend/index.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import { hydrateRoot } from 'react-dom/client';
+// Router
+import { BrowserRouter as Router } from 'react-router-dom';
+// Redux
+import { Provider } from 'react-redux';
+import { IInitialState } from './reducers/index.js';
+import setStore from './setStore.js';
+import { config } from '../../config';
+
+import './styles/global.sass';
+import App from './components/App';
+import serviceWorkerRegistration from '../../serviceWorkerRegistration';
+
+declare global {
+	interface Window {
+		__PRELOADED_STATE__?: IInitialState;
+	}
+}
+
+declare global {
+	interface NodeModule {
+		hot?: IHot;
+	}
+}
+
+interface IHot {
+	accept: any
+}
+
+const { env } = config;
+
+const preloadedState = window.__PRELOADED_STATE__;
+const store = setStore({ initialState: preloadedState });
+
+delete window.__PRELOADED_STATE__;
+
+const container = document.getElementById('app')!;
+
+// add "const root" to be able to rerender.
+hydrateRoot(container,
+	<Provider store={store}>
+		<Router>
+			<App />
+		</Router>
+	</Provider>,
+	// Add this comment to update later app and remove warning
+	/* { 
+        onRecoverableError: (error) => {
+          console.error("recoverable", error);
+        }
+    }, */
+);
+
+// Use root.render to update later the app
+/* root.render(
+    <Provider store={store}>
+        <Router>
+            <App />
+        </Router>
+    </Provider>
+); */
+
+// If you want your app to work offline and load faster, you can change
+// unregister() to register() below. Note this comes with some pitfalls.
+// Learn more about service workers: http://bit.ly/CRA-PWA
+//serviceWorker.register();
+
+if((env) && (env === 'production')){
+	serviceWorkerRegistration();
+}
+
+if(module.hot){
+	module.hot.accept();
+}

client/src/frontend/reducers/index.ts

@@ -0,0 +1,13 @@
+import { combineReducers } from 'redux';
+import testReducer, { ITestReducer } from './testReducer';
+
+export interface IInitialState {
+	testReducer?: ITestReducer | undefined
+}
+
+const rootReducer = combineReducers({
+	// Here comes the reducers
+	testReducer
+});
+
+export default rootReducer;

client/src/frontend/reducers/initialState.js

@@ -0,0 +1,2 @@
+let initialState = {};
+export default  initialState;

client/src/frontend/reducers/testReducer.ts

@@ -0,0 +1,22 @@
+export interface ITestReducer {
+	hello: any | undefined
+}
+
+const initialState = {
+	hello: 'world'
+};
+
+const testReducer = (state = initialState, action: { type: any; payload: { hello: any; }; }) => {
+	switch (action.type){
+	case 'CHANGE_HELLO': {
+		const newHello = action.payload.hello;
+		return {
+			hello: newHello
+		};
+	}
+	default:
+		return state;
+	}
+};
+
+export default testReducer;

client/src/frontend/setStore.js

@@ -0,0 +1,26 @@
+// Redux
+import { createStore } from 'redux'; //, applyMiddleware
+// import { Provider } from 'react-redux';
+import { composeWithDevTools as composeWithDevToolsWeb } from 'redux-devtools-extension';
+import { config } from '../../config';
+import reducer from './reducers';
+
+const { env } = config;
+
+const composeEnhancers = composeWithDevToolsWeb({
+	// Specify here name, actionsBlacklist, actionsCreators and other options
+});
+
+const setStore = ({ initialState }) => {
+	const store = env === 'development' ? createStore(
+		reducer,
+		initialState,
+		composeEnhancers(),
+	) : createStore(
+		reducer,
+		initialState,
+	);
+	return store;
+};
+
+export default setStore;

client/src/frontend/styles/global.sass

@@ -0,0 +1,6 @@
+$base-color: #c6538c
+$color: rgba(black, 0.88)
+
+body
+    background-color: $base-color
+    color: $color