React环境部署

React框架的入门部署。

React入门部署

npm的使用

下载编译好的nodejs,mv到/opt目录下
把/opt/node/bin下的npm与node软链接到/usr/bin
把npm的源改为淘宝的源,提高下载的速度
全局安装webpack
```
 npm install -g webpack
```
把webpack也软链接到/usr/bin

开发环境

在项目根目录中打开shell,输入npm init,创建package.json文件,该文件会包含项目的基本信息,包括依赖包与脚本等
输入npm install --save-dev webpack安装webpack

在项目根目录创建webpack.config.js文件,该文件为webpack配置文件,因为网上较多的还是1.x的教程,所以现在的实践还是使用的webpack1.x配置方式,配置代码如下:

 var path = require('path');

 module.exports = {
     entry: './src/app.js', //入口文件
     devtool: 'sourcemap',
     output: {
         path: path.join(__dirname, 'build'),
         filename: 'app.bundle.js',
         publicPath: '/build/'
     }
 };

在package.json中加入
```
 "scripts": {
     "build": "webpack"
 }
```
可以通过npm run build更方便的进行打包

安装react

 npm install --save-dev react react-dom

官方推荐react组件通过jsx来书写,暂时并不是所有的浏览器都支持jsx语法,所以要通过babel来编译转换为js. 安装babel:

 npm install --save-dev babel-core babel-loader \
  babel-preset-es2015 babel-preset-react

在webpack.config.js中配置babel:

 module: {
     loaders: [
         {
             test: /\.(js|jsx)$/,
             exclude: /node_modules/,
             loader: 'babel'
         }
     ]
 }

并在根目录下新建.babelrc文件,内容为:

 {
   "presets": [
     "react",
     "es2015"
   ]
 }

用React渲染界面

在根目录新建index.html,因为在react中甚至连html标签都在js中书写,所以这个文件会十分简单:

 <!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <title>ReactDemo1</title>
 </head>
 <body>
 <!--要插入React组件的位置-->
 <div id="content"></div>
 <!--引入bundle.js-->
 <script src="bundle.js"></script>
 </body>
 </html>

新建Component.js文件,使用ES6的语法书写组件:

 import React from 'react';

 class Component1 extends React.Component {
     render() {
         return (
             <div>Hello World!</div>
         )
     }
 }

 //导出组件
 export default Component1;

在入口js中渲染到html标签中:

 import React from 'react';
 import ReactDom from 'react-dom';
 import Component1 from './components/Component1.jsx';

 ReactDom.render(
     <Component1 />,
     document.getElementById('content')
 );

通过npm run build打包后,再预览index.html就可以看到Hello World的了
但是这样的话每次修改完都要手动编译后再使改动生效,效率很低,所以要搭建开发用服务器,并启用热更新,使代码修改后就可以看到改变.安装webpack-dev-server:
```
 npm install --save-dev webpack-dev-server
```

在package.json中加入start脚本:

 "start": "webpack-dev-server --hot --inline --content-base --host 0.0.0.0 --display-error-details ."

start脚本可以不加run,可以直接npm start来开启服务器,这样就可以通过http://127.0.0.1:8080 来查看页面,并且会监控项目文件的修改,只要有修改就会热更新到页面上

React环境部署

January 01, 2018

React入门部署

npm的使用

开发环境

用React渲染界面

入职知识总结

odroid搭建Android实验环境过程

Java并发编程知识总结