REACT NATIVE PROJECT ARCHITECURE AND DEVELOPMENT STEPS BY LUIS LIBERAL

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 ( ); }

Leer más

REACT NATIVE WITH EXPO HELLO WORLD ON A WINDOWS ENVIRONMENT

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.

Leer más