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是否有更好的解决方案.那么你就来对了. 客观来说,作为核心团队成员,显然我们会 ...
随机推荐
- PhpStorm的open in browser怎么修改端口和相对路径
昨天下班后,在电脑安装phpstorm.xampp安装正常,但是在phpstorm上直接打开网站文件一直报错,一直报错502.我感觉好奇快,怎么会报错呢.后面我用hbuild打开文件,在浏览器显示正常 ...
- 如何使用mybatis《三》
在前边阐述了单独使用mybatis的方法,在实际开发过程中mybatis经常和spring一起使用,即mybatis和spring进行集成,现在我们来看如何集成. mybatis和spring进行集成 ...
- PPP模式下的融资结构优化
PPPcode{white-space: pre;} pre:not([class]) { background-color: white; }if (window.hljs && d ...
- springmvc+mybatis+spring 整合
获取[下载地址] [免费支持更新]三大数据库 mysql oracle sqlsever 更专业.更强悍.适合不同用户群体[新录针对本系统的视频教程,手把手教开发一个模块,快速掌握本系统] ...
- [Tool] 使用StyleCop验证命名规则
[Tool] 使用StyleCop验证命名规则 前言 微软的MSDN上,有提供了一份微软的命名方针,指引开发人员去建立风格一致的程序代码. http://msdn.microsoft.com/zh-t ...
- angular $http 请求数据的时候加载loading
1.目录结构 2.页面加载时效果(加载的时候比较难截图,是页面上方出现一条进度条,然后我另加了一个Loading..的提示,请忽略那个table) 3.页面加载完成后效果 4.index.html & ...
- javascript-this,call,apply,bind简述2
上节我们一起研究了this这个小兄弟,得出一个结论,this指向调用this所在函数(或作用域)的那个对象或作用域.不太理解的朋友可以看看上节的内容,这次我们主要探讨一下call(),apply(), ...
- java多线程系列3-线程同步
如果一个资源被多个线程同时访问,可能会遭到破坏,这篇文章介绍java线程同步来解决这类问题 引入问题 某电影院目前正在上映贺岁大片,共有100张票,而它有3个售票窗口售票,请设计一个程序模拟该电影院售 ...
- 高仿700Bike的界面图片
下面展示本人高仿项目"700Bike"的已经完成的界面:
- 最新Burpsuite Pro v1.7.03 介绍和破解版下载
0x00 介绍 Burp Suite 是用于攻击web 应用程序的集成平台.它包含了许多工具,并为这些工具设计了许多接口,以促进加快攻击应用程序的过程.所有的工具都共享一个能处理并显示HTTP 消息, ...