在项目中怎么使用react
怎么使用react
- 在网页中引入react
- npm下载后在项目中引入react
在网页中引入react
addReact.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/react.min.js"></script>
<script src="../js/react-dom.min.js"></script>
<script src="../js/babel.js"></script>
</head>
<body>
<div id="example"></div>
</body>
<script type="text/babel" >
ReactDOM.render(
<h1>hello,react</h1>,
document.getElementById('example')
);
</script>
</html>
上面代码中需要连个地方注意,第一,在最后一个<script>
标签中type="text/babel"
,这是因为在react中用到了jsx语法,跟JavaScript不兼容。凡是使用
jsx的地方,都要加上type='text/babel'
。其次上面用到了三个库react.min.js
,react-dom.js
,babel.js
,他们必须首先加载。其中,react.js
是
react的核心库,react-dom.js
提供相关dom的功能,babel.js
是将jsx转换成JavaScript语法。
ReactDOM
如果使用一个<script>
标签引入React,所有的顶层API都能在全局ReactDOM上调用。react-dom.js提供了可在用用底层使用的DOM方法,如果有需要,你可以把这些
方法用于React模型以外的地方。不错一般情况下,大部分组件都不需要使用这个模块。
render()
hydrate()
unmountCComponentAtNode()
findDOMNode()
createPortal()
这里主要讲述render()
方法
render()
React.render(element,container[,callback])
在提供container
里渲染一个React元素,并返回对该组件的引用(或者针对无状态组件返回null
)。
在上述demo中,返回的引用就是
<h1>hello,react</h1>
如果React元素之前已经在container里渲染过,这会对其执行更新操作,并仅会在必要时改变DOM以映射最新的React元素
注意:
React.render()
会控制你传入容器节点里的内容。档首次调用时,容器节点里的所有DOM元素都会被替换,后续的调用则会使用React的DOM差分算法(DOM diffing algorithm)
进行高效的更新
ReactDOM.render()
不会修改容器节点(只会修改容器的子节点)。可以在不覆盖现有子节点情况下,将组件插入已有的DOM节点中。
ReactDOM.render()
目前会返回对根组件ReactComponent
实例的引用,但是,目前应该避免使用返回的引用,因为他是历史遗留下来的问题,而且在未来的版本的React中
,组件渲染在某些情况写可能会是异步的。如果你真的需要活得对根组件ReactCompont
实例的引用,那么推荐为根元素添加callback ref
使用ReactDOM.render()
对服务端渲染容器进行hydrate操作的方式已经被废弃,并且会在React17被移除。作为替代,请使用hydrate()
如果提供了可选的回调函数,该回调将在组件被渲染或更新之后被执行
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/react.min.js"></script>
<script src="../js/react-dom.min.js"></script>
<script src="../js/babel.js"></script>
</head>
<body>
<div id="example"></div>
</body>
<script type="text/babel" >
ReactDOM.render(
<h1>hello,react</h1>,
document.getElementById('example')
)
setTimeout(()=>{
ReactDOM.render(
<div>add timer</div>,
document.getElementById('example')
)
},2000)
</script>
</html>
通过npm 引入到项目
- 使用React官提供的脚手架用于初始化React项目,使用create-react-app
- 从头开始创建一个React应用
使用React官方提供的脚手架create-react-app
执行
#安装create-react-app并创建my-app
npm install -g create-react-app
create-react-app my-app
#或者
#npm版本在5.2.0+可以使用npx命令,
npx create-react-app my-app
#进入项目目录,启动项目
cd my-app
npm start
从头开始创建一个React应用
- 新建一个文件并命名叫demo
- 在demo文件夹下执行cmd
- 执行npm init -y (快速建立packge.json)
- 执行npm install --save react react-dom
- 在demo文件夹下新建文件夹并命名为src
- 在src下新建文件并命名index.js
index.js内容如下
import React from "react"
import ReactDOM from "react-dom"
const Index = () => {
return <div>Hello React!</div>
}
ReactDOM.render(<Index />,document.getElementById('index'));
- 在demo文件夹新新建文件并命名为index.html
index.html内容如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
</head>
<body>
<div id="index"></div>
</body>
</html>
注意:如果就直接把index.js引入index.html中,会报错,Uncaught SyntaxError: Cannot use import statement outside a module
所以我们还需要webpack对一些语法的转换(es6转换成es5,jsx转换成js)
- npm install --save-dev webpack webpack-dev-server webpack-cli webpack-merge html-webpack-plugin clean-webpack-plugin babel-loader @babel/preset-react @babel/preset-env @babel/core
- 在demo文件夹下新建文件webpack.base.conf.js webpack.dev.conf.js webpack.prod.conf.js
webpack.base.conf.js内容如下
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const {CleanWebpackPlugin} = require("clean-webpack-plugin");
module.exports = {
entry:"./src/index.js",
output:{
filename:"bundle.js",
path:path.resolve(__dirname,"dist")
},
module:{
rules:[
{
test:/\.(js|jsx)$/,
exclude:/node_modules/,
loader:"babel-loader"
}
]
},
plugins:[
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
title:"react",
template:"./index.html"
})
]
}
webpack.dev.conf.js内容如下
const webpack = require("webpack");
const merge = require("webpack-merge");
const path = require("path");
const common = require("./webpack.base.conf.js");
module.exports = merge(common,{
mode:"development",
devtool:"inline-source-map",
plugins:[
new webpack.HotModuleReplacementPlugin(),
],
devServer:{
contentBase:path.join(__dirname,"dist"),
port:9000,
host:"localhost"
}
})
webpack.prod.conf.js内容如下
const webpack = require("webpack");
const merge = require("webpack-merge");
const common = require("./webpack.base.conf.js");
module.exports = merge(common,{
mode:"production",
devtool: 'source-map'
})
- 执行npm run dev 即可