文档章节

使用node.js启动React

p
 piz__
发布于 2016/11/29 19:34
字数 1068
阅读 59
收藏 0
点赞 0
评论 0

React简介

本文内容参考:菜鸟教程 http://www.runoob.com/react/react-install.html 。 React 使用 JSX 来替代常规的 JavaScript。而JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。 通过 React 构建组件,使得代码更加容易得到复用,能够很好的应用在大项目的开发中。 新建一个html文件,引入了三个库: react.min.js 、react-dom.min.js 和 browser.min.js:

  1. react.min.js - React 的核心库
  2. react-dom.min.js - 提供与 DOM 相关的功能
  3. browser.min.js - 用于将 JSX 语法转为 JavaScript 语法 这三个文件可以在官网:https://facebook.github.io/react/ 下载react包。

###HelloWorld 这是一个html文件,导入相关的js即可以运行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/react.js"></script>
    <script src="lib/react-dom.js"></script>
    <script src="lib/browser.min.js"></script>
</head>
<body>
<div id="example">

</div>

</body>
<script type="text/babel">
    var HelloWord = React.createClass({
        render:function(){
            return(<h1>HelloWorld !!</h1>);
        }
    });

    ReactDOM.render(<HelloWord/>,document.getElementById("example"));

</script>
</html>

###使用nodejs创建react工程

这个就需要通过 npm 使用 React了。npm是安装nodejs后的一种工具。详情可以先去百度一下。 下面的操作都是在windows下的cmd窗口中操作完成。 ####第一步、安装全局变量

npm install babel -g
npm install webpack -g
npm install webpack-dev-server --save-dev

####第二步、创建根目录

mkdir reactApp
cd reactApp/

####第三步、生成package.json 文件

