React development based on Webpack+babel

1. What is  Webpack?

Webpack performs as a plugin platform, a module bundler. It treats modules, tools and libs as plugins, which won’t be loaded unit they are really needed. These makes webpack flexible and perform well( run faster).

For example, in webpack  project, css and  babel as treated as individual modules( plugins), we can config loader for these modules in webpack config file, and webpack will help us to build js files according to its config files.

2. How to setup a Webpack+Babel+React development environment?

1). Install webpack globally

npm install webpack -g

2). Install loaders

loaders for css:  npm install css-loader style-loader  --save -dev

loaders for babel and react : npm install babel-preset-es2015 babel-preset-react babel-core babel-loader  --save -dev

3). Install  webpack development server

Webpack development server is a local http server for us to develop.

npm install webpack-dev-server -g

3. Webpack config

When using webpack , we need to create a default config file names  ‘webpack.config.js’ .

A comman config files looks like this:

2016-05-17_222130.jpg

1) entry: point to a default entry file for webpack to build the whole project. The entry file should contain the root node of the project or point to the root node. This image below is  a default entry file,  with the help of entry file, webpack will build the whole project into ‘output’ file

2016-05-17_222358.jpg

2)output:  tells webpack  which is the output file after the whole project is built. We should also import the output file( bundle.js) in index.html

3)loaders: config the babel loader for react and es2015. Any new loaders should be configured here.

3. How to develop a react project based on webpack?

As we can see, the entry file of the project should be ‘Container.js'(configured in entry.js).

2016-05-17_223100.jpg

1) As an try to the whole project, Container.js should create a new react component and insert it into default page. We can see from the codes at the bottom, the element ‘content’ is a default element in index.html, we find it and insert our own component in front of it.

2) All react component ( and react files) should create from react, but there are two kinds of declaring method. The codes shown above is the older grammar, es6 grammar should define as a class.

2016-05-17_223620.jpg

The class should extends from (react) Component, and must have a constructor function.

3) So whats the difference between the two declarations?

First of all, the lower one is recommended, because its es6 grammar.

Second, when we use the former one( React.createClass ),  we will also get a lot react functions, such as getInitState , componentDidMount and so on, which will be called at specific time. But when we use class declaration, we should init state in constructor function, and we don’t have any componentDidMount function to use. This really affect when you want to handle some asynchronous calls.

Third, react provide autobinding in former case. In es6 grammar, we need to bind this ourselves.

Fourth, when we use class, don’t forget to import React and Component from ‘react’

4. What’s more?

Never forget! this.setState() is a asynchronous function!

5. Demos

I have build a pretty nice demo on github : git@github.com:CyrusCai/-Mentoring-Program-Es6-Practice.git

How to build a basic React-native component

Here comes the introduction on how to build components using react-native. Even though I have done some research on react, I meet a lot problems on building my first component for a simple app.

This is the result of 2 days part time job. It’s ugly because I nearly add stylesheets to it. I won’t tell you that this is just a mixture of <Text> and my own <Select> component.
2016-05-11_224846.jpg

I will mainly talk about the architecture of a react-native component.

This is a simple component, I will use it to explain how to build a component.

2016-05-11_224034.jpg

Part 1: Import part

We need to import at least two kinds of lib here. One is the basic component provided by react and react-native, the other is the component written by ourselves.

This 1st line is required by every component, no matter react or react native, because we need to extend react Component to generate our own ones.

The 2nd part is to import components provided by react native, when we use a new react-native component, remember to import it here.( Actually I always forget it.)

The 3rd part is to import our own components, looks like the name doesn’t need to be equal to your export name( See part 4).

Part 2 : Main Class

The concept of ‘class’ is added in javascript version ECMA2015, as a new feature, it allow us to use class declaration instead of prototype. I used to be a java developer, so it’s not difficult for me to understand class.

2016-05-11_231604.jpg

  1. react class should inherit ( extend) from Component, this will provide it default functions.
  2. the most important method is ‘render’, it will return the body of pages. Pay attention to the grammar!
  3. function constructor
    1) It’s the constructor method of class, remember to call super() function at first.
    2) If we have state variable, remember to give init value in constructor, otherwise we will get an error.
    3) If we define some new method, remember to bind it in constructor, because react didn’t provide auto binding(in class) to us.
            this.showPopover = this.showPopover.bind(this);
  4. function getInitialState and componentDidMount are methods provided by react nativegetInitialState : Invoked once before the component is mounted. The return value will be used as the initial value of this.state.
    componentDidMount : Invoked once, only on the client (not on the server), immediately after the initial rendering occurs.

Part 3: Stylesheet

As mentioned before, react native provide Stylesheet for us to add styles( css ) to our page, basically all the grammar is the same as css. We can use it like

<Text style={styles.text}/>

Part 4 : Export

This is the basic grammar of javascript, we can choose any one we like.

  1. export default Header;
  2. module.exports = Header;

Components of React-Native

When tried to make a real project on react native, I find it’s really hard to handle the components provided by react native.

It’s confusing that react native discard all the html components and provide its totally new components. Besides, the react native components don’t cover all the html ones. These increase a lot difficulties on the  development of  react native.

So I try to match the react native components with html ones, which will help me in the future’s work.

