zoukankan      html  css  js  c++  java
  • React入门实例

    前言

      React 的核心思想是:封装组件,各个组件维护自己的状态和UI,当状态变更,自动重新渲染整个组件。

    理解:react首先值得拍手称赞的是它所有的开发都基于一个组件(component),组件和组件之间传递方法,而且每个组件都有一个状态(state),当方法改变了这个状态值时,整个组件就会重绘,从而达到刷新,另外,说到重绘就要提到虚拟dom了,就是用js模拟dom结构,等整个组件的dom更新完毕,才渲染到页面,简单来说只更新了相比之前改变了的部分,而不是全部刷新,所以效率很高。

    项目初始化

    大家先新建一个项目文件夹,在里面建一个项目信息的文件package.json:

    {
    "name": "react-demo",
    "version": "1.0.0",
    "description": "我的第一个react案例",
    "main": "index.js",
    "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
    },
    "author": "张三",
    "license": "ISC",
    "dependencies": {
    "react": "^0.13.3",
    "sass": "^0.5.0"
    },
    "devDependencies": {
    "babel-core": "^5.5.8",
    "babel-loader": "^5.1.4",
    "css-loader": "^0.14.5",
    "file-loader": "^0.8.4",
    "jsx-loader": "^0.13.2",
    "node-libs-browser": "^0.5.2",
    "node-sass": "^3.2.0",
    "sass-loader": "^1.0.2",
    "style-loader": "^0.12.3",
    "url-loader": "^0.5.6",
    "webpack": "^1.9.11"
    }
    }

    建好之后,运行命令:npm install  安装项目依赖的所有模块。

    webpack配置

    项目使用的技术方案是:webpack+react+es6。在项目文件夹下新建一个webpack.config.js

    'use strict';
    module.exports = {
    entry: [
    "./src/entry.js" // 入口文件是src文件夹里的entry.js
    ],
    output: {
    path: './out/',
    filename: "bundle.js" // 输出文件是out文件夹的bundle.js
    },
    // externals属性是告诉webpack当遇到require('react')的时候,不去处理并且默认为全局的React变量。
    // 这样子,我们就需要在index.html单独用src去加载js。
    externals: {
    'react': 'React'
    },
    module: {
    // 配置的loaders:
    loaders: [
    { test: /.js$/, loader: "jsx!babel", include: /src/},
    { test: /.css$/, loader: "style!css"},
    { test: /.scss$/, loader: "style!css!sass"},
    { test: /.(png|jpg)$/, loader: 'url?limit=8192'}
    ]
    }
    };
  • 相关阅读:
    【crontab】误删crontab及其恢复
    New Concept English there (7)
    New Concept English there (6)
    New Concept English there (5)
    New Concept English there (4)
    New Concept English there (3)
    New Concept English there (2)Typing speed exercise
    New Concept English there (1)Typing speed exercise
    New Concept English Two 34 game over
    New Concept English Two 33 94
  • 原文地址:https://www.cnblogs.com/bossren/p/6290204.html
Copyright © 2011-2022 走看看