martes, 17 de diciembre de 2024



REACT WITH REDUX 2024

PARA CREAR UN PROYECTO REACT DESDE EL 06 / 12 / 24
USANDO VITE REACT 19
npm create vite jsx -- --template=react
cd jsx
npm install
Iniciar el proyecto
npm run dev
Vite comenzará en el puerto 5173 por defecto, en vez del acostumbrado 3000. Si necesitas cambiar el puerto esto lo puedes hacer en el archivo de configuración vite.config.js
Otro punto notorio es que el index.js , con vite es el main.js
USANDO REACT 18
npm create-react-app
cd jsx
npm install
Iniciar el proyecto
npm start
Si nos da error relacionado con webVitals: instalar la librería faltante .
npm install --save-dev web-vitals

jueves, 25 de abril de 2019

Requerimientos:

- Google Chrome.
- React Developer tools, JsonView, redux dev tools y react performance development para chrome.
- Un editor de texto entre sublimetext, atom o visualcode. Instalar plugins del editor para snippets, shortcuts y potenciadores.


Consola:

- npm install -g create-react-app.
- crear carpeta de workspace y seguidamente en la consola ingresar create-react-app + nombre proyecto.
- Ingresar a la carpeta del proyecto desde consola e ingresar npm run start

Si fuese el caso de clonar repositorios seguir los siguientes pasos:
- En consola escribir git clone + repositorio.
- Ingresar en carpeta de proyecto clonada y ejecutar npm install para tener las dependencias.
- Probar este todo ok con npm run start.


Sugerencias:
- npm install bootstrap

sábado, 21 de abril de 2018





This is my way to mockup and build/write react native applications.
Steps:

1) PLEASE THINK AGAIN AND AGAIN ON YOUR IDEA.

2) Make a basic mokup of your app. You can use MOCKUP PLUS PROTOTYPER or you can use JUST IN MIND PROTOTYPER


















3)Go into your project folder and install the following libraries:

npm install redux@3.7.2 --save . It's a model layer for react
npm install react-redux@5.0.7 --save . It's a model layer for react
npm install redux-thunk@2.2.0 --save . For asynchronous transactions. Make your actions can return functions... Dispatch.
npm install react-native-router-flux@3.35.0 --save . Deal with navigation.
Optional for maps install: npm react-native-maps --save
If you got any problem with a library you can delete it from package.json and use the command npm prune.
4) Open your folder app with Atom IDE to start work on code. Each time you save your files, the project will reload and show changes by default.

5) Install Nuclide package atom for many development features including debug.

6) Create a components folder into your root app folder, go inside this one, and create another folder called common.

7) Import or create into common folder all .js files that you must have to reuse, like Buttons, Inputs, Header, Footer, Spinners, etc..., Those must have an index.js file that make export * to your project.

8) Create an action folder into your root folder, then inside create an index.js, for each operation or module you must create a new file and import to index.

9) Create a reducers folder into your root folder, then inside create an index.js, for each operation or module you must create a new file and import to index.

5) Open your App.js file and add the following lines:
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import reducers from './reducers';
import LoginForm from './components/LoginForm';

Add This new render, return lines to work with redux:

render() { return ( ); }





Que me disculpe el español pero prefiero escribir en inglés todo el artículo...

Follow this steps to get a hello world project fastly, running on a windows os.

REQUERIMENTS:
- Windows OS.
- Free internet without proxies (if not installation packages must fail).

INSTALLATION STEPS:

1) Get a good windows console program like CMDER full with Github. Rememember to open Cmder as admin.

2) Install NODEJS last version. Verify it after installation by console with: node -v

3) Install NPM version 4 (it must be compatible with expo, so just install 4 for now) by console:
npm install -g npm@4
Verify it after installation with: npm -v

4) Install Expo from Facebook by console with:

npm install exp --global

Remember to check node or nodejs, npm and exp to be included into your PATH variable.

If all ok you should be allowed to type exp on console with this result:













5) Create an EXPO ACCOUNT. You must have internet without proxies or this registration could fail.

6) Install EXPO CLIENT into your mobile device.

7) For write code get a good IDE like ATOM IDE, then install react, react-redux and other atom packages if you like.

8) On your explorer create a workspace folder, then go to your Cmder console and type:

