Slowly moving articles from SF…

Segmentfault.com/a/119000001…

TL.DR

This post is an RN version of How It Feels to Learn JavaScript in 2016 and is not intended as a guide.

Hi, I’m going to do a side project with React Native. You are our RN’s most expert elder brother, can you give me some advice?

no problem

Too good. I just checked RN’s website and installed Node and Watchman, right?

How do you install Node?

Brew Install node.

No, you have to install NVM first.

nvm?

The Node Version Manager. Node is the product of the front end circle, and these guys are crazy, and they don’t recognize each other when iterating. RN’s development tool chain is heavily dependent on Node. You wrote the demo a week ago and may not be able to run it after updating it. NVM allows you to install multiple Versions of Node and switch as needed. You can install an LTS version as the main release, and then install the latest version to track the progress of the community, like this

nvm install lts
Copy the code

That makes sense.

Install the react-native CLI using Yarn.

Yarn?

The new Node package manager, from FB, is a must. Fully compatible with existing NPM packages and similar commands.

Why don’t you just use NPM? .

Yarn runs higher, faster, stronger, and you deserve it. You are advised to use Yarn to manage other NPM packages.

Ok. In terms of editors, I’m using Sublime Text, and the plugins I can find for RN are pretty rudimentary. Do you have any recommendations?

FB made a plug-in for RN based on Atom — Nuclide, which is officially supported by RN.

Okay, official endorsement. I like it.

Microsoft has also made a Visual Studio Code plugin for RN — vscode-React-native, which is also very good, and feels more stable than FB. Microsoft has a set of development tools. And VSC maintainer has opened micro blog, ridicule more convenient.

Oh!

Speaking of development tools, WebStorm now supports RN development as well.

Oh?

Deco, an IDE made specifically for RN, supports visual programming, which is also good.

Oh…

The open source React-Native Debugger is also getting better.

Give it away.

. VSC.

Looks good, direct support for autocomplete. But there seems to be something wrong with the static check

export default class App extends Component<Props> {
  / /...

  square(n) {
    return n * n;
  }

  test() {
    this.square("2")}}Copy the code

There is no error.

JS is a weakly typed language, so if you need static analysis like type validation, you need Flow.

Let me guess, FB, it’s a must-have?

That’s right! If you look at your project, it already has a.flowconfig file attached. If you scroll down to the bottom, you can see the flow version of the project requirement

[version] ^ 0.65.0Copy the code

Different versions of the React-native CLI may specify different versions of flow, and it is better to install flow as a native package. Use Yarn, of course

Yarn add [email protected] - devCopy the code

Once you’ve loaded it, run it manually

yarn run flow
Copy the code

That’s it.

Do it manually every time?

Of course it can’t be that dirty. VSC has a plugin that supports flow. Set it up after installing it

# Workspace Settings
{
   "javascript.validate.enable": false,
   "flow.pathToFlow": "./node_modules/.bin/flow"
}
Copy the code
# package.json"Scripts ": {"start": "node node_modules/react-native/local-cli/cli.js start", "test": "jest", "flow": "flow" // add this line},Copy the code

It’s just like saying OC in Xcode, look

Is Flow just type checking? You still won’t get an error if you do that.

export default class App extends Component<Props> {
  / /...

  test() {
  }

  test() {
  }
}
Copy the code

B: well… You caught me.

Made by FB, must be the best?

This is a JS problem. JS supports function with the same name.

Do you have the tools to fix it?

Yes, TypeScript.

. Are you sure this is just a tool?

Programming languages are tools.

It’s just static analysis, changing languages…

Don’t worry, it’s not as dramatic as it sounds. TypeScript just adds data types and other strongly typed language features to JS, and the syntax is pretty much the same.

Also, TypeScript is only a development concept; it runs in JS.

Like OC, which is OC when it’s written, but actually C++ when it’s run, right?

Right! You’re smart enough to be someone who wants to take RN.

(I already regret it…) What about TypeScript?

First you need to be able to use React and React Native code in TS code.

Uh, add a ts declaration for each type in each library?

Something like that. But you don’t have to do it yourself, there are already a lot of people in the community, you can just use it.

yarn add --dev react-native-typescript-transformer typescript @types/react @types/react-native
Copy the code

What does this Transformer do?

It compiles the TS code into JS and hands it to the React Native Packager for processing. Packager itself does not directly handle TS code.

Packager?

As the name suggests, it packs all your JS files into a bundle and dumps them to the device. Before TypeScript was introduced, its main function was to convert your JS code into device-appropriate JS code using Babel…

Wait, Babel?

Ah, you know there are different versions of JS, ES5, ES6, ES7/8, etc. Different devices support different versions of JS. But you always want to stick to one version of JS when you’re developing, so you need a tool to convert the JS you write into a specific version of JS before throwing it out to the device. Babel is one such tool.

So with TypeScript introduced…

Yes, it’s an extra step. The React Native Packager will use transformer to compile your TS code into a specific version of js code. The whole process goes something like this, look

What a bother…

It’s easy to do. Create a new Rn-cli.config. js file in the project root directory, which is the Packager configuration file.

# rn-cli.config.jsmodule.exports = { getTransformModulePath() { return require.resolve('react-native-typescript-transformer') }, getSourceExts() { return ['ts', 'tsx']; }}Copy the code

In this way, modifying TS code can also take advantage of RN’s Hot reloading feature.

All right. I’ll give it a try

I finally feel like I’m writing code. Is this how front-end developers live their lives…

Long live understanding, long live understanding.

Can I get to work now?

Not yet. You just set up the static environment. If you are trying to debug using the VSC debugger, the breakpoint you set in the TS code is invalid.

Why not? ?

The breakpoint you set is in the TS code, and the position of the breakpoint will change accordingly when the js code is generated.

People speaking.

Json to record the mapping between TS code and JS code

{
   "compilerOptions": {
     //...
     "sourceRoot": "src",
     "inlineSourceMap": true
   },
}
Copy the code

This will make the breakpoint work properly.

Okay, so you’ve got the environment, and you’ve got a pretty good idea of the tool chain.

This may surprise you, but BY the time you introduced me, I had almost finished writing it in OC. Your circle is so messy, I’ll just go back to OC. Writing Swift in Xcode is a breeze compared to RN…