mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Deploy website
Deploy website version based on 72fb9b6e3df23dd7b7403748fffcbb1fbb08601e
This commit is contained in:
Website Deployment Script
@@ -34,7 +34,12 @@
|
||||
}
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer postContainer blogContainer"><div class="wrapper"><div class="lonePost"><div class="post"><header class="postHeader"><h1 class="postHeaderTitle"><a href="/react-native/blog/2018/05/07/using-typescript-with-react-native">Using TypeScript with React Native</a></h1><p class="post-meta">May 7, 2018</p><div class="authorBlock"><p class="post-authorName"><a href="https://github.com/ashfurrow" target="_blank" rel="noreferrer noopener">Ash Furrow</a>Software Engineer at Artsy</p><div class="authorPhoto authorPhotoBig"><a href="https://github.com/ashfurrow" target="_blank" rel="noreferrer noopener"><img src="https://avatars2.githubusercontent.com/u/498212?s=460&v=4" alt="Ash Furrow"/></a></div></div></header><div><span><p>JavaScript! We all love it. But some of us also love <a href="https://en.wikipedia.org/wiki/Data_type">types</a>. Luckily, options exist to add stronger types to JavaScript. My favourite is <a href="https://www.typescriptlang.org">TypeScript</a>, but React Native supports <a href="https://flow.org">Flow</a> out of the box. Which you prefer is a matter of preference, they each have their own approach on how to add the magic of types to JavaScript. Today, we're going to look at how to use TypeScript in React Native apps.</p>
|
||||
<p>We'll be using Microsoft's <a href="https://github.com/Microsoft/TypeScript-React-Native-Starter">TypeScript-React-Native-Starter</a> repo as a guide.</p>
|
||||
<p>This post uses Microsoft's <a href="https://github.com/Microsoft/TypeScript-React-Native-Starter">TypeScript-React-Native-Starter</a> repo as a guide.</p>
|
||||
<p><strong>Update</strong>: Since this blog post was written, <a href="https://blogs.msdn.microsoft.com/typescript/2018/08/27/typescript-and-babel-7/">Babel 7 was released with integrated TypeScript support</a>. Babel 7 replaces all the set up described in this blog post with just one command:</p>
|
||||
<pre><code class="hljs css language-sh">react-native init MyAwesomeProject --template typescript
|
||||
</code></pre>
|
||||
<p>However, there <em>are</em> some limitations to Babel's TypeScript support, which the blog post above goes into in detail. The steps outlined in <em>this</em> post still work, and Artsy is still using <a href="https://github.com/ds300/react-native-typescript-transformer">react-native-typescript-transformer</a> in production, but the fastest way to get up and running with React Native and TypeScript is using the above command. You can always switch later if you have to.</p>
|
||||
<p>In any case, have fun! The original blog post continues below.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="prerequisites"></a><a href="#prerequisites" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Prerequisites</h2>
|
||||
<p>Because you might be developing on one of several different platforms, targeting several different types of devices, basic setup can be involved. You should first ensure that you can run a plain React Native app without TypeScript. Follow <a href="https://facebook.github.io/react-native/docs/getting-started.html">the instructions on the React Native website to get started</a>. When you've managed to deploy to a device or emulator, you'll be ready to start a TypeScript React Native app.</p>
|
||||
<p>You will also need <a href="https://nodejs.org/en/">Node.js</a>, <a href="https://www.npmjs.com">npm</a>, and <a href="https://yarnpkg.com/lang/en">Yarn</a>.</p>
|
||||
|
||||
@@ -34,7 +34,12 @@
|
||||
}
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer postContainer blogContainer"><div class="wrapper"><div class="lonePost"><div class="post"><header class="postHeader"><h1 class="postHeaderTitle"><a href="/react-native/blog/2018/05/07/using-typescript-with-react-native">Using TypeScript with React Native</a></h1><p class="post-meta">May 7, 2018</p><div class="authorBlock"><p class="post-authorName"><a href="https://github.com/ashfurrow" target="_blank" rel="noreferrer noopener">Ash Furrow</a>Software Engineer at Artsy</p><div class="authorPhoto authorPhotoBig"><a href="https://github.com/ashfurrow" target="_blank" rel="noreferrer noopener"><img src="https://avatars2.githubusercontent.com/u/498212?s=460&v=4" alt="Ash Furrow"/></a></div></div></header><div><span><p>JavaScript! We all love it. But some of us also love <a href="https://en.wikipedia.org/wiki/Data_type">types</a>. Luckily, options exist to add stronger types to JavaScript. My favourite is <a href="https://www.typescriptlang.org">TypeScript</a>, but React Native supports <a href="https://flow.org">Flow</a> out of the box. Which you prefer is a matter of preference, they each have their own approach on how to add the magic of types to JavaScript. Today, we're going to look at how to use TypeScript in React Native apps.</p>
|
||||
<p>We'll be using Microsoft's <a href="https://github.com/Microsoft/TypeScript-React-Native-Starter">TypeScript-React-Native-Starter</a> repo as a guide.</p>
|
||||
<p>This post uses Microsoft's <a href="https://github.com/Microsoft/TypeScript-React-Native-Starter">TypeScript-React-Native-Starter</a> repo as a guide.</p>
|
||||
<p><strong>Update</strong>: Since this blog post was written, <a href="https://blogs.msdn.microsoft.com/typescript/2018/08/27/typescript-and-babel-7/">Babel 7 was released with integrated TypeScript support</a>. Babel 7 replaces all the set up described in this blog post with just one command:</p>
|
||||
<pre><code class="hljs css language-sh">react-native init MyAwesomeProject --template typescript
|
||||
</code></pre>
|
||||
<p>However, there <em>are</em> some limitations to Babel's TypeScript support, which the blog post above goes into in detail. The steps outlined in <em>this</em> post still work, and Artsy is still using <a href="https://github.com/ds300/react-native-typescript-transformer">react-native-typescript-transformer</a> in production, but the fastest way to get up and running with React Native and TypeScript is using the above command. You can always switch later if you have to.</p>
|
||||
<p>In any case, have fun! The original blog post continues below.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="prerequisites"></a><a href="#prerequisites" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Prerequisites</h2>
|
||||
<p>Because you might be developing on one of several different platforms, targeting several different types of devices, basic setup can be involved. You should first ensure that you can run a plain React Native app without TypeScript. Follow <a href="https://facebook.github.io/react-native/docs/getting-started.html">the instructions on the React Native website to get started</a>. When you've managed to deploy to a device or emulator, you'll be ready to start a TypeScript React Native app.</p>
|
||||
<p>You will also need <a href="https://nodejs.org/en/">Node.js</a>, <a href="https://www.npmjs.com">npm</a>, and <a href="https://yarnpkg.com/lang/en">Yarn</a>.</p>
|
||||
|
||||
+6
-1
@@ -219,7 +219,12 @@ accessibilityStates={[“selected”]}
|
||||
<p>If you're using React Native, you're part of our community; keep letting us know how we can make React Native better for you.</p>
|
||||
<p>React Native is just one tool in a mobile developer's toolbox, but it's one that we strongly believe in – and we're making it better every day, with over 2500 commits in the last year from 500+ contributors.</p>
|
||||
</span></div></article></div><div class="post"><header class="postHeader"><h1 class="postHeaderTitle"><a href="/react-native/blog/2018/05/07/using-typescript-with-react-native">Using TypeScript with React Native</a></h1><p class="post-meta">May 7, 2018</p><div class="authorBlock"><p class="post-authorName"><a href="https://github.com/ashfurrow" target="_blank" rel="noreferrer noopener">Ash Furrow</a>Software Engineer at Artsy</p><div class="authorPhoto authorPhotoBig"><a href="https://github.com/ashfurrow" target="_blank" rel="noreferrer noopener"><img src="https://avatars2.githubusercontent.com/u/498212?s=460&v=4" alt="Ash Furrow"/></a></div></div></header><article class="post-content"><div><span><p>JavaScript! We all love it. But some of us also love <a href="https://en.wikipedia.org/wiki/Data_type">types</a>. Luckily, options exist to add stronger types to JavaScript. My favourite is <a href="https://www.typescriptlang.org">TypeScript</a>, but React Native supports <a href="https://flow.org">Flow</a> out of the box. Which you prefer is a matter of preference, they each have their own approach on how to add the magic of types to JavaScript. Today, we're going to look at how to use TypeScript in React Native apps.</p>
|
||||
<p>We'll be using Microsoft's <a href="https://github.com/Microsoft/TypeScript-React-Native-Starter">TypeScript-React-Native-Starter</a> repo as a guide.</p>
|
||||
<p>This post uses Microsoft's <a href="https://github.com/Microsoft/TypeScript-React-Native-Starter">TypeScript-React-Native-Starter</a> repo as a guide.</p>
|
||||
<p><strong>Update</strong>: Since this blog post was written, <a href="https://blogs.msdn.microsoft.com/typescript/2018/08/27/typescript-and-babel-7/">Babel 7 was released with integrated TypeScript support</a>. Babel 7 replaces all the set up described in this blog post with just one command:</p>
|
||||
<pre><code class="hljs css language-sh">react-native init MyAwesomeProject --template typescript
|
||||
</code></pre>
|
||||
<p>However, there <em>are</em> some limitations to Babel's TypeScript support, which the blog post above goes into in detail. The steps outlined in <em>this</em> post still work, and Artsy is still using <a href="https://github.com/ds300/react-native-typescript-transformer">react-native-typescript-transformer</a> in production, but the fastest way to get up and running with React Native and TypeScript is using the above command. You can always switch later if you have to.</p>
|
||||
<p>In any case, have fun! The original blog post continues below.</p>
|
||||
<h2><a class="anchor" aria-hidden="true" id="prerequisites"></a><a href="#prerequisites" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Prerequisites</h2>
|
||||
<p>Because you might be developing on one of several different platforms, targeting several different types of devices, basic setup can be involved. You should first ensure that you can run a plain React Native app without TypeScript. Follow <a href="https://facebook.github.io/react-native/docs/getting-started.html">the instructions on the React Native website to get started</a>. When you've managed to deploy to a device or emulator, you'll be ready to start a TypeScript React Native app.</p>
|
||||
<p>You will also need <a href="https://nodejs.org/en/">Node.js</a>, <a href="https://www.npmjs.com">npm</a>, and <a href="https://yarnpkg.com/lang/en">Yarn</a>.</p>
|
||||
|
||||
Reference in New Issue
Block a user