Getting started with Android development with React Native without an IDE

PC checklist:

• install android SDK
• install android build tools ( for building from the command line ) and set PATH variables
• install nodejs 12(>= recommended)

ANDROID device checklist:

• enable developer mode
• enable usb debugging within developer mode
• connect your android phone to laptop and tap allow on your phone

On PC:

Install React Native:

npm install react react-native yarn

Install React Native CLI

npm install react-natice-cli -g

Create new project:

react-native init myproject

Setting project package name:

npm install react-native-rename -g react-native-rename “myproject” -b com.mycompany.myapp

This is at the moment a workaround, because of issue: https://github.com/facebook/react-native/issues/12721. Future releases are suppossed to support --package

Clean / Build project:

react-native run-android –tasks clean

Build:

react-native run-android –tasks build

Installing app on connected android device and starting up the app:

react-native run-android –tasks installRelease

Project structure:

• App.js
• index.js
• app.json
• babel.config.js
• android/…
• ios/…
• __tests__/App-test.js
• package.json

Seeing logs:

react-native log-android

Or:

adb logcat|grep React

–

Sample logs for putting:

 console.log('#####Hi'); 

in App.js:

App.js:

import React, {Fragment} from 'react';
import {
  StyleSheet,
  ScrollView,
  View,
  Button
} from 'react-native';

import {
  Colors,
  DebugInstructions,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';

const App = () => {
    
  return (
        
        <ScrollView>
            <View style={styles.sectionContainer}>
            <Button
                onPress={() => {
                    alert('Helloworld!');
                    console.log('#####Hi');
                }}
                title="Click Me"
            />
            </View>
        </ScrollView>
  );
};

const styles = StyleSheet.create({
  sectionContainer: {
    color: '#00FF00',
    backgroundColor: '#000',
  },
});

export default App;

Output logs:

09-16 16:10:41.813 28599 28616 D ReactNative: Initializing React Xplat Bridge after initializeBridge
09-16 16:10:41.814 28599 28616 D ReactNative: CatalystInstanceImpl.runJSBundle()
09-16 16:10:41.840 28599 28621 D ReactNative: ReactInstanceManager.setupReactContext()
09-16 16:10:41.840 28599 28621 D ReactNative: CatalystInstanceImpl.initialize()
09-16 16:10:41.845 28599 28621 D ReactNative: ReactInstanceManager.attachRootViewToInstance()
09-16 16:10:42.166 28599 28620 I ReactNativeJS: #####Hi
09-16 16:10:42.206 28599 28620 I ReactNativeJS: Running application “MyTestProject” with appParams: {“rootTag”:1}. DEV === false, development-level warning are OFF, performance optimizations

Unit Testing:

React Native preconfigures Jest for unit testing. Running:

yarn test

should give:

yarn run v1.12.3
$ jest
 PASS  __tests__/App-test.js (10.046s)
  ✓ renders correctly (7236ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        11.149s
Ran all test suites.
Done in 12.92s. 

Lets put some unit tests in __tests__/App-test.js:

function testSum(a,b){return a+b;}

it('adds 4 + 5 to equal 9', () => {
  expect(testSum(4, 5)).toBe(9);
});

Next yarn test should give us:

yarn run v1.12.3
$ jest
 PASS  __tests__/App-test.js
  ✓ adds 4 + 5 to equal 9 (3ms)
  ✓ renders correctly (377ms)

Test Suites: 1 passed, 1 total
Tests:       2 passed, 2 total
Snapshots:   0 total
Time:        1.555s
Ran all test suites.
Done in 2.27s.

Debugging App Crashes / App sudden stop:

For facing REs start Metro JS bundler and run app on debug mode. Simply run react-native start on a new terminal window. Or running this in current terminal should start up a new window running Metro:

xterm -e 'react-native start' &

now run:

react-native run-android --tasks installDebug

This should start app up in debug mode:

Now saving any changes on App.js should refresh android app istance window instantly running on device while designing UI. And any exception messages whould should right appear on app window.

Getting started with Preact : helloworld standalone example

Preact looks to be the most closest React alternative in terms of code similarity. There official motto: "Fast 3kB alternative to React with the same ES6 API". You almost have to change nothing in the codes if you look to switch your React application to Preact. Lets have a quick look at a simplest Preact standalone helloworld component example with JSX/babel embedded in single html page, the very 'clock' example in their documentation :

1. <html>
2. <head></head>
3. <body>
5. <div id="abcd"></div>
7. <script src="https://npmcdn.com/preact@2.8.3/dist/preact.js"></script>
8. <script src="https://npmcdn.com/preact-compat@0.6.1/preact-compat.js"></script>
9. <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>
11. <script>
12. window.React = preactCompat;
13. window.ReactDOM = preactCompat;
14. </script>
16. <script type="text/babel">
18. const { h, render, Component } = preact; // normally this would be an import statement.
20. class Clock extends Component {
21. constructor() {
22. super();
23. // set initial time:
24. this.state.time = Date.now();
25. }
27. componentDidMount() {
28. // update time every second
29. this.timer = setInterval(() => {
30. this.setState({ time: Date.now() });
31. }, 1000);
32. }
34. componentWillUnmount() {
35. // stop when not renderable
36. clearInterval(this.timer);
37. }
39. render(props, state) {
40. let time = new Date(state.time).toLocaleTimeString();
41. return <span>{ time }</span>;
42. }
43. }
45. render(<Clock/>, document.getElementById('abcd'));
47. </script>
48. </body>
49. </html>

Reference:

https://preactjs.com/guide/getting-started