Refreshes documentation #35

ashfurrow · 2018-03-28T00:10:26Z

Hello! This PR updates the documentation in this repo to reflect more contemporary practices. The PR does the following:

Updates the readme docs.
- Recommends Yarn.
- Moves to React Native Typescript Transformer instead of using an output directory.
- Replaces the Enzyme rendering test (which has compatibility issues with React Native) with a snapshot test.
- Updates the example Hello component to be a bit more modern.
- Fixes formatting/markdown inconsistencies.
- Adds a list of helpful resources at the end.
Deletes all existing code and re-generates it based on the new readme (and in the ExampleProject directory).

Thanks to @orta for his help working through this.

Fixes #34.

Cleans out old files. First draft of setup instructions. Removes old files. Updates instructions. Wraps up docs refresh. Adds example project. Runs Readme and code through Prettier. Removes yarn start specifier. Updates Hello component for modern conventions. Adds git commit instructions. Increases enthusiasm in test.

msftclas · 2018-03-28T00:10:39Z

All CLA requirements met.

orta · 2018-04-04T21:23:56Z

We've moved these changes to also be on the React Native blog ^

phwb · 2018-04-05T02:34:29Z

Hi, you are going to merge this PR? I want to translate this guide in to russian languge, but i want to do this with newest inforamtion.

DanielRosenwasser

I haven't gotten the chance to try this out, but the changes look great.

Apart from the requested changes, one thing I'd appreciate is if you could break each sentence onto its own line. It makes diffs significantly easier to review.

DanielRosenwasser · 2018-04-06T18:17:14Z

README.md

