React 之 Hello world
一入react深似海，从此学习为常态，react 成为了一种趋势，很多人应该很多人准备进坑，下面对react进行简单的描述：
首先学习react，要有多方学习的准备，例如：Webpack, Babel, Redux, React Router, CSS Modules, NPM, ES6/7等等，如果想要完全掌握，就必须去进行了解。
下面，以最原始的Hello World入门：
1、打开
2、建立一个文件夹：mkdir webpack-demo && cd webpack-demo
3、建立一个package.json 文件：npm init（建立的时候会填一些问题：such as project name, description, information about the author, etc.）
这些并不重要，如果不填，直接回车就行
4、添加webpack依赖，并进行安装：npm install --save-dev webpack
5、准备完毕，接下来让我们建立相关文件：such as :一个 "app" 文件夹放置编辑的源代码/ JavaScript模板, 一个 "public" 文件夹 被用来连接你的浏览器such as：index.html.之后自动建立的bundle.js也在这个文件夹下. 然后创建三个文件： 在public文件夹下的index.html 、 在app文件夹下的 main.js 、 Greeter.js.建好之后如下所示：
6、接下来将下面代码分别复制到相应文件：
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Webpack Sample Project</title>
</head>
<body> <div id='root'></div> <script src="bundle.js"></script>
</body>
</html>
main.js:
//require('./Greeter.js')用于引入Greeter.js文件
var greeter = require('./Greeter.js');
document.getElementById('root').appendChild(greeter());
Greeter.js
module.exports = function() {
var greet = document.createElement('div');
greet.textContent = "Hello World";
return greet;
};
到这里就可以运行了，因为上面代码采用的ES5的写法，所以就不用进行转换了
运行命令行为：webpack app/main.js public/bundle.js
将会出现如下结果：
同时在public文件夹下会生成bundle.js文件，在浏览器上打来index.html文件将会出现Hello World，如下：
上述是最简单的webpack与react结合使用方法，但是操作起来比较麻烦，下面我们使用配置webpack的方法，建立一个JavaScript文件，来配置我们所需要的信息
创建一个webpack.config.js文件：其源码为：
module.exports = {
entry: __dirname + "/app/main.js",
output: {
path: __dirname + "/public",
filename: "bundle.js"
}
}
现在就可以直接运行webpack命令，而不需要任何参数，webpack命令可以通过配置的webpack.config文件，寻找对应的内容，其运行结果如下：
除了以上方法，还可以通过配置使用本地服务器的方式启动，不用打开html文件，而且在你修改文件之后，页面会及时的做相应的更新，而不用人为的操作：
其方式为，在webpack.json更新代码：
module.exports = {
2 devtool: 'eval-source-map',
entry: __dirname + "/app/main.js",
output: {
path: __dirname + "/public",
filename: "bundle.js"
},
8 devServer: {
9 contentBase: "./public",
10 colors: true,
11 historyApiFallback: true,
12 inline: true
13 }
}
同时，加载安装依赖，命令为：npm install --save-dev webpack-dev-server
现在你可以运行命令：webpack-dev-server
启动成功，在浏览器上输入：http://localhost:8080/
页面如下：你可以在Greeter.js中修改hello world 为 Hello World!!!。观察页面神奇的变化
下一章节，会引入json代码，css 样式，ES6代码的转换等。
欢迎提出建议和交流
React 之 Hello world的更多相关文章
- react组件的生命周期
写在前面: 阅读了多遍文章之后,自己总结了一个.一遍加强记忆,和日后回顾. 一.实例化(初始化) var Button = React.createClass({ getInitialState: f ...
- 十分钟介绍mobx与react
原文地址:https://mobxjs.github.io/mobx/getting-started.html 写在前面:本人英语水平有限,主要是写给自己看的,若有哪位同学看到了有问题的地方,请为我指 ...
- RxJS + Redux + React = Amazing!（译一）
今天,我将Youtube上的<RxJS + Redux + React = Amazing!>翻译(+机译)了下来,以供国内的同学学习,英文听力好的同学可以直接看原版视频: https:/ ...
- React 入门教程
React 起源于Facebook内部项目,是一个用来构建用户界面的 javascript 库,相当于MVC架构中的V层框架,与市面上其他框架不同的是,React 把每一个组件当成了一个状态机,组件内 ...
- 通往全栈工程师的捷径 —— react
腾讯Bugly特约作者: 左明 首先,我们来看看 React 在世界范围的热度趋势,下图是关键词“房价”和 “React” 在 Google Trends 上的搜索量对比,蓝色的是 React,红色的 ...
- 2017-1-5 天气雨 React 学习笔记
官方example 中basic-click-counter <script type="text/babel"> var Counter = React.create ...
- RxJS + Redux + React = Amazing!（译二）
今天,我将Youtube上的<RxJS + Redux + React = Amazing!>的后半部分翻译(+机译)了下来,以供国内的同学学习,英文听力好的同学可以直接看原版视频: ht ...
- React在开发中的常用结构以及功能详解
一.React什么算法,什么虚拟DOM,什么核心内容网上一大堆,请自行google. 但是能把算法说清楚,虚拟DOM说清楚的聊聊无几.对开发又没卵用,还不如来点干货看看咋用. 二.结构如下: impo ...
- React的使用与JSX的转换
前置技能:Chrome浏览器 一.拿糖:React的使用 React v0.14 RC 发布,主要更新项目: 两个包: React 和 React DOM DOM node refs 无状态的功能 ...
- Vue.js 2.0 和 React、Augular等其他框架的全方位对比
引言 这个页面无疑是最难编写的,但也是非常重要的.或许你遇到了一些问题并且先前用其他的框架解决了.来这里的目的是看看Vue是否有更好的解决方案.那么你就来对了. 客观来说,作为核心团队成员,显然我们会 ...
随机推荐
- ANSI X9.19 MAC算法
/// <summary> /// 获取MAC校验字节数据 /// </summary> /// <param name="bankData"> ...
- java LinkedBlockingQueue和ConcurrentLinkedQueue的区别
实现上看,两者都继承于AbstractQueue,但是ConcurrentLinkedQueue实现了Queue,而LinkedBlockingQueue实现了BlockingQueue,Blocki ...
- ssh 客户端远程vi文本文件中文乱码（亲测）
由于是生产环境,且非笔者控制,为了避免影响系统全局,仅对本session有效 export LANG="zh_CN.UTF-8"export LANG="zh_CN.GB ...
- C# Winform打包部署时添加注册表信息实现开机启动
使用VS自带的打包模块可以很方便的对项目进行打包部署,同时我们也可以在安装部署时操作注册表实现开机启动软件.具体实现如下: 1.添加安装部署项目后,鼠标右键安装项目->视图->注册表,HK ...
- MongoDB整合Spring
1.环境 Jdk:1.6.0_10-rc2 Spring3.1.2 下载 依赖jar文件: 2.相关配置 ①.Spring配置文件 <?xml version="1.0" ...
- 参加：白帽子活动-赠三星(SAMSUNG) PRO....
参加:白帽子活动-—赠三星(SAMSUNG) PRO.... Everybody~小i在这里提前祝大家国庆假期愉快,咱们期待已久的国庆活动终于开始拉,下面进入正题,恩,很正的题! 活动地址:http: ...
- 使用Reflexil修改类库
因为公司一个项目需要修改PPS的颜色,于是反编译了PPS的代码发现,作者很不厚道的把所有着色都HardCode在代码里 private static void InsertDefaultSeriesC ...
- dict和set
#dict和set #dict #Python内置了字典:dict的支持,dict全称dictionary,在其他语言中也称为map #使用键-值(key-value)存储,具有极快的查找速度. #字 ...
- 实战3--应用EL表达式判断用户登录信息
1.判断用户名是否为空,空则显示提示信息 (1)编写index.jsp页面 <%@ page language="java" contentType="text/h ...
- 我的android学习经历12
自动匹配输入的内容(文章最后有一个问题有兴趣的可以解答一下,谢谢大神了) 这个主要是两个控件MultiAutoCompleteTextView和AutoCompleteTextView 这两个控件和T ...