zoukankan      html  css  js  c++  java
  • React 环境搭建及页面调试方法

    React 环境搭建及页面调试方法

    |作者:RexFang

    |出处:http://www.cnblogs.com/rexfang/

    |关于作者:Java 程序员一枚

    |版权:本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接。如有问题,可以邮件:fangruitao.work@foxmail.com

    注:本文件主要介绍 React 入门环境的搭建,以及调试 Demo 的基本方法,更加完整的信息,请前往官网查看:https://facebook.github.io/react/docs/hello-world.html

    安装 Nodejs

    • 下载地址:https://nodejs.org/en/download/
    • 默认安装即可,安装完成后,WIN+R 输入 cmd,打开命令行
    • 输入 node -v,可以看到 Nodejs 的版本信息
    • 输入 npm --version,可以看到 npm 的版本信息

    安装 React

    • 输入 npm install -g create-react-app,等待一段时间以完成 React 的安装

    创建 React 应用

    • 创建一个文件夹,在命令行,进入前面创建的文件夹,输入 create-react-app my-app 创建 React 应用, 应用名称为“my-app”,等待一段时间以完成 React 应用的创建

    React 应用的启动和关闭

    • 应用创建完成后,在命令行输入 cd my-app,进入应用目录,输入 npm start 即可启动 my-app React 应用
    • 启动完成后,在浏览器输入 http://localhost:3000/ 即可访问到 React 应用
    • 如果要关闭 React 应用,只需要在命令行按下 Ctrl+D ,此时会提示 “终止批处理操作吗(Y/N)?” ,按提示输入 Y 回车即可关闭 React 应用(发现输入 N 回车都可以关闭应用,这也许是一个 BUG,不过不影响我们学习)

    访问自己写的 JS

    • 应用创建完成后,有一个实例的 JS 文件 App.js,被 index.js 文件所引用,后续可以自己模仿 App.js 文件写自己的 JS,然后在 index.js 文件中替换掉 APP.js 的引用,即可在浏览器看到自己写的 JS 的效果

      例如:
               先在 src/demo/demo01 目录先创建 HelloReact.js 文件
               修改 index.js 文件,引入 import HelloReact from './demo/demo01/HelloReact',
               修改 ReactDOM.render(, document.getElementById('root'));

  • 相关阅读:
    【QCon笔记】Native 和 Web 融合
    点透
    测试
    Moom for mac 最棒的窗口管理软件
    Egret白鹭H5小游戏开发入门(三)
    Egret白鹭H5小游戏开发入门(二)
    Egret白鹭H5小游戏开发入门(一)
    关于Canvas模糊的问题
    利用Canvas实现360度浏览
    JS中取整以及随机颜色问题
  • 原文地址:https://www.cnblogs.com/rexfang/p/7441110.html
Copyright © 2011-2022 走看看