+
+## Migrating to TypeScript
+
+Rename the generated `App.js` and `__tests_/App.js` files to `App.tsx`. `index.js` needs to use the `.js` extension. All new files should use the `.tsx` extension (or `.ts` if the file doesn't contain any JSX).


__tests_ -> __tests__

DanielRosenwasser · 2018-04-06T18:17:39Z

README.md

+
+Rename the generated `App.js` and `__tests_/App.js` files to `App.tsx`. `index.js` needs to use the `.js` extension. All new files should use the `.tsx` extension (or `.ts` if the file doesn't contain any JSX).
+
+If you tried to run the app now, you'd get an error like `object prototype may only be an object or null`. This is caused by a failure to import the default export from React as well as a named export on the same line. Open `App.tsx` and modify the import at the top of the file:


tried -> try, you'd -> you'll

DanielRosenwasser · 2018-04-06T18:19:47Z

README.md

+import { Component } from 'react';
+```
+
+Some of this has to do with differences in how Babel and TypeScript interoperate with CommonJS modules. In the future, the two will stabilize on the same behavior.


I'm pretty sure you shouldn't need to use this if you use esModuleInterop, which I think is appropriate for React Native users.

Okay, I'll look into this to verify 👍

I took a look at couldn't get this to work. I did find an open issue for this, so it should be possible to remove this once TypeScript has been patched to resolve that issue.

DanielRosenwasser · 2018-04-06T18:20:45Z

README.md

+
+This will configure Jest to run `.ts` and `.tsx` files with `ts-jest`.
+
+## Installing Dependency Type Declarations


Installing type declaration dependencies

DanielRosenwasser · 2018-04-06T18:21:05Z

README.md

+
+## Installing Dependency Type Declarations
+
+To get the best experience in TypeScript, we want the type-checker to understand the shape and API of our dependencies. Some libraries will publish their packages with `.d.ts` files (type declaration/type definition files), which can describe the shape of the underlying JavaScript. For other libraries, we'll need to explicitly install the appropriate package in the `@types/` npm scope.


remove the comma before "which can describe"

DanielRosenwasser · 2018-04-06T18:23:36Z

README.md

+
+## Adding a Component
+
+We can now add a component to our app. Let's go ahead and create a `Hello.tsx` component. Create a `components` directory and add the following example.


Create a components directory in src

The react-native init MyAwesomeProject doesn't generate a src directory, it just puts components in the root of the project, alongside package.json. If this is something we want to change, let me know.

Oh, my mistake, I thought that the new components were still in src/components. Gotcha.

DanielRosenwasser · 2018-04-06T18:24:02Z

README.md

+We can now add a component to our app. Let's go ahead and create a `Hello.tsx` component. Create a `components` directory and add the following example.
+
+```ts
+// components/Hello.tsx


src/components/Hello.tsx

DanielRosenwasser · 2018-04-06T18:33:58Z

README.md

+      throw new Error("You could be a little more enthusiastic. :D")
+    }
+
+    this.state = {


I think that if we're going to use state, we should reduce the complexity and just forget about onIncrement and onDecrement as props, and update state directly. So I'd define

onIncrement = () => this.setState({ enthusiasmLevel: this.state.enthusiasmLevel + 1 }); onDecrement = () => this.setState({ enthusiasmLevel: this.state.enthusiasmLevel - 1 });

DanielRosenwasser · 2018-04-06T18:35:33Z

README.md

+})
+```
+
+The first time the test is ran, it will create a snapshot of the DOM and store it in the `components/__tests__/__snapshots__/Hello.tsx.snap` file. When you modify your component, you'll need to update the snapshots and review the update for inadvertent changes. You can read more about testing React Native components [here](https://facebook.github.io/jest/docs/en/tutorial-react-native.html).


Nit: I'm not sure if it's appropriate to call it a snapshot of the DOM. Maybe a snapshot of the rendered component.

DanielRosenwasser · 2018-04-06T18:36:48Z

README.md

+
+## Next Steps
+
+Check out [our React tutorial](https://github.com/DanielRosenwasser/React-TypeScript-Tutorial) where we also cover topics like state management with [Redux](http://redux.js.org). These same subjects can be applied when writing React Native apps.


This should be changed to https://github.com/Microsoft/TypeScript-React-Starter

ashfurrow · 2018-04-06T18:49:48Z

You got it, I'll get those changes in today. Thanks!

StevenTCramer · 2018-04-07T11:42:55Z

ExampleProject/components/Hello.tsx

@@ -0,0 +1,83 @@
+import * as React from "react"


this could me
import React from "react"
now that we have allowSyntheticDefaultImports esModuleInterop enabled.

orta · 2018-04-07T19:03:41Z

These changes will need to be migrated over to the RN blog post too 👍

ashfurrow · 2018-04-09T13:52:07Z

Good idea @orta, I've done that here: facebook/react-native-website@fad2e85

orta · 2018-04-19T16:29:36Z

Poke

bryantee · 2018-04-28T22:42:58Z

Are we just waiting for @DanielRosenwasser to approve changes?

DanielRosenwasser · 2018-04-28T23:17:57Z

Thank you so much for all the work here!! 😄 ⭐️ 👏

ashfurrow · 2018-04-28T23:46:46Z

🎉🙇🤗

Removes references to lib folder, rewords.

63cec61

ashfurrow mentioned this pull request Apr 4, 2018

Adds post on TypeScript and React Native facebook/react-native-website#282

Merged

DanielRosenwasser suggested changes Apr 6, 2018

View reviewed changes

ashfurrow added 3 commits April 6, 2018 14:56

Breaks up sentences onto their own lines. See microsoft#35.

6e6eb59

Addresses feedback from microsoft#35.

85d9c96

Moves to consistent function style.

070b726

StevenTCramer reviewed Apr 7, 2018

View reviewed changes

Applies consistent synthetic export format.

e7ab5ce

Removes unnecessary option.

e2a2471

DanielRosenwasser approved these changes Apr 28, 2018

View reviewed changes

DanielRosenwasser merged commit 3fc367a into microsoft:master Apr 28, 2018

ashfurrow deleted the docs-refresh branch April 28, 2018 23:48

DanielRosenwasser mentioned this pull request May 1, 2018

Translated READMEs (meta-issue) #37

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Refreshes documentation #35

Refreshes documentation #35

ashfurrow commented Mar 28, 2018 •

edited

Loading

msftclas commented Mar 28, 2018 •

edited

Loading

orta commented Apr 4, 2018

phwb commented Apr 5, 2018

DanielRosenwasser left a comment

DanielRosenwasser Apr 6, 2018

DanielRosenwasser Apr 6, 2018

DanielRosenwasser Apr 6, 2018

ashfurrow Apr 6, 2018

ashfurrow Apr 6, 2018

DanielRosenwasser Apr 6, 2018

DanielRosenwasser Apr 6, 2018

DanielRosenwasser Apr 6, 2018

ashfurrow Apr 6, 2018

DanielRosenwasser Apr 6, 2018

DanielRosenwasser Apr 6, 2018

DanielRosenwasser Apr 6, 2018

DanielRosenwasser Apr 6, 2018

DanielRosenwasser Apr 6, 2018

DanielRosenwasser Apr 6, 2018

ashfurrow commented Apr 6, 2018

StevenTCramer Apr 7, 2018

orta commented Apr 7, 2018

ashfurrow commented Apr 9, 2018

orta commented Apr 19, 2018

bryantee commented Apr 28, 2018

DanielRosenwasser commented Apr 28, 2018 •

edited

Loading

ashfurrow commented Apr 28, 2018


		## Migrating to TypeScript

		Rename the generated `App.js` and `__tests_/App.js` files to `App.tsx`. `index.js` needs to use the `.js` extension. All new files should use the `.tsx` extension (or `.ts` if the file doesn't contain any JSX).


		Rename the generated `App.js` and `__tests_/App.js` files to `App.tsx`. `index.js` needs to use the `.js` extension. All new files should use the `.tsx` extension (or `.ts` if the file doesn't contain any JSX).

		If you tried to run the app now, you'd get an error like `object prototype may only be an object or null`. This is caused by a failure to import the default export from React as well as a named export on the same line. Open `App.tsx` and modify the import at the top of the file:


		This will configure Jest to run `.ts` and `.tsx` files with `ts-jest`.

		## Installing Dependency Type Declarations


		## Installing Dependency Type Declarations

		To get the best experience in TypeScript, we want the type-checker to understand the shape and API of our dependencies. Some libraries will publish their packages with `.d.ts` files (type declaration/type definition files), which can describe the shape of the underlying JavaScript. For other libraries, we'll need to explicitly install the appropriate package in the `@types/` npm scope.


		## Adding a Component

		We can now add a component to our app. Let's go ahead and create a `Hello.tsx` component. Create a `components` directory and add the following example.


		## Next Steps

		Check out [our React tutorial](https://github.com/DanielRosenwasser/React-TypeScript-Tutorial) where we also cover topics like state management with [Redux](http://redux.js.org). These same subjects can be applied when writing React Native apps.

Refreshes documentation #35

Refreshes documentation #35

Conversation

ashfurrow commented Mar 28, 2018 • edited Loading

msftclas commented Mar 28, 2018 • edited Loading

orta commented Apr 4, 2018

phwb commented Apr 5, 2018

DanielRosenwasser left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ashfurrow commented Apr 6, 2018

Choose a reason for hiding this comment

orta commented Apr 7, 2018

ashfurrow commented Apr 9, 2018

orta commented Apr 19, 2018

bryantee commented Apr 28, 2018

DanielRosenwasser commented Apr 28, 2018 • edited Loading

ashfurrow commented Apr 28, 2018

ashfurrow commented Mar 28, 2018 •

edited

Loading

msftclas commented Mar 28, 2018 •

edited

Loading

DanielRosenwasser commented Apr 28, 2018 •

edited

Loading