react用脚手架创建一个react单页面项目，react起手式

  • Z时代
  • 2024-01-10
  • 分类：综合

react

官网地址：https://react.docschina.org/

 确保本地安装了Node.js

node的版本大于8.10    npm的版本大于5.6

1、在本地的某个位置创建一个文件夹，执行以下代码：

npx create-react-app my-app（项目名称 可以自定义）

 等待......

创建好项目后，跳转到项目跟目录：

cd my-app

然后运行项目：

npm start

 弹出这个页面代表项目已经创建好了！

如何在html页面中写React代码？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>react</title>
    <!-- 引入react核心库 -->
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <!-- 引入dom库 -->
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <!-- 引入babel将es6转换为es5语法 -->
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
    <!-- 写一个dom容器 -->
    <div id="app"></div>
    <!-- script标签记得加上 type="text/babel"   不然无法识别jsx语法 -->
    <script type="text/babel">
        //我们的react
        ReactDOM.render(
            <h1>Hello, world!</h1>,
            document.getElementById('app')
        );
    </script>
</body>
</html>

以上就是最简单的react例子！！

下面添点油加点醋，让我这种react小白更能明白react怎么用：

在原来的基础上加点击事件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>react</title>
    <!-- 引入react核心库 -->
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <!-- 引入dom库 -->
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <!-- 引入babel将es6转换为es5语法 -->
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
    <!-- 写一个dom容器 -->
    <div id="app"></div>
    <!-- script标签记得加上 type="text/babel"   不然无法识别jsx语法 -->
    <script type="text/babel">
        //这里定义一个MessageBox的组件，添加个点击事件。
        // render return的内容就是我们想自己想怎么改就怎么改的东东，
        // ReactDom.render就把这个组件MessageBox渲染到id为app的div中啦。、
        class MessageBox extends React.Component{
            onClick=()=>{
                alert("click");
            }//注意这里不用加,逗号
            render=()=>{
                return (<div><h1 onClick={this.onClick}>Hello World!</h1></div>)
            }
        }
        // 渲染MessageBox组件
        ReactDOM.render(
               <MessageBox/>,
               document.getElementById("app")
        )
    </script>
</body>
</html>

要注意的是，这里使用了ES6的写法，为什么呢，因为React已经摒弃了ES5的写法，全力拥抱了ES6。比如：我们创建一个叫Message的组件：

 ES5: 

var Message = React.createClass({
    render: return (<h1>hello</h1>)
})

ES6:

class MessageBox extends React.Component{ 
    render = ()=> <h1>hello</h1>
}

这种ES5的写法未来可能会不受支持啦，多学学新东西有好处，什么箭头函数啊、let、const等等，这里render的return都可以省了。

我们已经定义好了一个组件，而且ReactDom.render只能渲染一个组件，那么多个组件怎么用呢，我们需要把其他组件放到前面的那个组件中去。这里创建了一个组件TimeNow来显示时间，具体内容可以不用管，在MessageBox中的render中，把组件TimeNow放进去就OK。（<div><h1 onClick={this.onClick}>Hello World!</h1><TimeNow /></div>）。

注：

 1、render的return只能返回闭合的一个节点，如<div></div>，不能返回<div></div><div></div>这种结构。所以这里在原来的组件中加了一层包裹的div。

2、我们将两个组件定义在了一个地方，但我们一般的操作流程会将不同组件放在不同的文件中，尤其是大的项目，这种最简模式就存在局限，React 文档上也有注明：Note that some browsers (Chrome, e.g.) will fail to load the file unless it's served via HTTP. 所以在最简模式上直接引入组件文件是行不通的，而是需要服务器环境。解决方法是开一个本地服务器（比如 Apache），这就有点麻烦了，不如使用create-react-app脚手架创建一个项目。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>react</title>
    <!-- 引入react核心库 -->
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <!-- 引入dom库 -->
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <!-- 引入babel将es6转换为es5语法 -->
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
    <div id="app"></div>
    <script type="text/babel">
        class TimeNow extends React.Component{
            constructor(){
                super();
                this.state={
                    time:""
                }
            }
            componentDidMount=()=>{
                setInterval(()=>{
                    var time=new Date().toLocaleString();
                    this.setState({
                        time
                    })
                },1000)
            }
            render=()=>{
                const {time} = this.state;
                return <div>时间：{time}</div>
            }
        }
        class MessageBox extends React.Component{
            onClick=()=>{
                alert("click");
            }
            render=()=>{
                return (<div><h1 onClick={this.onClick}>Hello World!</h1><TimeNow/></div>)
            }
        }
        ReactDOM.render(
            <MessageBox/>,
            document.getElementById("app")
        )
    </script>
</body>
</html>

效果：

以上是 react用脚手架创建一个react单页面项目，react起手式 的全部内容， 来源链接： utcz.com/z/383975.html

回到顶部