前言

React学习前先搭好环境，官网的例子看着比较分散。结合webpack就可以体验完整的es6开发流程了。

源码：https://github.com/Ryan-Miao/hello-react-js/releases/tag/0.1

1. 环境搭建

涉及以下几个技术。但从hello world的角度说，目前先不用知道是干嘛的，先用来学习react，后面再去研究各个组件的功能。

  1. Webpack - A module bundler
  2. Babel - A Javascript compiler
  3. ES6 - A relatively new Javasript standard
  4. Yarn - A package manager
  5. React - As expected

1.1 安装一些东西

去官网下载NodeJS，安装。

去官网下载yarn，然后安装。

1.2 开始搭建

最终搭建的文件结构如下：

.

|____.babelrc

|____node_modules

|____app

| |____components

| | |____App.jsx

| |____index.html

| |____index.js

|____dist

| |____index.html

| |____index_bundle.js

|____package.json

|____readme.md

|____structure.txt

|____webpack.config.js

|____yarn.lock

1.2.1 初始化

mkdir hello-react-js

cd hello-react-js

yarn init

添加webpack

yarn add webpack webpack-dev-server path

这时，项目根目录下会多出一个yarn.lock，不用理会。

1.2.2 在根目录下创建webpack.config.js

var path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');

const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({

    template: './app/index.html',

    filename: 'index.html',

    inject: 'body'

});

module.exports = {

    entry: './app/index.js',

    output: {

        path: path.resolve(__dirname, 'dist'),

        filename: 'index_bundle.js'

    },

    module: {

        loaders: [

            { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ },

            { test: /\.jsx?$/, loader: 'babel-loader', exclude: /node_modules/ }

        ]

    },

    plugins: [HtmlWebpackPluginConfig]

};
  • entry： 指向入口js文件
  • output: 指向打包后的文件目录
    • filename: js打包后的文件名
    • path: 打包后的文件目录
  • loaders: 转换工具。这里简单加载es6的转换工具babel-loader，将以.js或者.jsx结尾的文件转换为es5.
  • plugins: 一些插件。这里用到HtmlWebpackPlugin，将打包后的js文件插入到指定的html模板里。好处是我们不用手动将js插入html中，这在修改js文件名的时候很有用，否则我们还要手动修改js引入的名称。

1.2.3 添加babel

刚才提到了babel-loader，除了配置之外还需要加载依赖：

yarn add babel-loader babel-core babel-preset-es2015 babel-preset-react --dev

然后，在根目录创建.babelrc:

{

  "presets":[

    "es2015", "react"

  ]

}

1.2.4 添加react

yarn add react react-dom

创建app/index.html

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>React App</title>

</head>

<body>

<div id="root">

</div>

</body>

</html>

创建app/index.js

import React from 'react';

import ReactDOM from 'react-dom';

import App from './components/App.jsx';

ReactDOM.render(<App />, document.getElementById('root'));

创建app/components/App.jsx

import React from 'react';

export default class App extends React.Component {

    render() {

        return (

            <div style={{textAlign: 'center'}}>

                <h1>Hello World! Hi ReactJS</h1>

            </div>);

    }

}

1.2.5 添加html-webpack-plugin

前面配置了html-webpack-plugin，这里还需要加载依赖文件:

yarn add html-webpack-plugin

在前面的配置文件制定了html模板文件，输出文件名，以及js打包文件插入的位置。

1.3 基本搞定，运行一下

打开package.json。在script下添加

...

"scripts": {

    "start": "webpack-dev-server"

 },

 ...

运行

yarn start

这时候页面显示如下。大功告成。

可以在package.json里配置不同的webpack运行环境。这里只是搭建学习react官方文档之前先要准备好的环境。最终，package.json:

{

  "name": "hello-react",

  "version": "1.0.0",

  "description": "",

  "main": "index.js",

  "scripts": {

    "build": "webpack",

    "start": "webpack-dev-server",

    "test": "echo \"Error: no test specified\" && exit 1"

  },

  "keywords": [],

  "author": "Ryan Miao",

  "license": "MIT",

  "devDependencies": {

    "babel-core": "^6.25.0",

    "babel-loader": "^7.1.1",

    "babel-preset-es2015": "^6.24.1",

    "babel-preset-react": "^6.24.1",

    "clean-webpack-plugin": "^0.1.16",

    "css-loader": "^0.28.4",

    "html-webpack-plugin": "^2.29.0",

    "less-loader": "^4.0.5",

    "react": "^15.6.1",

    "style-loader": "^0.18.2",

    "url-loader": "^0.5.9",

    "webpack": "^3.4.1",

    "webpack-dev-server": "^2.6.1"

  },

  "dependencies": {

    "path": "^0.12.7",

    "react-dom": "^15.6.1"

  }

}

1.3 小结

