一入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的更多相关文章

  1. react组件的生命周期

    写在前面: 阅读了多遍文章之后,自己总结了一个.一遍加强记忆,和日后回顾. 一.实例化(初始化) var Button = React.createClass({ getInitialState: f ...

  2. 十分钟介绍mobx与react

    原文地址:https://mobxjs.github.io/mobx/getting-started.html 写在前面:本人英语水平有限,主要是写给自己看的,若有哪位同学看到了有问题的地方,请为我指 ...

  3. RxJS + Redux + React = Amazing!（译一）

    今天,我将Youtube上的<RxJS + Redux + React = Amazing!>翻译(+机译)了下来,以供国内的同学学习,英文听力好的同学可以直接看原版视频: https:/ ...

  4. React 入门教程

    React 起源于Facebook内部项目,是一个用来构建用户界面的 javascript 库,相当于MVC架构中的V层框架,与市面上其他框架不同的是,React 把每一个组件当成了一个状态机,组件内 ...

  5. 通往全栈工程师的捷径 —— react

    腾讯Bugly特约作者: 左明 首先,我们来看看 React 在世界范围的热度趋势,下图是关键词“房价”和 “React” 在 Google Trends 上的搜索量对比,蓝色的是 React,红色的 ...

  6. 2017-1-5 天气雨 React 学习笔记

    官方example 中basic-click-counter <script type="text/babel"> var Counter = React.create ...

  7. RxJS + Redux + React = Amazing!（译二）

    今天,我将Youtube上的<RxJS + Redux + React = Amazing!>的后半部分翻译(+机译)了下来,以供国内的同学学习,英文听力好的同学可以直接看原版视频: ht ...

  8. React在开发中的常用结构以及功能详解

    一.React什么算法,什么虚拟DOM,什么核心内容网上一大堆,请自行google. 但是能把算法说清楚,虚拟DOM说清楚的聊聊无几.对开发又没卵用,还不如来点干货看看咋用. 二.结构如下: impo ...

  9. React的使用与JSX的转换

    前置技能:Chrome浏览器   一.拿糖:React的使用 React v0.14 RC 发布,主要更新项目: 两个包: React 和 React DOM DOM node refs 无状态的功能 ...

  10. Vue.js 2.0 和 React、Augular等其他框架的全方位对比

    引言 这个页面无疑是最难编写的,但也是非常重要的.或许你遇到了一些问题并且先前用其他的框架解决了.来这里的目的是看看Vue是否有更好的解决方案.那么你就来对了. 客观来说,作为核心团队成员,显然我们会 ...

随机推荐

  1. 正态QQ图的原理

    code{white-space: pre;} pre:not([class]) { background-color: white; }if (window.hljs && docu ...

  2. 关联规则-R语言实现

    关联规则code{white-space: pre;} pre:not([class]) { background-color: white; }if (window.hljs && ...

  3. ComboBox的联动（三层架构）

    需求:根据年级下拉框的变化使得科目下拉框绑定次年级下对应有的值 我们用三层架构的模式来实现 1.我们想和数据库交互,我们首先得来先解决DAL数据库交互层 01.获得年级下拉框的数据 在GradeDAL ...

  4. [WP8] Binding时，依照DataType选择DataTemplate

    [WP8] Binding时,依照DataType选择DataTemplate 范例下载 范例程序代码:点此下载 问题情景 在开发WPF.WP8...这类应用程序的时候,透过Binding机制搭配Da ...

  5. 对CSS进行wxss思路学习，display属性。

    先来概要一下学习思路: 本系列内容,将针对微信小程序中的WXSS学习,所以在学习CSS时每一个知识点都在小程序IDE中进行实践,达到最好的学习效果. 由于wxss与CSS有些许不同,在学习CSS过程中 ...

  6. .NET破解之PDFdo转换器

    无意中看到一个PDF转换器,叫PDFdo,看起了功能挺多的,于是想把它破了. 下载 官网:http://www.pdfdo.com/ 安装 安装后,只有一个exe应用程序,如果是.NET 程序应该有很 ...

  7. android XMl 解析神奇xstream 三： 把复杂对象转换成 xml

    前言:对xstream不理解的请看: android XMl 解析神奇xstream 一: 解析android项目中 asset 文件夹 下的 aa.xml 文件 android XMl 解析神奇xs ...

  8. Android项目实战（五）：TextView自适应大小

    对于设置TextView的字体默认大小对于UI界面的好看程度是很重要的,小屏幕设置的文字过大或者大屏幕设置的文字过小都造成UI的不美观 现在就让我们学习自适应大小的TextView控件,即当文字长度变 ...

  9. Hibernate学习0.Hibernate入门

    Hibernate是什么 面向java环境的对象/关系数据库映射工具. 1.开源的持久层框架. 2.ORM(Object/Relational Mapping)映射工具,建立面向对象的域模型和关系数据 ...

  10. IntelliJ IDEA 2016.2.4下载与注册码

    下载地址 https://download.jetbrains.8686c.com/idea/ideaIU-2016.2.4.dmg 注册码 43B4A73YYJ-eyJsaWNlbnNlSWQiOi ...