zoukankan      html  css  js  c++  java
  • [React] Create & Deploy a Universal React App using Zeit Next

    In this lesson, we'll use next to create a universal React application with no configuration. We'll create page components that will render on the server if accessed directly, but function as you would expect in the client. We'll use the routing capabilities included with next to create links between the components using pushState and we'll incorporate our own React component. Finally, we'll deploy the application to now with a simple command in the terminal.

    Setup:

    npm init -y

    Install:

    npm i --save-dev next

    Scripts: 

      "scripts": {
        "dev": "next",
        "start": "next start",
        "build": "next build"
      },

    Create pages/index.js file:

    import React from 'react';
    
    export default () => (
        <div>
            <h1>Hello next!!</h1>
        </div>
    )

    Run:

    npm run dev

    Then you can see the index.js page on the localhost:3000.

    Add another page:

    import React from 'react';
    
    export default class About extends React.Component {
    
        static getInitialProps({req}) {
            const name = req ? 'server': 'client';
            return {
                name: name
            };
        }
    
        render() {
            return (
                <div>
                    <h1>ABOUT PAGE</h1>
                    <span>
                        This page is rendering from {this.props.name}
                    </span>
                </div>
            );
        }
    }

    This can show whether the page is rendered from the server side or clinet side.

    Create a nav component to do the rounting:

    // compoennts/nav.js
    
    import React from 'react';
    import Link from 'next/link';
    
    export default () => (
        <div>
            <Link href="/">Home</Link>
            {' '}
            <Link href="/about">About</Link>
        </div>
    )

    Then import to home page and about page.

    // index.js
    
    import React from 'react';
    import Link from 'next/link';
    
    import Nav from '../components/nav';
    
    export default () => (
        <div>
            <h1>Hello next!!</h1>
            <Nav></Nav>
        </div>
    )

    Then we can create an .npmignore to ignore the .next folder in the root.

    Last using 'now' to deploy the page to now.

    Github

  • 相关阅读:
    cocos2d 中判断CGPoint或者CGSize是否相等
    object-c cocos2d-x 写程序时注意调试的技巧
    object-c [self class] 和 [self _cmd]
    object-c 协议和委托
    ios cocos2d TexturePacker生成文件后的使用方法
    object-c 要理解协议的几个重要概念
    Linux Mint 没有 language support 语言支持解决方案
    cocos2d ARCH_OPTIMAL_PARTICLE_SYSTEM这个未定义的问题
    CCSpriteBatchNode的优化性能
    Codeforces Round #190 DIV.2 A. Ciel and Dancing
  • 原文地址:https://www.cnblogs.com/Answer1215/p/6136111.html
Copyright © 2011-2022 走看看