React.js学习笔记(2) - 起飞Hellow World

2017-08-25 本文已影响51人 woow_wu7

(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，做以下配置：

(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(<App />, 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 (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React</h2>
        </div>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

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

index.html
-------------------------------
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">

    <title>React App</title>
  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>    //挂载的节点
     </body>
</html>

效果图

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

React.js学习笔记(2) - 起飞Hellow World

(1) React.js环境搭建

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

猜你喜欢

热点阅读