在项目中怎么使用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 即可