怎么使用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 即可