exp init MY-APP











9) Preview your React Native App typing on your console (inside your app folder):

exp start



Then you must open your expo android/ios application on your device, then select scan QR, and just get that code on your pc... then it will start automatically if you have done all steps ok.

sábado, 4 de noviembre de 2017



React-Native es una plataforma desarrollada por Facebook, open source para el desarrollo de aplicaciones móviles cross-platform completamente nativas utilizando React y por lo tanto nuestro amado JavaScript ;).

Para instalar react native en un entorno windows por favor sigue los siguientes pasos:

1) Instalar Nodejs 6+
2) Instalar python 2.7+
3) Instalar JDK java 8+
4) Instalar Android studio, versión compatible con jdk.
5) npm install -g react-native-cli
6) react-native init "NOMBRE APP"
7) Install emulator device avd android, con api 23 o el que pide react-native al abrir el proyecto en AndroidStudio.
8) Iniciar el emulador desde android studio.
9) System settings, environment variables.
- Add JAVA_HOME (arriba)
- Add a Path -> C:\Users\Laptop\AppData\Local\Android\sdk\platform-tools (DEBES REESCRIBIR LAPTOP POR TU USUARIO EN EL PC)
10) En la carpeta de tu proyecto ejecutar: react-native run-android

miércoles, 27 de septiembre de 2017



El mejor tutorial para configurar la página web en tu apache2 de ubuntu se encuentra en el siguiente enlace:

VER TUTORIAL

Referencias personales de utilidad
Agregar al archivo etc/apache2/apache2.conf tu carpeta contenedora de la página web como lo muestra el ejemplo:

<Directory home="" ites="" iweb="" workspace="">
Options Indexes FollowSymLinks
AllowOverride All
Require all granted
</Directory>



Al archivo /etc/apache2/sites-available/000-default.conf modificar parametros, ejemplo:
<Virtualhost>
ServerName www.javadoh.com
ServerAlias *.javadoh.com
ServerAdmin webmaster@localhost
DocumentRoot /home/workspace/Sites/MiWeb
ErrorLog ${APACHE_LOG_DIR}/error.log
CustomLog ${APACHE_LOG_DIR}/access.log combined
</Virtualhost>


Recomiendo seguir el tutorial del enlace paso a paso y será muy fácil configurar tu web.

miércoles, 5 de julio de 2017

Si te encuentras con errores al instalar paquetes (librerías) npm en tu pc y visualizas mensajes de este tipo: self_signed_cert_in_chain...

Debes ejecutar el siguiente código en tu consola:

npm config set registry="http://registry.npmjs.org/"

Inmediatamente vuelve a ejecutar tu npm install y verás que corre sin problemas...

viernes, 1 de julio de 2016

Google Play Services with Android 6.0 Marshmallow and Genymotion

Google Play Services with Android 6.0 Marshmallow and Genymotion

So, I think you want to install the Google Play Store & Services with an Android 6.0 Marshmallow Emulator?

To do that, follow either the long or the short version.

You need the following three files:

Short version:

  • Download all three files.
  • Create an emulator with the Nexus 5X image and start it.
  • Flash Genymotion-ARM-Translation_v1.1.zip and reboot.
  • Flash gapps-L-4-21-15.zip and reboot.
  • Sign into your Google Account.
  • Flash benzo-gapps-M-20151011-signed-chroma-r3.zip and reboot.
  • You are finished!

Long version:

Then start GenyMotion and add an emulator with the preset !! PREVIEW - Google Nexus 5X - 6.0.0 - API 23 - 1080x1920. Start it and wait until you see the homescreen.

The next step is to flash the Genymotion-ARM-Translation_v1.1.zip. To do that, just drap & drop the .zip file onto the emulator.

Turn the emulator off with the power button and wait until it is powered off. Then turn it on again.

Now repeat the last two steps with gapps-L-4-21-15.zip (flash, reboot).

If you are finished with that, sign into your Google account (you can do that when opening the Play Store). If you are successfully logged in, flash the benzo-gapps-M-20151011-signed-chroma-r3.zip file and reboot again.

Have fun with your working Google Play Store!

Source: gist.github.com

Subscribe to RSS Feed Sígueme en twitter!