• 使用React-routeWebpack快速构建一个react程序

    初始化项目

    我们先创建个空文件夹,然后初始化 package.json ,填写一些基本信息。

    $ npm init
    

    接下来我们开始安装依赖项,我的 package.json 的依赖项如下

     "devDependencies": {
        "babel": "^5.5.6",
        "babel-core": "^5.5.6",
        "babel-loader": "^5.1.4",
        "history": "^1.13.1",
        "react": "^0.13.3",
        "react-hot-loader": "^1.2.7",
        "react-router": "^0.13.3",
        "webpack": "^1.12.6",
        "webpack-dev-server": "^1.12.1"
      } 
    

    如果没有填写keywords,可以手动添加:

    "keywords": [
        "webpack",
        "es6",
        "react"
      ],
    运行命令:

    $ npm install 
    

    项目创建好后,我们接下来创建一些必要的文件和目录;

    $ mkdir js css && touch index.html webpack.config.js
    

    webpack

    webpack (更多)是一款模块处理器,他会将你所有的代码打包成静态文件,放到你的开发的App中。

    打开webpack.config.js,然后添加下面的代码:

    var webpack = require('webpack');  
    module.exports = {  
        entry: [
          'webpack/hot/only-dev-server',
          "./js/app.js"
        ],
        output: {
            path: __dirname + '/build',
            filename: "bundle.js"
        },
        module: {
            loaders: [
                { test: /\.js?$/, loaders: ['react-hot', 'babel'], exclude: /node_modules/ },
                { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'},
                { test: /\.css$/, loader: "style!css" }
            ]
        },
        plugins: [
          new webpack.NoErrorsPlugin()
        ]
    };
    

    这份文件大概有四个配置项entry, output, module,plugins.

    entry:指定打包的入口文件,每有一个键值对,就是一个入口文件。

    output:配置打包结果,path定义了输出的文件夹,filename则定义了打包结果文件的名称,filename里面的[name]会由entry中的键替换,例子中的/build/bundle.js便是生成的文件。

    resolve:定义了解析模块路径时的配置,常用的就是extensions,可以用来指定模块的后缀,这样在引入模块时就不需要写后缀了,会自动补全.

    module:定义了对模块的处理逻辑,这里可以用loaders定义了一系列的加载器,以及一些正则。当需要加载的文件匹配test的正则时,就会进行处理。这里我们使用了react-hotbabelbabel-loader是我们使用ES-6进行开发时用于生成JS文件。最后我们生成了一个style.css仅仅做个例子,告诉我们如何引入样式文件,实际上我们可以加载诸如sass-loader这样的加载器。

    loader对文件进行处理,这正是webpack强大的原因。比如这里定义了凡是.js结尾的文件都是用babel-loader做处理,而.jsx结尾的文件会先经过jsx-loader处理,然后经过babel-loader处理。当然这些loader也需要通过npm install安装。

    plugins: 这里定义了需要使用的插件,比如commonsPlugin在打包多个入口文件时会提取出公用的部分,生成common.js。

    NoErrorsPlugin: 定义代码出现错误时的时受否自动重新加载。

    这个时候我们再package.json中加入script 字段,

    "scripts": {
         "start": "webpack-dev-server --hot --progress --colors",
        "build": "set BABEL_ENV=production && webpack --config webpack.config.js --progress"
      },
    

    这个时候我们输入一个npm start命令时候我们会启动一个webpack server这个时候你可以访问localhost:8080/webpack-dev-server/#/;如果你使用npm run build时候可以将文件自动生成到bulid/下。

    接下来我们新建index.html文件

    <!doctype html>  
    <html lang="en">  
      <head>
        <meta charset="utf-8">
        <title>New React App</title>
      </head>
      <body>
        <section id="react"></section>
        <script src="bundle.js"></script>
      </body>
    </html>  
    

    现在我们访问浏览器可以便会引进新创建的bundle.js,实际上你可以引进任何你想要的资源。

    React-router

    完成项目的基本创建,接下来我们创建app.js项目的入口文件。代码如下:

    import React from 'react';  
    import Router from 'react-router';  
    import { DefaultRoute, Link, Route, RouteHandler } from 'react-router';
    
    import LoginHandler from './components/Login.js';
    
    let App = React.createClass({  
      render() {
        return (
          <div className="nav">
            <Link to="app">Home</Link>
            <Link to="login">Login</Link>
    
            {/* this is the importTant part */}
            <RouteHandler/>
          </div>
        );
      }
    });
    
    let routes = (  
      <Route name="app" path="/" handler={App}>
        <Route name="login" path="/login" handler={LoginHandler}/>
      </Route>
    );
    
    Router.run(routes, function (Handler) {  
      React.render(<Handler/>, document.body);
    });
    

    文章头部是我们将要用的reactreact-router的插件包引进来。同事我们还引入login.js作为我们的Login React 组件。接着,我们使用React 创建一个类。这个例子中,其实就是一个简单的导航条会出现所有的子组件中。我们简单的Link到我们的路由:AppLogin.然后React route将会被RouteHandler组件初始化。

    在这个App中,我们定义路由并且指定了相应的处理程序(React 组件)。我们定义了我们的根路径为app,并且其他的地址将会是App的子组件。这个例子中,我们添加了一个登录页面,用于用户登录到App中。

    最后,React-router会将我们定义的一切加载到document.body中来。这就是index.html转变成我们React App.

    Components

    弄到这了,我们需要添加组件(Components).在我们的 /js 目录下,我们需要开始创建组件。我们创建Login.js:

    import React from 'react';
    
    let Login = React.createClass({ 
    
      render() {
        return(<div>Welcome to login</div>);
      }
    });
    
    export default Login;  
    

    其实那只是一个非常简单的组件,内容为显示"Welcaome to Login"。这个时候我们可以运行下我们的app。npm start 然后访问http://localhost:8080/webpack-dev-server/#

    这个时候,你可以见到一个导航条上有两个链接Home 和 Login.如果点击Login这个时候可以显示我们刚刚创建的内容。

    参考:http://www.jackpu.com/shi-yong-react-routehe-webpackkuai-su-gou-jian-ge-reactcheng-xu/ package.json中的sripts不同)

    demo下载

    展开全文
  • React路由设置

    2020-05-19 14:35:01
    这里需要说明一下,HashRouterBrowserRouter可以互换使用,区别在于HashRouter在浏览器页面显示时会出现#号,如图,而BrowserRouter则不会,如图。 下面导入了3个页面,分别是IndexPage,NewsPa

    路由的意思就是分页,实现不同页面的跳转。
    在React框架下需要先安装对应的依赖库:

    npm install --save-dev react-router-dom
    

    然后创建项目,我用的是WebStorm开发工具。我将App.js改为了router.js,导入包
    这里需要说明一下,HashRouter和BrowserRouter可以互换使用,区别在于HashRouter在浏览器页面显示时会出现#号,如图在这里插入图片描述,而BrowserRouter则不会,如图在这里插入图片描述
    下面导入了3个页面,分别是IndexPage,NewsPage,NewsDetailsPage,在下方用path 指定各自的url,exact的意思是不要显示在同一页面,都是单独的个体。

    import React from 'react';
    import {HashRouter as Router,Route} from 'react-router-dom';//BrowserRouter
    import IndexPage from './pages/index';
    import NewsPage from './pages/news';
    import NewsDetailsPage from "./pages/news/details";
    
    class RouterComponent extends React.Component{
        render(){
            return (
                <React.Fragment>
                    <Router>
                        <React.Fragment>
                            <Route path="/" exact component={IndexPage}></Route>
                            <Route path="/news" exact component={NewsPage}></Route>
                            {/*<Route path="/news/details/:id/:title" exact component={NewsDetailsPage}></Route>*/}
                            <Route path="/news/details/" exact component={NewsDetailsPage}></Route>
                        </React.Fragment>
                    </Router>
                </React.Fragment>
            )
        }
    }
    
    展开全文
  • I am running my build locally on Xampp. My Code: <pre><code>import React from "react"; import ReactDOM from "react-dom"; export default class Front extends React.Component { constructor(){ super...
  • 一般htmljs运行在浏览器,服务器用于有后台代码的时候创建,因为浏览器无法解析后台语言比如php,需要使用服务器来转换成浏览器可以理解的语言,然后通过http传输给浏览器。 2,node服务器node.js的关系? 后端...

    1,web服务器的作用?
    一般html和js运行在浏览器,服务器用于有后台代码的时候创建,因为浏览器无法解析后台语言比如php,需要使用服务器来转换成浏览器可以理解的语言,然后通过http传输给浏览器。

    2,node服务器和node.js的关系?
    后端语言php在和js交互的时候,需要搭建Apache或者nginx服务器进行http传输,Apache用于接收 HTTP 请求并提供 Web 页面,php语言只用来写应用程序并不管http这个事。
    node.js作为js的后端交互语言,在和js交互的时候要创建服务器,php这个语言并不管服务器的事,但是node.js语言需要管理http传输的事,所以node.js同时做了写应用和服务器的事情。
    总结:node.js是语言,这个语言可以创建node服务器。php也是语言,这个语言不可以创建服务器。

    3,react项目为什么需要运行在node服务器上?cesium为什么需要运行在node上?他们并没有后端代码呀?
    react项目创建一般需要下载很多包,比如npm  install  antd等。所以需要将react项目和node紧密结合。一旦两者结合,react项目启动之前就需要启动node服务器。同理cesium本身就是一个npm包,需要安装npm install cesium。
    node服务器启动主要依赖于代码:
    var http = require('http');
    http.createServer(function (request, response) {
        // 发送 HTTP 头部 
        // HTTP 状态值: 200 : OK
        // 内容类型: text/plain
        response.writeHead(200, {'Content-Type': 'text/plain'});
        // 发送响应数据 "Hello World"
        response.end('Hello World\n');
    }).listen(8888);
    启动的时候:node  server.js; 然后访问的时候直接访问:localhost:8888即可


    4,node服务器和xampp服务器的区别?
    xampp服务器专注于http传输。而node本身是一个语言,这个语言不仅可以用来写出应用,还可以处理http传输,同时还可以作为包管理,npm  install.同时node服务器还有众所周知的优点:

    展开全文
  • 记录的话因为Vue, React的项目打包相差无几, 这里简单一下React打包的项目吧 首先讲重点 改API中的诸如localhost的URL, 切记修改一致修改成你所部署到的服务器的外网IP地址. 因为这里React是单页面应用, 因此对...

    因为有段时间打包部署一直出问题, 到后面也算是一步一步自己查阅才部署成功.

    记录的话因为Vue, React的项目打包相差无几, 这里简单用一下React打包的项目吧

    首先讲重点

    改API中的诸如localhost的URL, 切记修改一致修改成你所部署到的服务器的外网IP地址.

    因为这里React是单页面应用, 因此对node代码与多项目应用会有所不同

    server.get('/index', (req, res) => {
    	res.sendFile(__dirname + '/dist/index.html');
    	// 这里用的是 express 服务器
    	// dist为create-react-app 直接打包出来的目录, 未做修改文件夹名.
    })
    

    下面是处理静态文件, 这里打包自然就会生成这样的目录, 所以node代码会很简单

    server.use('/static', express.static('./dist/static'));
    // 看你使用情况, 也可以统一放在static下
    
    // server.use('/js', express.static('./dist/js'));
    // server.use('/css', express.static('./dist/css'));
    // server.use('/img', express.static('./dist/img'));
    // server.use('/fonts', express.static('./dist/fonts'));
    

    处理请求, 切记, 在打包之前将前端网页的请求url统统修改为部署服务器的ip地址

    server.use('/api/user', require('./routers/userRouter'));
    server.use('/api/movie', require('./routers/movieRouter'));
    

    这里要解释的点有点多, 基于express以及mongoDB+mongoose的数据库

    • 你的服务器上要安装mongoDB, 所以这里mongoose链接的数据库就是你的服务器, 对服务器来说就是localhost => 本地, 所以这里不需要改, 直接用localhost就行
    • 下面的express => server.listen, 则是你开启该express服务器的地址, 这里就需要使用你的服务器外网IP地址了, 端口记得开放.
    • 如果未使用数据库, 只是简单的项目 直接使用server.listen()即可.
    mongoose.connect('mongodb://localhost:27017/db', {useNewUrlParser: true}, error => {
    	if (error) {
    		console.log('连接数据库失败:');
    		console.log(error);
    	} else {
    		console.log('连接数据库成功');
    		// 启动成功
    		server.listen({
    			hostname:'你的服务器地址',
    			// hostname:'localhost',
    			port:1124,
    		}, error => {
    			if (!error) {
    				console.log('服务器启动成功: localhost:1124');
    			} else {
    				console.log('服务器启动失败:');
    				console.log(error);
    			}
    		});
    	}
    });
    
    

    重点, 外部引用文件.

    // 这里卡了我很长时间, 可能是因为配置的问题, 部署后项目迟迟找不到文件.
    // 比如如果你使用了 iscroll-probe.js等, 这时候你也可以将其直接放入static/js下
    // 也可以单独放置在外面, 这里请参考copy-webpack-plugin的使用
    
    // 我的解决方案比较笨, 先打包react项目后找到dist/index.html(主页面html)
    // 直接修改其src, 
    <script src="./static/iscroll-probe.js"></script>
    
    即可.
    

    简单的预览, http://123.57.146.121:1123/home
    *还有注意的一点, 这里的路径得是/home才返回页面, 也可以简单的对express进行修改, *

    // 这里将 '/home' 改成 '/' 即可, 看你自己
    server.get('/home', (req, res) => {
    	res.sendFile(__dirname + '/dist/index.html');
    	// 这里用的是 express 服务器
    	// dist为create-react-app 直接打包出来的目录, 未做修改文件夹名.
    })
    

    完.

    展开全文
  • <p><code>"react/zmq": "0.2.*|0.3.*"</code></p> <p>how ever i got this message <p>...
  • ①检查依赖 本地是Ubuntu18.04环境,简易安装的lampp环境。Elasticsearch-PHP依赖于PHP7,先查看一下lampp自带的PHP版本。 root@ubuntu:~# whereis php php: /opt/lampp/bin/php ...-rwxr-xr-x 1 root...

    ①检查依赖

    本地是Ubuntu18.04环境,简易安装的lampp环境。Elasticsearch-PHP依赖于PHP7,先查看一下lampp自带的PHP版本。

    root@ubuntu:~# whereis php
    php: /opt/lampp/bin/php
    root@ubuntu:~# ls -l /opt/lampp/bin/ | grep php
    -rwxr-xr-x 1 root root      240 Oct 13 18:36 gen_php_doc.sh
    -rwxr-xr-x 1 root root      107 Oct 13 18:34 html_template_phplibtool
    lrwxrwxrwx 1 root root       10 Nov 19 18:34 php -> php-7.2.11
    -rwxr-xr-x 1 root root 15922272 Oct 13 18:37 php-7.2.11
    lrwxrwxrwx 1 root root       14 Nov 19 18:34 php-cgi -> php-cgi-7.2.11
    -rwxr-xr-x 1 root root 15869312 Oct 13 18:37 php-cgi-7.2.11
    lrwxrwxrwx 1 root root       17 Nov 19 18:34 php-config -> php-config-7.2.11
    -rwxr-xr-x 1 root root     4396 Oct 13 18:27 php-config-7.2.11
    -rwxr-xr-x 1 root root 16098880 Oct 13 18:37 phpdbg
    lrwxrwxrwx 1 root root       13 Nov 19 18:34 phpize -> phpize-7.2.11
    -rwxr-xr-x 1 root root     4547 Oct 13 18:27 phpize-7.2.11
    -rwxr-xr-x 1 root root     1941 Oct 13 18:36 phpunit
    -rwxr-xr-x 1 root root   158280 Oct 13 18:37 swftophp
    root@ubuntu:~# /opt/lampp/bin/php -v
    PHP 7.2.11 (cli) (built: Oct 13 2018 09:27:08) ( NTS )
    Copyright (c) 1997-2018 The PHP Group
    Zend Engine v3.2.0, Copyright (c) 1998-2018 Zend Technologies

    ②配置composer

    root@ubuntu:~# cd /opt/lampp/htdocs/
    root@ubuntu:/opt/lampp/htdocs# vim composer.json
    root@ubuntu:/opt/lampp/htdocs# cat composer.json
    {
    	"require": {
    		"elasticsearch/elasticsearch": "~6.0"
    	}
    }

    ③安装composer

    root@ubuntu:/opt/lampp/htdocs# cd ../bin/
    root@ubuntu:/opt/lampp/bin# wget http://getcomposer.org/installer
    root@ubuntu:/opt/lampp/bin# ./php installer

    ④安装Elasticsearch-PHP

    root@ubuntu:/opt/lampp/bin# cd ../htdocs/
    root@ubuntu:/opt/lampp/htdocs# ../bin/php ../bin/composer.phar install --no-dev
    Do not run Composer as root/super user! See https://getcomposer.org/root for details
    Loading composer repositories with package information
    Updating dependencies
    Package operations: 5 installs, 0 updates, 0 removals
      - Installing psr/log (1.1.0): Downloading (100%)         
      - Installing react/promise (v2.7.1): Downloading (100%)         
      - Installing guzzlehttp/streams (3.0.0): Downloading (100%)         
      - Installing guzzlehttp/ringphp (1.1.1): Downloading (100%)         
      - Installing elasticsearch/elasticsearch (v6.1.0): Downloading (100%)         
    Writing lock file
    Generating autoload files

    ⑤测试安装

    root@ubuntu:/opt/lampp/htdocs# vim es.php
    root@ubuntu:/opt/lampp/htdocs# cat es.php 
    <?php
    require 'vendor/autoload.php';
    
    use Elasticsearch\ClientBuilder;
    
    $client = ClientBuilder::create()->build();
    
    
    $params = [
        'index' => 'my_index',
        'type' => 'my_type',
        'id' => 'my_id',
        'body' => ['testField' => 'abc']
    ];
    
    $response = $client->index($params);
    print_r($response);
    ?>

    打开浏览器,查看发现index插入成功。

     

     

    参考:

    https://www.elastic.co/guide/en/elasticsearch/client/php-api/current/_installation_2.html

    展开全文
  • <p>I tried to run my file with apache webserver (I already have XAMPP) but it shows 404 error because it doesn't find bundle.js (webpack file). <p>Here is my package.json file: <pre><code>{ "name":...
  • React笔记

    2020-07-01 10:39:02
    slogan:learn once,write anywhere(只需要学习一次react中的核心概念,就可以使用reactjs写网页,使用reactnative写nativeapp,使用react360来实现虚拟现实的app) 1、reactjs(才用react实现网页编程) 1
  • 今天webpack搭建一个react项目的时候总是报错: Module build failed (from ./node_modules/_babel-loader@8.0.6@babel-loader/lib/index.js): TypeError: this.setDynamic is not a function 显示模块构建...
  • 一、ReactNative概述 移动端开发的3种常见模式: 1、WebApp 理解1: 通过前端技术 编写的可以运行在手机浏览器端的网页, 提供的用户体验 类似于app用户体验 --》WebApp 理解2: ...
  • 1.打开xampp 2.启动apache服务 3.后端的json文件放在api目录下,api目录放在xampp/htdocs下 这样之后通过路由 http://localhost:8080/api/json名 就可以访问到对应的文件 4.前端代码文件删除public目录下的api...
  • React<二>入门

    2019-04-15 01:03:02
    react中文官方文档学习 边学边练 探索学习资源 学习一门技术的最快的方式就是看它的文档,跑官方的demo. 快速开始 我使用chrome浏览器,在分离文件时,文档中说要通过http服务,linux下可以创建软链,于是我在在...
  • 常用的到的网站 vue学习库: https://github.com/vuejs/awesome-vue#carousel (json数据的格式化,提高本地测试的效率) json在线编辑: http://www.bejson.com/http://www.kjson.com/ //提供fake的数据:...
  • React 简书

    2019-08-14 12:43:50
    create-react-app jianshu yarn add styled-components -D 利用js写css样式 样式会更高效 https://github.com/chochinlu/blog/issues/126 ...
  • 【从零开始】thinkPHP 5.1 框架搭建(Win 10)Windows 10环境下搭建php开发框架开发工具功能快捷键thinkPHP 5.1 框架下载安装xampp下载与安装配置xampp中Apache启动XAMPP测试如何改变文本的样式插入链接与图片如何...
  • 客户设置了301跳转,可只有首页跳转成功,内页不跳转,后来核查,客户有设置伪静态规则,需要把伪静态规则放在301跳转规则后面即可正常实现内页跳转功能.<?xml version="1.0" encoding="UTF-8"?>...
  • 但是还是会有一些节奏比较慢的网站,还是PC页面手机PAD页面不同的访问域名。正好我这里有个需要,同一个域名要根据不同的访问设备显示PC页面或者手机页面,这里收集两个比较简洁的方法,都是通过JS代码实现的。 ...
  • 1:C:\Windows\System32\drivers\etc\hosts 127.0.0.1 localhost 127.0.0.1 www.bin.cn 2:E:\xampp\apache\conf\extra\httpd-vhosts.conf ## ... ## DocumentRoot "E:\xampp\htdocs\zerg
  • 前端 面试 html、css 框架 juqery react 平台 微信企业号 服务端 java java学习路径 服务器 appache nginx 持续集成环境CI nexus
1 2 3 4 5 ... 9
收藏数 161
精华内容 64
热门标签