npm init
//出现下面一段东西,我们需要填写name,description和最后一个yes。
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg> --save` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
name: (react) react-test
version: (1.0.0)
description: 测试react
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to D:\test\react\package.json:

{
  "name": "react-test",
  "version": "1.0.0",
  "description": "测试react",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

Is this ok? (yes) yes

####第四步、添加依赖包及插件

npm install react --save
npm install react-dom --save

同时我们也要安装一些 babel 插件

npm install babel-core
npm install babel-loader
npm install babel-preset-react
npm install babel-preset-es2015

####第五步、创建一些必要文件 创建文件是使用的cmd指令,也可以直接创建文件。

cd.>index.html
cd.>App.js
cd.>main.js
cd.>webpack.config.js

####第六步、设置编译器,服务器,载入器 打开webpack.config.js写入一下代码

 var config = {
   entry: './src/main',
	
   output: {
      path:'./',
      filename: 'index.js',
   },
	
   devServer: {
      inline: true,
      port: 8080
   },
	
   module: {
      loaders: [ {
         test: /\.jsx?$/,
         exclude: /node_modules/,
         loader: 'babel',

         query: {
            presets: ['es2015', 'react']
         }
      }]
   }
	
}

module.exports = config;
  1. entry: 指定打包的入口文件 main.js。
  2. output:配置打包结果,path定义了输出的文件夹,filename则定义了打包结果文件的名称。
  3. devServer:设置服务器端口号为 8080,端口后你可以自己设定 。
  4. module:定义了对模块的处理逻辑,这里可以用loaders定义了一系列的加载器,以及一些正则。当需要加载的文件匹配test的正则时,就会调用后面的loader对文件进行处理,这正是webpack强大的原因。

####第七步、修改 package.json

"start": "webpack-dev-server --hot"

修改后文件

{
  "name": "react-test",
  "version": "1.0.0",
  "description": "测试react",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --hot"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^15.4.1",
    "react-dom": "^15.4.1"
  }
}

现在我们可以使用 npm start 命令来启动服务。--hot 命令会在文件变化后重新载入,这样我们就不需要在代码修改后重新刷新浏览器就能看到变化。这个就是实现实现自动编译的功能。 ####第八步、编写文件内容 index.html

<!DOCTYPE html>
<html>

   <head>
      <meta charset = "UTF-8">
      <title>React App</title>
      <link rel="stylesheet" type="text/css" href="lib/bootstrap-3.3.7-dist/css/bootstrap.min.css">
      <link rel="stylesheet" type="text/css" href="css/login.css">
      <script src="lib/jquery-3.1.1/jquery-3.1.1.min.js"></script>
   </head>

   <body>
      <div id = "app">

      </div>
      <script src = "index.js"></script>
   </body>

</html>

App.js

import React from 'react';

class App extends React.Component {
   render() {
      return (
          <h1>Hello World!</h1>
      );
   }
}
export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';

import App from './App';
ReactDOM.render(<App/>, document.getElementById("app"));

如果想要组件可以在任何的应用中使用,需要在创建后使用 export 将其导出,在使用组件的文件使用 import 将其导入。 ####第九步、运行服务器

npm start

访问浏览器地址:http://localhost:8080/

####第十步、导入开发工具 目前测试了idea、WebStorm工具。直接导入,即可使用。导入后启动如下图:

WebStorm工具

© 著作权归作者所有

共有 人打赏支持
p
粉丝 4
博文 28
码字总数 15580
作品 0
上海
ReactNative环境搭建问题小札

直接进入正题... ----------win7系统 + android studio工具 按照reactnative的官方介绍搭建开发环境 - React Native 中文网,使用Chocolatey,简单方便一些,但是会有一些小问题,不是因为...

害虫_84f3
05/23
0
0
react-webpack-antd--环境篇

Tips [React Error]: Target container is not a DOM element 原因: 在 index.html中将绑定的js文件写在了header中,在渲染组件时需要找到页面上的根节点去渲染 ,绑定在header中还没有根节点...

jdkwky
04/12
0
0
前端技术周刊 2018-06-22:Webpack 生存指南

前端技术周刊 2018-06-22 新闻 生态更新 Nodejs 发布了六月安全更新,建议开发者更新到 10.4.1 版本,包含对 HTTP/2 拒绝服务攻击、TLS 拒绝服务等的预防。 五月底,欧盟的通用数据保护协议 ...

a独家记忆
07/13
0
0
前端每周清单第 47 期:NPM 年度报告与 2018 展望,Airbnb React Router 实践

前端每周清单专注前端领域内容,以对外文资料的搜集为主,帮助开发者了解一周前端热点;分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。欢迎关注【前端之巅】微信公...

王下邀月熊
01/15
0
0
ECMAScript 6 学习笔记(1)--编译环境搭建(VScode)

参考文档:http://es6.ruanyifeng.com/#docs/intro https://www.w3cschool.cn/ecmascript/ ECMAScript是一种定义脚本语言的规范,Javascript正是基于这种规范的一种实现。JavaScript是一种弱...

wx599c47c7bdcad
05/18
0
0
用node开发一个生成react项目的cli工具

我们经常使用create-react-app、vue-cli来快速生成一个新的react或者vue项目,它们的原理是什么,下面就带使用node来开发一个简单的react-cli工具,来揭开其神秘的面纱。 以下是一个简单的 ...

Whirring
06/12
0
0
webPack配置教程(一步步操作)

一: 新建一个文件,例如:webpack-demo 1.命令行:cd webpack-demo, npm init (一直回车,知道输入yes); 目录中出现package.json. 2.安装webpack npm i -D webpack 教程中使用的是最新版本. pac...

沉迷学习中
04/20
0
0
React-Native 之 环境配置和简单使用

前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所偏差,在...

postdep
05/01
0
0
环信webim1.1.2版本在windows下npm环境搭建错误解决

1.1.2版本的webim从ui到整体的代码结构都做了很大改变,从代码结构上采用node.js的环境进行开发和打包,最终打包的输出项目,不依赖node.js的环境进行运行,得益于webpack的打包实现。 这里有...

easonjim
2016/09/01
0
0
全栈工程师之路-Node.js

全栈工程师之路-Node.js 高可用架构专用 原文[高可用架构] https://mp.weixin.qq.com/s?biz=MzAwMDU1MTE1OQ==&mid=405001493&idx=1&sn=f0ecab9b31bad83fb065ac37bb728245&scene=1&srcid=032......

i5ting
2016/04/08
277
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

sklearn学习笔记之简单线性回归

简单线性回归 线性回归是数据挖掘中的基础算法之一,从某种意义上来说,在学习函数的时候已经开始接触线性回归了,只不过那时候并没有涉及到误差项。线性回归的思想其实就是解一组方程,得到...

wangxuwei
8分钟前
0
0
feign之动态interceptor(二)

背景 上文提到了按照不同的feignClient可以根据多个不同的key来进行多个不同的bean的配置 那么我们如何完成多个interceptor的配置呢? 分析 我们刚提到多个配置的玄机就在FeignClientProper...

Mr_Qi
10分钟前
1
0
Linux Kernel 4.16 系列停止维护,用户应升级至 4.17

知名 Linux 内核维护人员兼开发人员 Greg Kroah-Hartman 近日在发布 4.16.18 版本的同时,宣布这是 4.16 系列的最后一个维护版本,强烈建议用户立即升级至 4.17 系列。 Linux 4.16 于 2018 年...

问题终结者
34分钟前
0
0
Apache配置时.htaccess失效不起作用的原因分析

.htaccess 失效的原因 1. 重写规则有问题,检查自己的重写规则 2.Apache配置问题,配置中没有配置启用 rewrite a2enmod rewrite 3.网站配置文件没有启用配置需要配置 000-default.conf <Dire...

TU-DESGIN
54分钟前
1
0
两个求最大公约数C/C++算法实现

#include<stdio.h> #include<time.h> #include <iostream>using namespace std;//求最大公约数 LCD(Largest Common Division)//短除法 //m=8251, n=6105; int LCD_ShortDiv(int m, ......

失落的艺术
今天
1
0
QueryPerformanceCounter

windows的Sleep函数,睡眠线程指定毫秒数,可以用来做毫秒延时。 对于微秒延时,没有一个现成的函数,但是可以通过 QueryPerformanceFrequency QueryPerformanceCounter 来间接实现。原理就是...

开飞色
今天
1
0
log4j2使用AsyncRoot不显示行号问题处理

<AsyncRoot level="info" includeLocation="true"> <AppenderRef ref="File"/></AsyncRoot><!--1.异步logger,还需要在pom.xml中添加disruptor的依赖。2.includeLocation结合异......

小翔
今天
3
0
安卓手机上 K 歌,声音延迟怎么解决?

这篇文章可以为你提供一个解决录音和播放同步问题的思路,而且解决了声音从手机传输到耳机上有延时的问题。 初识音频 在开始之前,我先简单介绍一下音频相关的基础知识,方便下文理解。 我们...

编辑部的故事
今天
2
0
使用token实现在有效期内APP自动登录功能

使用token实现在有效期内APP自动登录功能 http://sevennight.cc/2016/07/19/auto_login_impl.html

风云海滩
今天
3
0
Spring Boot集成RabbitMQ发送接收JSON

默认情况下RabbitMQ发送的消息是转换为字节码,这里介绍一下如何发送JSON数据。 ObjectMapper 最简单发送JSON数据的方式是把对象使用ObjectMapper等JSON工具类把对象转换为JSON格式,然后发送...

小致dad
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部