react最佳入门实践(1)

时间：2017-06-08 22:33:57 阅读：220 评论：0 收藏：0 [点我收藏+]

1.环境搭建

React 是 Facebook 推出的一个用来构建用户界面的 JavaScript 库

1.1.安装node(mac版)

　　安装homebrew

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

　　通过homebrew安装node

brew install node

　　测试是否安装正确

node -v
npm -v

注意：window平台安装node很简单，只需要一直点击下一步安装即可

1.2.创建项目结构

mkdir react-demo //创建app目录 用来存放项目源文件 
cd react-demo //进入react-demo目录
mkdir dist // 创建dist目录 用来存放打包好的文件
touch webpack.config.js //创建webpack的配置文件
mkdir src //创建源码目录
cd src //进入到src目录
mkdir components //存放组件目录
touch index.js //在app目录中创建 index文件 入口文件 
cd .. //返回到 react-demo目录
npm init -y //初始化项目

1.3. 安装webpack

npm install webpack --save-dev

1.4.配置webpack

在webpack.config.js文件中输入下面配置内容

 module.exports = {
    context:__dirname+"/src",  //源文件目录
    entry:{
        index:"./index.js"   //在源文件目录下去找index.js 文件作为打包的入口文件
    },
    output:{
        path:__dirname+"/dist",     //生成的文件存放目录
        filename:"[name].bundle.js"   //生成的文件  name 表示entry下面的app
    }
}

1.5.让npm 可以运行 webpack

在package.json 文件中添加一条命令

{
  "name": "ES6-demo",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build":"./node_modules/.bin/webpack"    
  },
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {},
  "devDependencies": {
    "webpack": "^2.6.1"
  }
}

1.6.使用打包好的js文件

· 在dist目录下面新建index.html 文件，并且引入打包好的js文件

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, 
          maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<script src="index.bundle.js"></script>
</body>
</html>

1.7.测试打包是否成功

在src目录下的index.js中输入一行代码

alert(1)

在命令行窗口中执行命令（）：

npm run build

注意：执行命令的时候需要确保目录是在当前项目，例如：E:\ES6-demo>

1.8.使用babel来编译ES6

安装相关loader

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

修改webpack.config.js 配置文件,添加规则：

module.exports = {  
    context:__dirname+"/app",
    entry:{
        index:"./index.js"
    },
    output:{
        path:__dirname+"/dist",
        filename:"[name].bundle.js"
    },
    module:{
        rules:[
            {
                test:/\.jsx?$/,
                exclude: /node_modules/,
                use: [{
                    loader: "babel-loader",
                    options: { presets: ["es2015"] }
                }],
            },
        ]
    }
}

1.9.添加web服务器支持

安装webpack-dev-server

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

修改package.json文件，添加后：

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build":"./node_modules/.bin/webpack",
    "dev": "./node_modules/.bin/webpack-dev-server --content-base dist"  //这里是新添加内容
  },

最后执行 npm run dev执行编译，在浏览器http://localhost:8080/输入查看效果

1.10.添加react支持

npm install react react-dom --save
npm install babel-preset-react --save-dev

修改webpack.config.js 配置文件，修改后：

module.exports = {  
    context:__dirname+"/app",
    entry:{
        index:"./index.js"
    },
    output:{
        path:__dirname+"/dist",
        filename:"[name].bundle.js"
    },
    module:{
        rules:[
            {
                test:/\.jsx?$/,
                exclude: /node_modules/,
                use: [{
                    loader: "babel-loader",
                    options: { presets: ["react","es2015"] }
                }],
            },
        ]
    }
}

测试是否react是否配置正确

在src目录下 index.js文件中添加下面内容

import React from ‘react‘;
import ReactDOM from ‘react-dom‘;
ReactDOM.render(<h1>hello</h1>,document.querySelector("#container"))

在dist目录下 index.html 文件中添加一个div

<div id="container"></div>

　　执行命令

npm run dev

在浏览器中输入 http://localhost:8080查看结果

1.11 添加样式支持

安装css-loader 和 style-loader

npm install css-loader style-loader --save-dev

修改配置webpack.config.js 配置文件

module.exports = {  
    context:__dirname+"/app",
    entry:{
        app:"./index.js"
    },
    output:{
        path:__dirname+"/dist",
        filename:"[name].bundle.js"
    },
    module:{
        rules:[
            {
                test:/\.jsx?$/,
                exclude: /node_modules/,
                use: [{
                    loader: "babel-loader",
                    options: { presets: ["react","es2015"] }
                }],
            },
            {   //这里的内容是新增加的对样式的支持
                test: /\.css$/,
                use: ["style-loader", "css-loader"],
            },
        ]
    }
}

测试样式代码是否添加成功：

1）在src目录下新建css目录并且创建样式文件，index.css

body{
      background-color: green
}

2) 在src下index.js 文件中添加一行代码引用css

import ‘./css/index.css‘

关注微信更多学习资料分享！

技术分享

react最佳入门实践(1)

标签：script 结果 asc uil clu curl 创建项目关注运行

原文地址：http://www.cnblogs.com/dadifeihong/p/6964908.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行

react最佳入门实践(1)

1.环境搭建

1.1.安装node(mac版)

注意：window平台安装node很简单，只需要一直点击 下一步 安装即可

1.2.创建项目结构

1.3. 安装webpack

1.4.配置webpack

1.5.让npm 可以运行 webpack

1.6.使用打包好的js文件

1.7.测试打包是否成功

1.8.使用babel来编译ES6

1.9.添加web服务器支持

1.10.添加react支持

测试是否react是否配置正确

1.11 添加样式支持

关注微信更多学习资料分享！

注意：window平台安装node很简单，只需要一直点击下一步安装即可