chatty_new第一篇

Step 1.1: Create package.json and index.js

# make our directory
mkdir chatty
cd chatty
# start npm package managing
npm init
# build some server folders and files
mkdir server
cd server
touch index.js

　　

Setting up the dev environment

We’ll start setting up our dev env with the following features:

1. Server stays running and reloads when we modify code
2. ES6 syntax including import syntax in our server code
3. ESLint with AirBNB presets

npm install --save-dev @babel/core @babel/cli @babel/preset-env nodemon eslint babel-eslint

　　安装babel/node

npm install --save-dev @babel/node

　　初始化eslint

eslint --init  # choose airbnb preset or your preferred setup

　　

Step 1.2: Add eslint, babel, and nodemon

Added .eslintrc.js

module.exports = {
    "parser": "babel-eslint",
    "extends": "airbnb",
    "plugins": [
        "react",
        "jsx-a11y",
        "import"
    ],
    "rules": {
        "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
        "react/require-default-props": [0],
        "react/no-unused-prop-types": [2, {
            "skipShapeProps": true
        }],
        "react/no-multi-comp": [0],
        "no-bitwise": [0],
    },
};

　　

Step 1.3: Create start script

Changed package.json

...

  "scripts": {
    "start": "nodemon --watch server --watch package.json server/index.js --exec babel-node --presets  @babel/preset-env"
  },

　　

Starting the Express server

Let’s import apollo-server in index.js using ES6 syntax.

npm install --save apollo-server graphql

　　Changed server/index.js

import { ApolloServer, gql } from 'apollo-server';
const PORT = 8080;
// basic schema
const typeDefs = gql`
  type Query {
    testString: String
  }
`;
const server = new ApolloServer({ typeDefs, mocks: true });
server.listen({ port: PORT }).then(({ url }) => console.log(`🚀 Server ready at ${url}`));

　　Quickly verify our setup works by running 

npm start

　　 🚀 Server ready athttp://localhost:8080/

Starting the React Native client

windows下安装Andriod环境

choco install -y nodejs.install python2 jdk8
npm install -g react-native-cli
1. Install Android Studio
2. Install the Android SDK
3. Configure the ANDROID_HOME environment variable

　　详见：https://facebook.github.io/react-native/docs/getting-started.html

# initialize RN with name chatty
react-native init chatty
# --- from here on out we'll be doing our own thing ---
# change name of RN folder to client
mv chatty client
# run the app in simulator
cd client
react-native run-android 
# and grab a snack or something cause this might take a while the first run...

　　

　　

Step 1.6: Move app code to /src

Changed client/index.js

import {AppRegistry} from 'react-native';
import App from './src/app';
import {name as appName} from './app.json';
AppRegistry.registerComponent(appName, () => App);

　　Changed client/App.js

    'Shake or press menu button for dev menu',
});
export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>

　　

Adding Apollo to React Native

npm install apollo-boost react-apollo graphql --save

　　Changed client/src/app.js

import ApolloClient from 'apollo-boost';
import { ApolloProvider } from "react-apollo";

const URL = 'localhost:8080';
const client = new ApolloClient({
  uri: `http://${URL}`
});

　　

Step 1.8: Add ApolloProvider to App

Changed client/src/app.js

      <ApolloProvider client={client}>
        <View style={styles.container}>
          <Text style={styles.welcome}>Welcome to tianya!</Text>
          <Text style={styles.instructions}>To get started, edit App.js</Text>
          <Text style={styles.instructions}>{instructions}</Text>
        </View>
      </ApolloProvider>