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'));
React 环境搭建及页面调试方法的更多相关文章
- spark JAVA 开发环境搭建及远程调试
spark JAVA 开发环境搭建及远程调试 以后要在项目中使用Spark 用户昵称文本做一下聚类分析,找出一些违规的昵称信息.以前折腾过Hadoop,于是看了下Spark官网的文档以及 github ...
- webpack+babel+ES6+react环境搭建
webpack+babel+ES6+react环境搭建 步骤: 1 创建项目结构 注意: 先创建一个项目目录 react 这个名字自定义,然后进入到这个目录下面 mkdir app //创建app ...
- 从零开始react实战:云书签-1 react环境搭建
总览篇:react 实战之云书签 本篇是实战系列的第一篇,主要是搭建 react 开发环境,在create-react-app的基础上加上如下功能: antd 组件库按需引入 ,支持主题定制 支持 l ...
- STM32环境搭建/学习观点/自学方法 入门必看
文章转自armfly开发板V4软件开发手册,分享学习~ 今天有幸看到armfly的开发板软件开发手册,开头的基础知识,真的很有用,还好有看到,一切都不迟,感悟很多,摘抄部分,学习分享~ 关于开发环境的 ...
- 最小白的webpack+react环境搭建
本文也同步发表在我的公众号“我的天空” 从零开始,用最少的配置.最少的代码.最少的依赖来搭建一个最简单的webpack+react环境. 最近在玩webpack+react+移动端,那么第一步自然是搭 ...
- Kubernetes环境下的各种调试方法
作者:Jack47 转载请保留作者和原文出处 欢迎关注我的微信公众账号程序员杰克,两边的文章会同步,也可以添加我的RSS订阅源. 本文介绍在Kubernetes环境下的调试方法,希望对读者有用.如果关 ...
- java web 入门级 开发 常用页面调试方法
这里介绍一下Java web 入门级开发中常用的代码调式方法; ( 仅供入门级童靴 参考) ; 工具: chrome 浏览器 (版本越高越好); Java web 入门级开发 主要就是两个方面: ...
- Hi3516开发笔记(二):Hi3516虚拟机基础环境搭建之串口调试、网络连接以及sftp文件传输
前言 搭建Hi3516的基础虚拟机,为交叉编译环境搭建前期工作.后续会编译一个基本的C语言程序Demo,在HI3516上跑. 虚拟机 开发本对虚拟机做了一些基本要求,如下图: 其实重 ...
- react环境搭建及文件配置
webpack简介 构建工具(基于Nodejs)node(v16)前端工程化. 环境搭建 创建一个空的package.json npm init webpack核心包(提供了API,插件) npm i ...
随机推荐
- JavaBean简介和用法
一.JavaBean的含义 JavaBean是使用Java语言开发的一个可重用组件,能使Html代码与JAVA代码分离,并节省开发时间,简单的说就是一个包含了setter和getter以及至少一个无参 ...
- mybatis和返回
1.查询int 数组 dao类: public List<Integer> queryRoleIdList(Integer userId); service类: List<Integ ...
- 安装OFFICE2016错误代码0-1018(0)的解决方案 和激活方案
一.安装OFFICE2016错误代码0-1018(0)的解决方案 下面方法亲测有效:Step 1. Go to C:\Program Files\Common Files\microsoft shar ...
- nginx 安装第三方 模块
查看nginx在安装时开启了哪些模块 如果你nginx是rpm包安装的,直接用如下命令nginx -V 如果你是源码包编译安装,假如你的安装路径是/usr/local/nginx,那么你可以使用: / ...
- 什么是Uboot
U-Boot的全称是Universal Boot Loader,遵循GPL条款的开放源码项目. U-Boot的作用是系统引导. U-Boot目前不仅仅支持嵌入式Linux系统的引导(对Linux的支持 ...
- P4824 [USACO15FEB]Censoring (Silver) 审查(银)
传送门 一个串的匹配肯定考虑KMP 那就暴力KMP 记录一下到每个字符时匹配的位置 找到一个符合的串就标记然后暴力回跳 感觉好像太暴力了... #include<iostream> #in ...
- java web关于文件上传下载的总结
文件上传使用<form method="POST" enctype="multipart/form-data"> , 而不是默认的applica ...
- spring boot——常用注解
@SpringBootApplication:申明让spring boot自动给程序进行必要的配置,这个配置等同于:@Configuration ,@EnableAutoConfiguration 和 ...
- 手工安装XDB 组件in oracle 11g
#############. sample 1 install guide below step is only for oracle 11g database installation, 10g d ...
- Java多线程之同步集合和并发集合
Java多线程之同步集合和并发集合 不管是同步集合还是并发集合他们都支持线程安全,他们之间主要的区别体现在性能和可扩展性,还有他们如何实现的线程安全. 同步集合类 Hashtable Vector 同 ...