react 基础

通过 npm 使用 React

开发环境

请确保已经正确安装了如下工具包:

  1. node.jsv4+
  2. npm
  3. webpack

安装

npm install

开发环境编译及服务启动并开启热部署模式

npm start

服务已启动,请打开浏览器输入: http://localhost:8080/webpack-dev-server/

生产环境

直接运行index.html运行

‘npm webpack打包输出’

以下命令通过git 编写

第一步、安装全局包

$ npm install babel -g
$ npm install webpack -g
$ npm install webpack-dev-server --save-dev

第二步、创建根目录
创建一个根目录,目录名为:reactApp,再使用 npm init 初始化,生成 package.json 文件:

$ mkdir reactApp
$ cd reactApp/
$ npm init

第三步、添加依赖包及插件
因为我们要使用 React, 所以我们需要先安装它,–save 命令用于将包添加至 package.json 文件。

$ npm install react --save
$ npm install react-dom --save

同时我们也要安装一些 babel 插件

$ npm install babel-core
$ npm install babel-loader
$ npm install babel-preset-react
$ npm install babel-preset-es2015

第四步、创建文件

$ touch index.html
$ touch App.jsx
$ touch main.js
$ touch webpack.config.js

第五步、设置编译器,服务器,载入器 webpack.config.js

 var config = {
   entry: './main.js',

   output: {
      path:'./',
      filename: 'index.js',
   },

   devServer: {
      inline: true,
      port: 7777
   },

   module: {
      loaders: [ {
         test: /\.jsx?$/,
         exclude: /node_modules/,
         loader: 'babel',

         query: {
            presets: ['es2015', 'react']
         }
      }]
   }

}

module.exports = config;
  • entry: 指定打包的入口文件 main.js。
  • output:配置打包结果,path定义了输出的文件夹,filename则定义了打包结果文件的名称。
  • devServer:设置服务器端口号为 7777,端口后你可以自己设定 。
  • module:定义了对模块的处理逻辑,这里可以用loaders定义了一系列的加载器,以及一些正则。当需要加载的文件匹配test的正则时,就会调用后面的loader对文件进行处理,这正是webpack强大的原因。

    package.json

"start": "webpack-dev-server --hot"

第六步、index.html

     <div id = "app"></div>
      <script src = "index.js"></script>

第七步、App.jsx 和 main.js

//App.jsx
import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            Hello World!!!<br />
            欢迎来到菜鸟教程学习!!!
         </div>
      );
   }
}

export default App;
//main.js
import React from 'react';
import ReactDOM from 'react-dom';

import App from './App.jsx';

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

第八步、运行服务

$ npm start

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值