您的位置：首页 > Web前端 > React

react最佳入门实践（1）

2017-06-08 21:23 375 查看


1.环境搭建

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

1.1.安装node(mac版)

   安装homebrew

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"[/code] 
    通过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'

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航