开始的时候照葫芦画瓢，先把环境搭建起来。然后开始学习，开始做事。在需要的时候去研究对应的问题。不然，知识何其多也。下面就可以照着react官网的教程，把react组件过一遍。然后再去看redux。

参考

Hello ReactJS的更多相关文章

  1. 一看就懂的ReactJs入门教程-精华版

    现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我,下面来跟我一起领 ...

  2. ReactJS webpack实现JS模块化使用的坑

    从一个原生HTML/CSS/JS模式的网页改造到ReactJS模块化的结构,需要以下步骤: (1)引用ReactJS框架 ->(2)使用webpack 工具 -> (3)配置webpack ...

  3. reactjs 接入数据模型以及markdown语法的支持

    页面如下: reactjs 数据接入,直接定义数据(json),如下: reactjs 数据接入,从服务器抓取数据(json),如下:  

  4. 初探ReactJS.NET 开发

    ReactJS通常也被称为"React",是一个刚刚在这场游戏中登场的新手.它由Facebook创建,并在2013年首次发布.Facebook认为React在处理SPA问题上可以成 ...

  5. ReactJs笔记

    中文教程:http://reactjs.cn/ 实例: http://www.ruanyifeng.com/blog/2015/03/react.html

  6. redux的中间层 --reactjs学习

    React只负责UI层,也就是我们通常在MVC框架中 所说的View层,所以在使用React开发中 我们得引入Redux 负责Model 一开始学习Redux的中间层 有点 摸不到头, 其实只要你注意 ...

  7. 初识ReactJs（一）

    React的开发背景 ReactJS官网地址:http://facebook.github.io/react/ Github地址:https://github.com/facebook/react J ...

  8. D2.Reactjs 操作事件、状态改变、路由

    下面内容代码使用ES6语法 一.组件的操作事件: 1.先要在组件类定义内定义操作事件的方法,如同event handler.若我需要监听在组件内的Button的点击事件onClick,首先定义监听方法 ...

  9. D1.1.利用npm（webpack）构建基本reactJS项目

    前提: 已经安装nodejs和npm #全局安装webpack 自动构建化工具,职能管理项目:webpack-dev-server是开发工具,提供 Hot Module Replacement 功能# ...

  10. ReactJS实现的通用分页组件

    大家多少都自己写过各种版本的分页工具条吧,像纯服务版的,纯jsWeb板的,Angular版的,因为这个基础得不能再基础的功能太多地方都会用到,下面我给出以个用ReactJS实现的版本,首先上图看下效果 ...

随机推荐

  1. 解决Ubuntu SMPlayer播放视频无声音问题

    问题:Ubuntu Kylin 14.04 系统默认装好之后,smplayer播放视频都是正常的,但最近可能由于一些误设置,导致smplayer播放任何格式的视频都无声.解决方法:由于ALSA是Lin ...

  2. C#基础知识-面向对象思想之继承（八）

    上一篇的标题编程思想我觉得不是很符合主题,因为编程思想的范围太大了,不仅仅是封装 继承 多态,所以比较符合主题的应该是面向对象思想.这一篇中将继续叙述面向对象思想中的继承. 从字面来看继承表达的意思已 ...

  3. jmeter 实现DB数据与接口数据的匹配校验

    前言:接口出参数据与DB数据结合校验,使校验力度更准确~ jmeter自带插件JDBC Request Sampler 这个Sampler可以向数据库发送一个jdbc请求(sql语句),并获取返回的数 ...

  4. AngularJS <a> 超链接标签不起作用？

    问题描述: Angular JS app中,使用超链接标签<a href='location'>click</a> 不起作用. 解决方法: 如果你不巧配置了$locationP ...

  5. Cordova各个插件使用介绍系列（三）—$cordovaImagePicker从手机图库选择多张图片

    详情链接地址:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/cordova-3-cordovaimagepicker/ 这是能从手 ...

  6. UE4 difference between servertravel and openlevel(多人游戏的关卡切换)

    多人游戏的关卡切换分为无缝和非无缝.非无缝切换时,客户端将跟服务器断开连接,然后重新连接到同一个服务器,服务器则加载一个新地图.无缝切换不会发生这样的情况. 有三个函数供我们使用:UEngine::B ...

  7. jquery $.each 和for 怎么跳出循环

    jquery $.each 和for 怎么跳出循环 1.for循环中我们使用continue:终止本次循环计入下一个循环,使用break终止整个循环.2.而在jquery中 $.each则对应的使用r ...

  8. 【Android Developers Training】 37. 共享一个文件

    注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...

  9. 关于DOM中的model（将元素转成对象进行操作）

    DOM document (html, xml) object 将文档中的HTML元素转成js的对象 通过ID找到文档的元素转成js对象 var obj = document.getElementBy ...

  10. bootstrap图标字体不出来问题的解决办法

    @font-face { font-family: 'Glyphicons Halflings'; src: url('/Scripts/bootstrap/fonts/glyphicons-half ...