react从零开始创建使用01

一、react使用场景:

  1. 可以开发web应用
  2. 可以开发移动端原生应用(react-native)
  3. 可以开发VR虚拟现实应用(react 360)

二、react安装使用:

  1. 命令安装 
    npm install react react-dom

    安装完成后生成node_modules和package-lock.json文件

  2. 使用步骤 
    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>测试使用react1</title>
</head>

<body>
  <div id="root"></div>
  <!-- 1. 引入js -->
  <script src="./node_modules/react/umd/react.development.js"></script>
  <script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
  <script>
    // 2. 创建react元素 参数一:元素名称  参数二:元素属性  参数三:元素的子节点
    const title = React.createElement('p', null, 'Hello React')
    // const title = React.createElement('p', { title: '我是标题', id: 'p1' }, 'Hello React')
    // 添加子节点方式
    // const title = React.createElement(
    //   'p',
    //   null,
    //   'Hello React',
    //   React.createElement(
    //     'span',
    //     null,
    //     '我是span节点'
    //   )
    // )
    // 3. 渲染react元素 参数一:要渲染的react元素  参数二:挂载点
    ReactDOM.render(title, document.getElementById('root'))
  </script>
</body>

</html>

 

三、react脚手架使用:

  1. 脚手架创建初始化项目命令: 
    npx create-react-app 项目名称(my-app)

     

  2. 启动初始化项目命令： 
    npm start

     

 

四、react脚手架使用:

posted @ 2023-02-16 14:55  Evident  阅读(25)  评论(0)  编辑  收藏  举报