<p><code></p> <p><a href="http://www.js-code.com/tag/react" title="React" target="_blank">React</a> 虽然是个很简单的 UI 库,<a href="http://www.js-code.com/tag/api" title="API" target="_blank">API</a> 也很少,但是在实际项目中却发现要搭配各种技术栈,例如 Webpack, Babel, Redux, <a href="http://www.js-code.com/tag/react" title="React" target="_blank">React</a> Router, <a href="http://www.js-code.com/tag/css" title="CSS" target="_blank">CSS</a> Modules, NPM, ES6/7 等等,仿佛怎么也学不完,很多人开始吐槽前端发展混乱,例如文章:<a href="https://zhuanlan.zhihu.com/p/22782487%202016%20%E5%B9%B4%E5%AD%A6%20JavaScript%20%E6%98%AF%E4%B8%80%E7%A7%8D%E4%BB%80%E4%B9%88%E6%A0%B7%E7%9A%84%E4%BD%93%E9%AA%8C%EF%BC%9F" rel="nofollow noreferrer" target="_blank">2016 年学 JavaScript 是一种什么样的体验?</a>吐槽归吐槽,扩充自己的技术栈,了解国外前端都在玩什么,毕竟不是坏事。</p> <p>本系列教程不需要预先了解太多原理,跟着做,实践之后不懂再去查看文档,更有利于入门。</p> <h3 id="articleHeader0">TIP: NPM 下载慢可以切换到淘宝源:<a href="http://www.jianshu.com/p/26640fbad18e%20NPM%20%E5%88%87%E6%8D%A2%E6%B7%98%E5%AE%9D%E6%BA%90" rel="nofollow noreferrer" target="_blank">NPM 切换淘宝源</a><br /> </h3> <h4>1. 首先,建立项目目录,npm init 初始化 npm 项目</h4> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="mkdir react-start cd react-start npm init" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs properties"><code><span class="hljs-attr">mkdir</span> <span class="hljs-string">react-start</span> <span class="hljs-attr">cd</span> <span class="hljs-string">react-start</span> <span class="hljs-attr">npm</span> <span class="hljs-string">init</span></code></pre> <h4>2. 全局安装 Webpack, Babel, Webpack-dev-server</h4> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="sudo npm install babel webpack webpack-dev-server -g" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs sql"><code style="word-break: break-word; white-space: initial;">sudo npm <span class="hljs-keyword">install</span> <a href="http://www.js-code.com/tag/babel" title="浏览关于“babel”的文章" target="_blank" class="tag_link">babel</a> webpack webpack-dev-<span class="hljs-keyword">server</span> -g</code></pre> <h4>3. 安装 <strong>react</strong>, <strong>react-dom</strong><br /> </h4> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="npm install react react-dom --save" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs sql"><code style="word-break: break-word; white-space: initial;">npm <span class="hljs-keyword">install</span> react react-dom <span class="hljs-comment">--save</span></code></pre> <h4>4. 安装 Babel 转换器,需要用到插件 <a href="http://www.js-code.com/tag/babel" title="babel" target="_blank">babel</a>-preset-react, <a href="http://www.js-code.com/tag/babel" title="babel" target="_blank">babel</a>-preset-latest,latest 即最新的 ES 规范,包括了 Async/Await 这些新特性。</h4> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="npm install babel-loader babel-core babel-preset-react babel-preset-latest --save" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs sql"><code style="word-break: break-word; white-space: initial;">npm <span class="hljs-keyword">install</span> babel-loader babel-core babel-preset-react babel-preset-latest <span class="hljs-comment">--save</span></code></pre> <h4>5. 创建项目文件,main.js 即项目入口文件,App.js 即 <a href="http://www.js-code.com/tag/react" title="浏览关于“React”的文章" target="_blank" class="tag_link">React</a> 组件主文件</h4> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="touch index.html App.js main.js webpack.config.js" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs css"><code style="word-break: break-word; white-space: initial;"><span class="hljs-selector-tag">touch</span> <span class="hljs-selector-tag">index</span><span class="hljs-selector-class">.html</span> <span class="hljs-selector-tag">App</span><span class="hljs-selector-class">.js</span> <span class="hljs-selector-tag">main</span><span class="hljs-selector-class">.js</span> <span class="hljs-selector-tag">webpack</span><span class="hljs-selector-class">.config</span><span class="hljs-selector-class">.js</span></code></pre> <p><span class="img-wrap"><img data-src="/img/bVFonS?w=221&amp;h=184" src="https://cdn.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span></p> <h4>6. Webpack 配置</h4> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="module.exports = { entry: './main.js', // 入口文件路径 output: { path: './', filename: 'index.js' }, devServer: { inline: true, port: 3333 }, module: { loaders: [ { test: /.js$/, // babel 转换为兼容性的 js exclude: /node_modules/, loader: 'babel', query: { presets: ['react', 'latest'] } } ] } } " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code><span class="hljs-built_in">module</span>.<a href="http://www.js-code.com/tag/export" title="浏览关于“export”的文章" target="_blank" class="tag_link">export</a>s = { entry: <span class="hljs-string">'./main.js'</span>, <span class="hljs-comment">// 入口文件路径</span> output: { path: <span class="hljs-string">'./'</span>, filename: <span class="hljs-string">'index.js'</span> }, devServer: { inline: <span class="hljs-literal">true</span>, port: <span class="hljs-number">3333</span> }, <span class="hljs-keyword">module</span>: { loaders: [ { test: <span class="hljs-regexp">/.js$/</span>, <span class="hljs-comment">// babel 转换为兼容性的 js</span> exclude: <span class="hljs-regexp">/<a href="http://www.js-code.com/tag/node" title="浏览关于“node”的文章" target="_blank" class="tag_link">node</a>_modules/</span>, loader: <span class="hljs-string">'babel'</span>, query: { presets: [<span class="hljs-string">'react'</span>, <span class="hljs-string">'latest'</span>] } } ] } } </code></pre> <h4>6. 其他文件内容,一些基本的 React 和 ES6 基础,不做过多讲解了。</h4> <p>index.html</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<!DOCTYPE html><br /> <html lang=&quot;en&quot;><br /> <head><br /> <meta charset=&quot;UTF-8&quot;><br /> <title>React Start</title><br /> </head><br /> <body></p> <div id=&quot;app&quot;></div> <p> <script src=&quot;index.js&quot;></script><br /> </body><br /> </html><br /> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-meta">&lt;!DOCTYPE html&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"en"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">"UTF-8"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>React Start<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name"><a href="http://www.js-code.com/tag/div" title="浏览关于“div”的文章" target="_blank" class="tag_link">div</a></span> <span class="hljs-attr">id</span>=<span class="hljs-string">"app"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"index.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span> </code></pre> <p>App.js</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="import React from 'react'; class App extends React.Component { render() { return <div>Hello World</div> <p> }<br /> }</p> <p>export default App<br /> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs scala"><code><span class="hljs-keyword">import</span> <span class="hljs-type">React</span> from <span class="hljs-symbol">'reac</span>t'; <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">App</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span> </span>{ render() { <span class="hljs-keyword">return</span> &lt;div&gt;<span class="hljs-type">Hello</span> <span class="hljs-type">World</span>&lt;/div&gt; } } export <span class="hljs-keyword">default</span> <span class="hljs-type">App</span> </code></pre> <p>main.js</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="import React from 'react'; import React<a href="http://www.js-code.com/tag/dom" title="DOM" target="_blank">DOM</a> from 'react-dom';<br /> import App from './App';</p> <p>React<a href="http://www.js-code.com/tag/dom" title="DOM" target="_blank">DOM</a>.render(<App ></span>, document.getElementById('app'))<br /> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code><span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>; <span class="hljs-keyword">import</span> React<a href="http://www.js-code.com/tag/dom" title="浏览关于“DOM”的文章" target="_blank" class="tag_link">DOM</a> <span class="hljs-keyword">from</span> <span class="hljs-string">'react-dom'</span>; <span class="hljs-keyword">import</span> App <span class="hljs-keyword">from</span> <span class="hljs-string">'./App'</span>; ReactDOM.render(&lt;App /&gt;, <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'app'</span>)) </code></pre> <h4>7. 配置 npm scripts, 编辑 package.json</h4> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="&quot;scripts&quot;: { &quot;start&quot;: &quot;webpack-dev-server&quot; }," title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs objectivec"><code><span class="hljs-string">"scripts"</span>: { <span class="hljs-string">"start"</span>: <span class="hljs-string">"webpack-dev-server"</span> },</code></pre> <h4>8. 基本的框架搭建完毕,npm start 然后打开 <a href="http://localhost:3333" rel="nofollow noreferrer" target="_blank"></a><a href="http://localhost:3333" rel="nofollow noreferrer" target="_blank">http://localhost:3333</a> 试试</h4> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="npm start" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs sql"><code style="word-break: break-word; white-space: initial;">npm <span class="hljs-keyword">start</span></code></pre> <p></code></p>

本文固定链接: http://www.js-code.com/react/react_41670.html