React 入门系列之安装（1） - Java.小学生

公告

一、背景

　　一次项目会议中，讨论前后端框架及代码托管，做后端的也晓得，前几年基本没有纯粹的后端，基本上也是前后端一起写，都是基础的 HTML、CSS、JS、Bootstrap，也使用过一段时间 Angularjs（1.x），后面的新版就没去研究了，在这一次项目会上，前端技术员最后讨论决定使用 React，海吹了React 一连串优点（这次讨论不亚于在 Java 社区中说【PHP是世界上最好的语言】）。

　　So，空余时间也来学习哈React，主要是因为【不懂的享受生活的守财奴（接私活儿）】做准备呗！

二、安装React

　　React is flexible and can be used in a variety of projects. You can create new apps with it, but you can also gradually introduce it into an existing codebase without doing a rewrite.

创建一个新的应用

　　创建 React 应用是开始构建新的React单页应用程序的最佳方式。它可以帮你快速构建你的开发环境，以便你能使用最新的 JavaScript 功能，提供很好的开发体验，并优化你的应用程序，提高开发效率。

1 $ npm install -g create-react-app
2 $ create-react-app app-one
3 $
4 $ cd app-one
5 $ npm run start

　　上面只是创建React应用程序，不需要关心也需要不处理后端逻辑或数据库; 它只是创建一个前端构建管道，所以你可以使用任何你想要的后端。它使用像Babel和webpack这样的构建工具，但可以使用零配置。

安装React

　　建议使用Yarn或npm来管理React前端模块的依赖，我使用是 npm 安装。

　　Yarn安装：

1 yarn add react react-dom

　　npm安装：

1 npm install --save react react-dom

使用ES6和JSX写一个HelloWorld的例子

　　建议使用像webpack或Browserify这样的打包工具，以便您可以编写模块化代码，它们可以将不同的代码模块打包捆绑到一起，用来优化的代码加载时间。

　　一个简单的React示例如下所示：

　　这里我使用的是bower来安装react和react-dom。

mkdir app-two
cd app-two
bower install react babel --save
touch index.html

然后在index.html中写入以下内容：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>React 学习</title>
 6 </head>
 7 <body>
 8     <div id="app"></div>
 9 
10 
11     <script src="bower_components/react/react.js"></script>
12     <script src="bower_components/react/react-dom.js"></script>
13     <script src="bower_components/babel/browser.js"></script>
14 
15     <script type="text/babel">
16         var Hello = React.createClass({
17             render: function(){
18                 return ( <h1> Hello World!! </h1> )
19             }
20         });
21 
22         ReactDOM.render(
23             <Hello/>,
24             document.getElementById('app'),
25             function(){
26                 console.log("success....");
27             }
28         )
29     </script>
30 </body>
31 </html

用浏览器打开这个html，即可看见效果。

感谢各位同道支持！！

posted on 2017-07-10 09:54 Java.小学生阅读(341) 评论(0) 收藏举报

刷新页面返回顶部