react最佳入门实践（1）

最新推荐文章于 2022-05-17 21:54:38 发布

大地飞鸿

最新推荐文章于 2022-05-17 21:54:38 发布

阅读量553

点赞数 1

分类专栏： javascript react

本文链接：https://blog.csdn.net/keledon/article/details/72935094

版权

javascript 同时被 2 个专栏收录

51 篇文章 0 订阅

订阅专栏

react

1 篇文章 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'

大地飞鸿

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
react最佳入门实践（1）

1.环境搭建React 是 Facebook 推出的一个用来构建用户界面的 JavaScript 库1.1.安装node(mac版) 安装homebrew/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
复制链接

扫一扫