mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
Typo fix and PyReact blog post
This commit is contained in:
@@ -57,6 +57,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2013/08/19/use-react-and-jsx-in-python-applications.html">Use React and JSX in Python Applications</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/08/05/community-roundup-6.html">Community Round-up #6</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/07/30/use-react-and-jsx-in-ruby-on-rails.html">Use React and JSX in Ruby on Rails</a></li>
|
||||
|
||||
@@ -57,6 +57,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2013/08/19/use-react-and-jsx-in-python-applications.html">Use React and JSX in Python Applications</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/08/05/community-roundup-6.html">Community Round-up #6</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/07/30/use-react-and-jsx-in-ruby-on-rails.html">Use React and JSX in Ruby on Rails</a></li>
|
||||
|
||||
@@ -57,6 +57,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2013/08/19/use-react-and-jsx-in-python-applications.html">Use React and JSX in Python Applications</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/08/05/community-roundup-6.html">Community Round-up #6</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/07/30/use-react-and-jsx-in-ruby-on-rails.html">Use React and JSX in Ruby on Rails</a></li>
|
||||
|
||||
@@ -57,6 +57,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2013/08/19/use-react-and-jsx-in-python-applications.html">Use React and JSX in Python Applications</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/08/05/community-roundup-6.html">Community Round-up #6</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/07/30/use-react-and-jsx-in-ruby-on-rails.html">Use React and JSX in Ruby on Rails</a></li>
|
||||
|
||||
@@ -57,6 +57,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2013/08/19/use-react-and-jsx-in-python-applications.html">Use React and JSX in Python Applications</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/08/05/community-roundup-6.html">Community Round-up #6</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/07/30/use-react-and-jsx-in-ruby-on-rails.html">Use React and JSX in Ruby on Rails</a></li>
|
||||
|
||||
@@ -57,6 +57,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2013/08/19/use-react-and-jsx-in-python-applications.html">Use React and JSX in Python Applications</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/08/05/community-roundup-6.html">Community Round-up #6</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/07/30/use-react-and-jsx-in-ruby-on-rails.html">Use React and JSX in Ruby on Rails</a></li>
|
||||
|
||||
@@ -57,6 +57,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2013/08/19/use-react-and-jsx-in-python-applications.html">Use React and JSX in Python Applications</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/08/05/community-roundup-6.html">Community Round-up #6</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/07/30/use-react-and-jsx-in-ruby-on-rails.html">Use React and JSX in Ruby on Rails</a></li>
|
||||
|
||||
@@ -57,6 +57,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2013/08/19/use-react-and-jsx-in-python-applications.html">Use React and JSX in Python Applications</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/08/05/community-roundup-6.html">Community Round-up #6</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/07/30/use-react-and-jsx-in-ruby-on-rails.html">Use React and JSX in Ruby on Rails</a></li>
|
||||
|
||||
@@ -57,6 +57,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2013/08/19/use-react-and-jsx-in-python-applications.html">Use React and JSX in Python Applications</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/08/05/community-roundup-6.html">Community Round-up #6</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/07/30/use-react-and-jsx-in-ruby-on-rails.html">Use React and JSX in Ruby on Rails</a></li>
|
||||
|
||||
@@ -57,6 +57,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2013/08/19/use-react-and-jsx-in-python-applications.html">Use React and JSX in Python Applications</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/08/05/community-roundup-6.html">Community Round-up #6</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/07/30/use-react-and-jsx-in-ruby-on-rails.html">Use React and JSX in Ruby on Rails</a></li>
|
||||
|
||||
@@ -57,6 +57,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2013/08/19/use-react-and-jsx-in-python-applications.html">Use React and JSX in Python Applications</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/08/05/community-roundup-6.html">Community Round-up #6</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/07/30/use-react-and-jsx-in-ruby-on-rails.html">Use React and JSX in Ruby on Rails</a></li>
|
||||
|
||||
@@ -57,6 +57,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2013/08/19/use-react-and-jsx-in-python-applications.html">Use React and JSX in Python Applications</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/08/05/community-roundup-6.html">Community Round-up #6</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/07/30/use-react-and-jsx-in-ruby-on-rails.html">Use React and JSX in Ruby on Rails</a></li>
|
||||
|
||||
@@ -57,6 +57,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2013/08/19/use-react-and-jsx-in-python-applications.html">Use React and JSX in Python Applications</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/08/05/community-roundup-6.html">Community Round-up #6</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/07/30/use-react-and-jsx-in-ruby-on-rails.html" class="active">Use React and JSX in Ruby on Rails</a></li>
|
||||
|
||||
@@ -57,6 +57,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2013/08/19/use-react-and-jsx-in-python-applications.html">Use React and JSX in Python Applications</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/08/05/community-roundup-6.html" class="active">Community Round-up #6</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/07/30/use-react-and-jsx-in-ruby-on-rails.html">Use React and JSX in Ruby on Rails</a></li>
|
||||
|
||||
@@ -0,0 +1,174 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<title>React | Use React and JSX in Python Applications</title>
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<meta property="og:title" content="React | Use React and JSX in Python Applications" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="http://facebook.github.io/react/blog/2013/08/19/use-react-and-jsx-in-python-applications.html" />
|
||||
<meta property="og:image" content="http://facebook.github.io/react/img/logo_og.png" />
|
||||
<meta property="og:description" content="A JavaScript library for building user interfaces" />
|
||||
|
||||
<link rel="shortcut icon" href="/react/favicon.ico">
|
||||
<link rel="alternate" type="application/rss+xml" title="React" href="http://facebook.github.io/react/feed.xml">
|
||||
|
||||
<link rel="stylesheet" href="/react/css/react.css">
|
||||
<link rel="stylesheet" href="/react/css/syntax.css">
|
||||
<link rel="stylesheet" href="/react/css/codemirror.css">
|
||||
|
||||
<script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script>
|
||||
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
|
||||
|
||||
<script type="text/javascript" src="/react/js/codemirror.js"></script>
|
||||
<script type="text/javascript" src="/react/js/javascript.js"></script>
|
||||
<script type="text/javascript" src="/react/js/react.min.js"></script>
|
||||
<script type="text/javascript" src="/react/js/JSXTransformer.js"></script>
|
||||
<script type="text/javascript" src="/react/js/live_editor.js"></script>
|
||||
<script type="text/javascript" src="/react/js/showdown.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="container">
|
||||
|
||||
<div class="nav-main">
|
||||
<div class="wrap">
|
||||
<a class="nav-home" href="/react/index.html">
|
||||
<img class="nav-logo" alt="" src="/react/img/logo_small.png" width="38" height="38">
|
||||
React
|
||||
</a>
|
||||
<ul class="nav-site">
|
||||
<li><a href="/react/docs/getting-started.html">docs</a></li>
|
||||
<li><a href="/react/support.html">support</a></li>
|
||||
<li><a href="/react/downloads.html">download</a></li>
|
||||
<li><a href="/react/blog/" class="active">blog</a></li>
|
||||
<li><a href="http://github.com/facebook/react">github</a>
|
||||
</ul>
|
||||
<!-- <iframe src="http://ghbtns.com/github-btn.html?user=facebook&repo=react.js&type=fork"allowtransparency="true" frameborder="0" scrolling="0" width="62" height="20"></iframe> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<section class="content wrap blogContent">
|
||||
<div class="nav-docs">
|
||||
<div class="nav-docs-section">
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2013/08/19/use-react-and-jsx-in-python-applications.html" class="active">Use React and JSX in Python Applications</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/08/05/community-roundup-6.html">Community Round-up #6</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/07/30/use-react-and-jsx-in-ruby-on-rails.html">Use React and JSX in Ruby on Rails</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/07/26/react-v0-4-1.html">React v0.4.1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/07/23/community-roundup-5.html">Community Round-up #5</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/07/17/react-v0-4-0.html">React v0.4.0</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/07/11/react-v0-4-prop-validation-and-default-values.html">New in React v0.4: Prop Validation and Default Values</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/07/03/community-roundup-4.html">Community Round-up #4</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/07/02/react-v0-4-autobind-by-default.html">New in React v0.4: Autobind by Default</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/06/27/community-roundup-3.html">Community Round-up #3</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/06/21/react-v0-3-3.html">React v0.3.3</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/06/19/community-roundup-2.html">Community Round-up #2</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/06/12/community-roundup.html">Community Round-up #1</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/06/05/why-react.html">Why did we build React?</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/06/02/jsfiddle-integration.html">JSFiddle Integration</a></li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="inner-content">
|
||||
<h1>Use React and JSX in Python Applications</h1>
|
||||
<p class="meta">August 19, 2013 by Kunal Mehta</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="post">
|
||||
<p>Today we're happy to announce the initial release of <a href="https://github.com/facebook/react-python">PyReact</a>, which makes it easier to use React and JSX in your Python applications. It's designed to provide an API to transform your JSX files into JavaScript, as well as provide access to the latest React source files.</p>
|
||||
|
||||
<h2>Usage</h2>
|
||||
|
||||
<p>Transform your JSX files via the provided <code>jsx</code> module:</p>
|
||||
<div class="highlight"><pre><code class="python language-python" data-lang="python"><span class="kn">from</span> <span class="nn">react</span> <span class="kn">import</span> <span class="n">jsx</span>
|
||||
|
||||
<span class="c"># For multiple paths, use the JSXTransformer class.</span>
|
||||
<span class="n">transformer</span> <span class="o">=</span> <span class="n">jsx</span><span class="o">.</span><span class="n">JSXTransformer</span><span class="p">()</span>
|
||||
<span class="k">for</span> <span class="n">jsx_path</span><span class="p">,</span> <span class="n">js_path</span> <span class="ow">in</span> <span class="n">my_paths</span><span class="p">:</span>
|
||||
<span class="n">transformer</span><span class="o">.</span><span class="n">transform</span><span class="p">(</span><span class="n">jsx_path</span><span class="p">,</span> <span class="n">js_path</span><span class="p">)</span>
|
||||
|
||||
<span class="c"># For a single file, you can use a shortcut method.</span>
|
||||
<span class="n">jsx</span><span class="o">.</span><span class="n">transform</span><span class="p">(</span><span class="s">'path/to/input/file.jsx'</span><span class="p">,</span> <span class="s">'path/to/output/file.js'</span><span class="p">)</span>
|
||||
</code></pre></div>
|
||||
<p>For full paths to React files, use the <code>source</code> module:</p>
|
||||
<div class="highlight"><pre><code class="python language-python" data-lang="python"><span class="kn">from</span> <span class="nn">react</span> <span class="kn">import</span> <span class="n">source</span>
|
||||
|
||||
<span class="c"># path_for raises IOError if the file doesn't exist.</span>
|
||||
<span class="n">react_js</span> <span class="o">=</span> <span class="n">source</span><span class="o">.</span><span class="n">path_for</span><span class="p">(</span><span class="s">'react.min.js'</span><span class="p">)</span>
|
||||
</code></pre></div>
|
||||
<h2>Django</h2>
|
||||
|
||||
<p>PyReact includes a JSX compiler for <a href="https://github.com/cyberdelia/django-pipeline">django-pipeline</a>. Add it to your project's pipeline settings like this:</p>
|
||||
<div class="highlight"><pre><code class="python language-python" data-lang="python"><span class="n">PIPELINE_COMPILERS</span> <span class="o">=</span> <span class="p">(</span>
|
||||
<span class="s">'react.utils.pipeline.JSXCompiler'</span><span class="p">,</span>
|
||||
<span class="p">)</span>
|
||||
</code></pre></div>
|
||||
<h2>Installation</h2>
|
||||
|
||||
<p>PyReact is hosted on PyPI, and can be installed with <code>pip</code>:</p>
|
||||
<div class="highlight"><pre><code class="text language-text" data-lang="text">$ pip install PyReact
|
||||
</code></pre></div>
|
||||
<p>Alternatively, add it into your <code>requirements</code> file:</p>
|
||||
<div class="highlight"><pre><code class="text language-text" data-lang="text">PyReact==0.1.1
|
||||
</code></pre></div>
|
||||
<p><strong>Dependencies</strong>: PyReact uses <a href="https://github.com/doloopwhile/PyExecJS">PyExecJS</a> to execute the bundled React code, which requires that a JS runtime environment is installed on your machine. We don't explicitly set a dependency on a runtime environment; Mac OS X comes bundled with one. If you're on a different platform, we recommend <a href="https://code.google.com/p/pyv8/">PyV8</a>.</p>
|
||||
|
||||
<p>For the initial release, we've only tested on Python 2.7. Look out for support for Python 3 in the future, and if you see anything that can be improved, we welcome your <a href="https://github.com/facebook/react-python/blob/master/CONTRIBUTING.md">contributions</a>!</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="fb-like" data-send="true" data-width="650" data-show-faces="false"></div>
|
||||
<div class="fb-comments" data-width="650" data-num-posts="10" data-href="http://facebook.github.io/react/blog/2013/08/19/use-react-and-jsx-in-python-applications.html"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<footer class="wrap">
|
||||
<div class="left">A Facebook & Instagram collaboration.</div>
|
||||
<div class="right">© 2013 Facebook Inc.</div>
|
||||
</footer>
|
||||
</div>
|
||||
<div id="fb-root"></div>
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
ga('create', 'UA-41298772-1', 'facebook.github.io');
|
||||
ga('send', 'pageview');
|
||||
|
||||
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
|
||||
|
||||
(function(d, s, id) {
|
||||
var js, fjs = d.getElementsByTagName(s)[0];
|
||||
if (d.getElementById(id)) return;
|
||||
js = d.createElement(s); js.id = id;
|
||||
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=623268441017527";
|
||||
fjs.parentNode.insertBefore(js, fjs);
|
||||
}(document, 'script', 'facebook-jssdk'));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -57,6 +57,8 @@
|
||||
<h3>Recent posts</h3>
|
||||
<ul>
|
||||
|
||||
<li><a href="/react/blog/2013/08/19/use-react-and-jsx-in-python-applications.html">Use React and JSX in Python Applications</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/08/05/community-roundup-6.html">Community Round-up #6</a></li>
|
||||
|
||||
<li><a href="/react/blog/2013/07/30/use-react-and-jsx-in-ruby-on-rails.html">Use React and JSX in Ruby on Rails</a></li>
|
||||
@@ -91,6 +93,23 @@
|
||||
|
||||
<div class="inner-content">
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2013/08/19/use-react-and-jsx-in-python-applications.html">Use React and JSX in Python Applications</a></h1>
|
||||
<p class="meta">August 19, 2013 by Kunal Mehta</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="post">
|
||||
<p>Today we're happy to announce the initial release of <a href="https://github.com/facebook/react-python">PyReact</a>, which makes it easier to use React and JSX in your Python applications. It's designed to provide an API to transform your JSX files into JavaScript, as well as provide access to the latest React source files.</p>
|
||||
|
||||
|
||||
<p>
|
||||
<a href="/react/blog/2013/08/19/use-react-and-jsx-in-python-applications.html">Continue Reading →</a>
|
||||
</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="post-list-item">
|
||||
<h1><a href="/react/blog/2013/08/05/community-roundup-6.html">Community Round-up #6</a></h1>
|
||||
<p class="meta">August 5, 2013 by Vjeux</p>
|
||||
|
||||
@@ -241,7 +241,7 @@
|
||||
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="cm">/** @jsx React.DOM */</span>
|
||||
<span class="nx">React</span><span class="p">.</span><span class="nx">renderComponent</span><span class="p">(</span>
|
||||
<span class="hll"> <span class="nx">React</span><span class="p">.</span><span class="nx">DOM</span><span class="p">.</span><span class="nx">h1</span><span class="p">(</span><span class="kc">null</span><span class="p">,</span> <span class="s1">'Hello, world!'</span><span class="p">),</span>
|
||||
</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementyById</span><span class="p">(</span><span class="s1">'example'</span><span class="p">)</span>
|
||||
</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'example'</span><span class="p">)</span>
|
||||
<span class="p">);</span>
|
||||
</code></pre></div>
|
||||
<blockquote>
|
||||
|
||||
@@ -6,6 +6,53 @@
|
||||
<link>http://facebook.github.io/react</link>
|
||||
<atom:link href="http://facebook.github.io/react/feed.xml" rel="self" type="application/rss+xml" />
|
||||
|
||||
<item>
|
||||
<title>Use React and JSX in Python Applications</title>
|
||||
<description><p>Today we&#39;re happy to announce the initial release of <a href="https://github.com/facebook/react-python">PyReact</a>, which makes it easier to use React and JSX in your Python applications. It&#39;s designed to provide an API to transform your JSX files into JavaScript, as well as provide access to the latest React source files.</p>
|
||||
|
||||
<h2>Usage</h2>
|
||||
|
||||
<p>Transform your JSX files via the provided <code>jsx</code> module:</p>
|
||||
<div class="highlight"><pre><code class="python language-python" data-lang="python"><span class="kn">from</span> <span class="nn">react</span> <span class="kn">import</span> <span class="n">jsx</span>
|
||||
|
||||
<span class="c"># For multiple paths, use the JSXTransformer class.</span>
|
||||
<span class="n">transformer</span> <span class="o">=</span> <span class="n">jsx</span><span class="o">.</span><span class="n">JSXTransformer</span><span class="p">()</span>
|
||||
<span class="k">for</span> <span class="n">jsx_path</span><span class="p">,</span> <span class="n">js_path</span> <span class="ow">in</span> <span class="n">my_paths</span><span class="p">:</span>
|
||||
<span class="n">transformer</span><span class="o">.</span><span class="n">transform</span><span class="p">(</span><span class="n">jsx_path</span><span class="p">,</span> <span class="n">js_path</span><span class="p">)</span>
|
||||
|
||||
<span class="c"># For a single file, you can use a shortcut method.</span>
|
||||
<span class="n">jsx</span><span class="o">.</span><span class="n">transform</span><span class="p">(</span><span class="s">&#39;path/to/input/file.jsx&#39;</span><span class="p">,</span> <span class="s">&#39;path/to/output/file.js&#39;</span><span class="p">)</span>
|
||||
</code></pre></div>
|
||||
<p>For full paths to React files, use the <code>source</code> module:</p>
|
||||
<div class="highlight"><pre><code class="python language-python" data-lang="python"><span class="kn">from</span> <span class="nn">react</span> <span class="kn">import</span> <span class="n">source</span>
|
||||
|
||||
<span class="c"># path_for raises IOError if the file doesn&#39;t exist.</span>
|
||||
<span class="n">react_js</span> <span class="o">=</span> <span class="n">source</span><span class="o">.</span><span class="n">path_for</span><span class="p">(</span><span class="s">&#39;react.min.js&#39;</span><span class="p">)</span>
|
||||
</code></pre></div>
|
||||
<h2>Django</h2>
|
||||
|
||||
<p>PyReact includes a JSX compiler for <a href="https://github.com/cyberdelia/django-pipeline">django-pipeline</a>. Add it to your project&#39;s pipeline settings like this:</p>
|
||||
<div class="highlight"><pre><code class="python language-python" data-lang="python"><span class="n">PIPELINE_COMPILERS</span> <span class="o">=</span> <span class="p">(</span>
|
||||
<span class="s">&#39;react.utils.pipeline.JSXCompiler&#39;</span><span class="p">,</span>
|
||||
<span class="p">)</span>
|
||||
</code></pre></div>
|
||||
<h2>Installation</h2>
|
||||
|
||||
<p>PyReact is hosted on PyPI, and can be installed with <code>pip</code>:</p>
|
||||
<div class="highlight"><pre><code class="text language-text" data-lang="text">$ pip install PyReact
|
||||
</code></pre></div>
|
||||
<p>Alternatively, add it into your <code>requirements</code> file:</p>
|
||||
<div class="highlight"><pre><code class="text language-text" data-lang="text">PyReact==0.1.1
|
||||
</code></pre></div>
|
||||
<p><strong>Dependencies</strong>: PyReact uses <a href="https://github.com/doloopwhile/PyExecJS">PyExecJS</a> to execute the bundled React code, which requires that a JS runtime environment is installed on your machine. We don&#39;t explicitly set a dependency on a runtime environment; Mac OS X comes bundled with one. If you&#39;re on a different platform, we recommend <a href="https://code.google.com/p/pyv8/">PyV8</a>.</p>
|
||||
|
||||
<p>For the initial release, we&#39;ve only tested on Python 2.7. Look out for support for Python 3 in the future, and if you see anything that can be improved, we welcome your <a href="https://github.com/facebook/react-python/blob/master/CONTRIBUTING.md">contributions</a>!</p>
|
||||
</description>
|
||||
<pubDate>2013-08-19T00:00:00-07:00</pubDate>
|
||||
<link>http://facebook.github.io/react/blog/2013/08/19/use-react-and-jsx-in-python-applications.html</link>
|
||||
<guid isPermaLink="true">http://facebook.github.io/react/blog/2013/08/19/use-react-and-jsx-in-python-applications.html</guid>
|
||||
</item>
|
||||
|
||||
<item>
|
||||
<title>Community Round-up #6</title>
|
||||
<description><p>This is the first Community Round-up where none of the items are from Facebook/Instagram employees. It&#39;s great to see the adoption of React growing.</p>
|
||||
@@ -581,34 +628,5 @@ If you were using React without JSX previously, your code should still work.<
|
||||
<guid isPermaLink="true">http://facebook.github.io/react/blog/2013/06/27/community-roundup-3.html</guid>
|
||||
</item>
|
||||
|
||||
<item>
|
||||
<title>React v0.3.3</title>
|
||||
<description><p>We have a ton of great stuff coming in v0.4, but in the meantime we&#39;re releasing v0.3.3. This release addresses some small issues people were having and simplifies our tools to make them easier to use.</p>
|
||||
|
||||
<h2>react-tools</h2>
|
||||
|
||||
<ul>
|
||||
<li>Upgrade Commoner so <code>require</code> statements are no longer relativized when passing through the transformer. This was a feature needed when building React, but doesn&#39;t translate well for other consumers of <code>bin/jsx</code>.</li>
|
||||
<li>Upgraded our dependencies on Commoner and Recast so they use a different directory for their cache.</li>
|
||||
<li>Freeze our esprima dependency.</li>
|
||||
</ul>
|
||||
|
||||
<h2>React</h2>
|
||||
|
||||
<ul>
|
||||
<li>Allow reusing the same DOM node to render different components. e.g. <code>React.renderComponent(&lt;div/&gt;, domNode); React.renderComponent(&lt;span/&gt;, domNode);</code> will work now.</li>
|
||||
</ul>
|
||||
|
||||
<h2>JSXTransformer</h2>
|
||||
|
||||
<ul>
|
||||
<li>Improved the in-browser transformer so that transformed scripts will execute in the expected scope. The allows components to be defined and used from separate files.</li>
|
||||
</ul>
|
||||
</description>
|
||||
<pubDate>2013-06-21T00:00:00-07:00</pubDate>
|
||||
<link>http://facebook.github.io/react/blog/2013/06/21/react-v0-3-3.html</link>
|
||||
<guid isPermaLink="true">http://facebook.github.io/react/blog/2013/06/21/react-v0-3-3.html</guid>
|
||||
</item>
|
||||
|
||||
</channel>
|
||||
</rss>
|
||||
|
||||
Reference in New Issue
Block a user