前言

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

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

1. 环境搭建

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

Webpack - A module bundler
Babel - A Javascript compiler
ES6 - A relatively new Javasript standard
Yarn - A package manager
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的更多相关文章

一看就懂的ReactJs入门教程-精华版
现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我,下面来跟我一起领 ...
ReactJS webpack实现JS模块化使用的坑
从一个原生HTML/CSS/JS模式的网页改造到ReactJS模块化的结构,需要以下步骤: (1)引用ReactJS框架 ->(2)使用webpack 工具 -> (3)配置webpack ...
reactjs 接入数据模型以及markdown语法的支持
页面如下: reactjs 数据接入,直接定义数据(json),如下: reactjs 数据接入,从服务器抓取数据(json),如下:
初探ReactJS.NET 开发
ReactJS通常也被称为"React",是一个刚刚在这场游戏中登场的新手.它由Facebook创建,并在2013年首次发布.Facebook认为React在处理SPA问题上可以成 ...
ReactJs笔记
中文教程:http://reactjs.cn/ 实例: http://www.ruanyifeng.com/blog/2015/03/react.html
redux的中间层 --reactjs学习
React只负责UI层,也就是我们通常在MVC框架中所说的View层,所以在使用React开发中我们得引入Redux 负责Model 一开始学习Redux的中间层有点摸不到头, 其实只要你注意 ...
初识ReactJs（一）
React的开发背景 ReactJS官网地址:http://facebook.github.io/react/ Github地址:https://github.com/facebook/react J ...
D2.Reactjs 操作事件、状态改变、路由
下面内容代码使用ES6语法一.组件的操作事件: 1.先要在组件类定义内定义操作事件的方法,如同event handler.若我需要监听在组件内的Button的点击事件onClick,首先定义监听方法 ...
D1.1.利用npm（webpack）构建基本reactJS项目
前提: 已经安装nodejs和npm #全局安装webpack 自动构建化工具,职能管理项目:webpack-dev-server是开发工具,提供 Hot Module Replacement 功能# ...
ReactJS实现的通用分页组件
大家多少都自己写过各种版本的分页工具条吧,像纯服务版的,纯jsWeb板的,Angular版的,因为这个基础得不能再基础的功能太多地方都会用到,下面我给出以个用ReactJS实现的版本,首先上图看下效果 ...

随机推荐

javascript走马灯的效果(文档标题文字滚动)
做一些网站的时候,文档标题会滚动,这个效果是走马灯的效果. <!DOCTYPE html> <html> <head> <meta charset=" ...
python大规模爬取京东
python大规模爬取京东主要工具 scrapy BeautifulSoup requests 分析步骤打开京东首页,输入裤子将会看到页面跳转到了这里,这就是我们要分析的起点我们可以看到这个页面 ...
vue全家桶(Vue+Vue-router+Vuex+axios)（Vue+webpack项目实战系列之二）
Vue有多优秀搭配全家桶做项目有多好之类的咱就不谈了,直奔主题. 一.Vue 系列一已经用vue-cli搭建了Vue项目,此处就不赘述了. 二.Vue-router Vue的路由,先献上文档(http ...
[POI2005]SAM-Toy Cars
题目描述 Johnny is a little boy - he is only three years old and enjoys playing with toy cars very much. ...
映射语句之INSERT语句
1.一个 INSERT SQL 语句可以在<insert>元素在映射器 XML 配置文件中配置例子: <insert id="insertStudentWithId&qu ...
OSX MacVim + vim-lldb配置和使用心得
Mac里面默认的编译器是clang/clang++ 所以debugger就选择了lldb 想搭配MacVim一起使用,于是就找到了vim-lldb这个插件,相当强大这个插件支持Vundle,所以 ...
Python3中的模块
模块使用哪种语言实现并不重要,因为所有的模块导入与使用的方式都相同. 1.常用模块导入格式: import importable1,importable2,... import importable ...
VB6之摄像头控制
参考文献:http://www.cnblogs.com/xidongs/archive////.html 直接上代码: 'code by lichmama from cnblogs.com '@vb6 ...
JavaScript中的坑--全局变量惹得祸
js中变量的作用域及闭包的概念概述身为一名程序员,因为bug周末加班是必不可少的事情,当解决bug的时候,总有些bug是因为规范导致的,但是这些bug往往不好找,也就是"前人挖坑,后 ...
Chrome浏览器扩展开发系列之十九：扩展开发示例
翻译总结了这么多的官网内容,下面以一款博主开发的“沪深股票价格变化实时追踪提醒”软件为例,介绍Chrome浏览器扩展程序的开发,开发环境为Eclipse IDE+Chrome Browser. “沪深 ...

Hello ReactJS

前言