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)"
通过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'
关注微信更多学习资料分享！
