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