1. <div> => <View>

<View style=”” > </View>

2. <Img> => <Image>

 <Image source={{uri: ‘http://xxx.xxx.xx&#8217;}}> </Image>

3. <ul> => <ListView>


<ListView

dataSource={this.state.dataSource}

renderRow={(rowData) => <Text>{rowData}</Text>} />
visit here for details

4. <span> => <Text>

<Text> Hello World</Text>

5. <input> => <TextInput>

 <TextInput

style={{height: 40, borderColor: ‘gray’, borderWidth: 1}}

onChangeText={(text) => this.setState({text})}

value={this.state.text} />

visit here for details

6. <Button> => <Button>

firstly, install this lib:  npm install  apsl-react-native-button

Secondly, add “import Button from ‘apsl-react-native-button‘ ” into code;

<Button style={{backgroundColor: ‘red’}}  textStyle={{fontSize: 18}}>
  Hello!
</Button>

visit here for details
we can use react-native-button as well.

7. <Select> => <ListPopover>

firstly, install this lib:  npm install react-native-list-popover

Secondly, add “import ListPopover from ‘react-native-list-popover‘ ” into code;

<ListPopover
list={items}
isVisible={this.state.isVisible}
onClick={this.setItem}
onClose={this.closePopover}/>

visit here for details

Of course this isn’t the best matching one, but I think this is the simplest one.

 

To be continued.

 

 

React-native start

After installing react native environment, I try to build my first react native app on android.

Actually, it’s easy (not that hard) to develop native app using react native, cause the structure of react is simple.   However, getting a deep understanding of the components provided by react native needs time.

Setup

We should start at setting up react-native-cli globally, which is a command line interface that help to do the rest of setup. After installing react-native-cli, we can use command ‘react native’ for init a new project, build project and so on.

npm install -g react-native-cli

Init a New Project

React native provide generator for us to build new project.

react-native init ProjectName

Run Your Project

1. Start simulator manually

2. Build app

This will install the generated app on your emulator or device, as well as start the Node server which enables live code reloading.

If you have added new resources or modified any native code you will need to re-build the app for the changes to take effect.

react-native run-android

3. Start Server

Actually, I have no idea which server is started.

React-native start

Styles

React native don’t support css, it use Javascript to style our app.

Declare

When declaring style, we should declare it like this.

var styles = StyleSheet.create({
base: {
width: 38,
height: 38,
},
background: {
backgroundColor: ‘#222222’,
},
active: {
borderWidth: 2,
borderColor: ‘#00ff00’,
},
});

Use

<View style={styles.background} />

<View style={[styles.base, styles.background]} />

Tips

1.We can add js grammer when using style. like:

<View style={[styles.base, this.state.active && styles.active]} />
2. React native provide FlexBox for layout, we can find more details here:

Dubugging

We can see console by typing this command :

adb logcat *:S ReactNative:V ReactNativeJS:V

We can see detailed information here

How to Build React-Native environment

We get a new topic today, that is to build a native mobile app using javascript. Two frameworks are recommended: React Native / Native Script. Cause I have do some research on react, I choose react native to build an android application.

It takes 3 hours to get the environment ready, all the steps and focal points are listed here.

Step 1 : Install basic environment

1. Git

2.  Java JDK

http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

3. Android SDK

https://developer.android.com/sdk/installing/index.html

Step 2 : Define Environment Variables

1 JAVA_HOME

JAVA_HOME:  C:\Program Files\Java\jdk1.8.0_77                   (JDK Path)
PATH: %JAVA_HOME%/bin;%JAVA_HOME%/jre/bin;

tips: remember to use ‘java -version’ and ‘java’ to test whether java environment is ok.

2 ANDROID_HOME

ANDROID_HOME : C:\Users\Cyrus_Cai\AppData\Local\Android\sdk      (Android SDK path)

PATH: %ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools;

Step 3 : Configure SDK

  1. Find Android manager ( Android SDK path)
  2. Make sure that the listed items are selected:
    • Android SDK Build-tools version 23.0.1
    • Android 6.0 (API 23)
    • Local Maven repository for Support Libraries (this is called Android Support Repository in older versions)

AndroidSDK1.pngAndroidSDK2.png

Step 4 : Install Genymotion

Genymotion: an emulators which is easier to set up than stock. More research is needed on  Genymotion actually.

We can get Genymotion here

Remember:

1. down individual version( it’s free)

2. VirtualBox is needed to set up Genymotion, if we haven’t installed it, we can download a with virtualBox version.

2016-05-06_011110.jpg

3. After installing Genymotion and virtualBox, remember to add a new virtual device and try to run it. This will help us to test whether android platform is ready or not (I guess).

2016-05-06_011448.jpg

Step 5 : Use gradle deamon

React Native Android use gradle as a build system. It is recommend to enable gradle daemon functionality which may result in up to 50% improvement in incremental build times for changes in java code.

site :https://docs.gradle.org/

how to : copy this command and run it in ‘command line’

(if not exist “%USERPROFILE%/.gradle” mkdir “%USERPROFILE%/.gradle”) && (echo org.gradle.daemon=true >> “%USERPROFILE%/.gradle/gradle.properties”)