React.js学习笔记(2) - 起飞Hellow World + (create-react-app官方的脚手架工具)

(1) React.js环境搭建

• (1) 在项目根目录创建package.json文件

npm init

• (2) 安装react和react-dom

npm install react react-dom --save

• (3) 启用 ES6 和 JSX
  --（安装babel-preset-react ，babel-preset-es2015）
  --（安装babel-core，babel-loader）
  请确保你已经安装了babel-preset-react 和 babel-preset-es2015 ，并且已经在你的 .babelrc 配置中启用了他们。
  -- 下一代的javascript标准（ES6，ES7），这些标准目前并未被当前的浏览器完全的支持；
  使用基于JavaScript进行了拓展的语言，比如React的JSX 。
  -- Babel其实是几个模块化的包，其核心功能位于称为babel-core的npm包中，不过webpack把它们整合在一起使用，但是对于每一个你需要的功能或拓展，你都需要安装单独的包（用得最多的是解析Es6的babel-preset-es2015包和解析JSX的babel-preset-react包）。

npm install babel-preset-react babel-preset-es2015 babel-core babel-loader --save-dev

• (4)安装webpack相关

1.如果没安装过webpack需要先全局安装webpack，( webpack-dev-server也需要全局安装 )

npm install webpack -g

npm install webpack-dev-server -g

2.安装webpack和webpack-dev-server

npm install webpack webpack-dev-server --save-dev

3.安装相关的loader

npm install style-loader css-loader less-loader url-loader json-loader --save-dev
npm install react-hot-loader --save

//处理图片，在指定的图片大小范围内自动启用base64编码图片（url-loader）
//安装less-loader前 需要安装 先安装 less
//react-hot-loader会在第6点中详细解释

npm install less --save-dev

4.安装相关的插件 ( html-webpack-plugin ) + ( extract-text-webpack-plugin )

npm install html-wepack-plugin --save-dev

html-webpack-plugin
会在指定的输出（output）输出文件夹里生成indexhtml文件，并且会自动引入同文件夹里面的js、css等文件。

---------------------------------------------

npm install extract-text-webpack-plugin --save-dev

extract-text-webpack-plugin
该插件的主要是为了抽离css样式,防止将样式打包在js中引起页面样式加载错乱的现象
//extract:提取的意思

html-webpack-plugin


html-webpack-plugin插件在webpack.config.js中的配置


webpack.config.js如下：


var webpack = require('webpack');
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');


module.exports = {
    entry:'./app/index.js',
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: 'bundle.js'
    },
    module:{
        loaders: [    ]
    },
    plugins:[
        new HtmlWebpackPlugin(),
    ]

};

// 最后的效果：在指定的输出（output）输出文件夹里生成indexhtml文件
//个人感觉没什么用

(html-webpack-plugin详细)http://blog.csdn.net/keliyxyz/article/details/51513114

5.配置webpack.config.js

• 关于module:加载器配置 loaders

- 关于module:加载器配置  loaders

module配置选项
功能描述

test
一个匹配loaders所处理的文件的拓展名的正则表达式（必须）

loader
loader的名称（必须）

include/exclude
手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹）（可选）

query
为loaders提供额外的设置选项（可选）

6.配置react-hot-loader
-- 简单的讲，就是使用 react 编写代码时，能让修改的部分自动刷新。但这和自动刷新网页是不同的，因为 hot-loader 并不会刷新网页，而仅仅是替换你修改的部分。
-- react-hot-loader 是对 webpack 的热加载进行了改进，支持 react 组件状态不丢失。

• (6.1) 安装react-hot-loader

npm install react-hot-loader --save-dev

• (6.2)另外 react-hot-loader 是基于 webpack-dev-server，所以还得安装 webpack-dev-server

其实上面已经安装过webpack-dev-server了
----------------------
npm install webpack-dev-server --save-dev

• (6.3)配置webpack-dev-server
  使用 react-hot-loader 时，首先还是要让 webpack-dev-server 打开。
  在根目录新建 server.js，做以下配置：

(webpack相关)https://segmentfault.com/a/1190000006178770
(详细)http://www.jianshu.com/p/5253b99e4e25
http://blog.csdn.net/qq_27080247/article/details/70473571
http://blog.csdn.net/liuyinghui523/article/details/54582053
http://www.jianshu.com/p/237260271dc8
(react-hot-loader配置)https://segmentfault.com/a/1190000004660311
(webpack-dev-server配置)https://segmentfault.com/a/1190000006964335
(Webpack——令人困惑的地方 )http://blog.csdn.net/a1104258464/article/details/51914450

• (5)用 webpack --watch实现webpack自动打包

---

---

---

---

---

---

(2) creact-react-app官方的脚手架构建工具

• 命令行如下：

cnpm install create-react-app -g   //全局安装

create-react-app + 你要开发的app名字(new-app)
cd new-app
cnpm start

http://localhost:3000/地址查看项目

• npm run eject ：命令暴露webpack等配置文件

npm run eject 

//暴露webpack等配置文件，对webpack等相关文件进行配置 

• 特点：
  无需配置；
  集成了对 React, JSX, ES6 和 Flow 的支持；
  集成了开发服务器；
  配置好了浏览器热加载的功能；
  在 JavaScript 中可以直接 import CSS 和图片；
  自动处理 CSS 的兼容问题，无需添加 -webkit 前缀；
  集成好了编译命令，编译后直接发布成产品，并且还包含了 sourcemaps。
• 执行 npm test 或 yarn test 可以执行测试动作
• 编译项目执行 npm run build 或 yarn build；
• 入口文件

index.js
-------------------------
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker'; //服务配置文件

ReactDOM.render(, document.getElementById('root'));   //渲染app组件，挂在到html的root节点
registerServiceWorker();   //启动相关的配置服务

app.js组件
------------------------
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      

        

          
          
Welcome to React
        
        

          To get started, edit src/App.js and save to reload.
        
      
    );
  }
}

export default App;
--------------------------------
以上结构和react-native十分相似呢

index.html
-------------------------------


  
    
    
    
    
    

    
  
  
    
    
    //挂载的节点
     

效果图

官网https://github.com/facebookincubator/create-react-app