React 的 Hello World

程序员文章站 2024-03-07 22:25:10

...

React 简介

React 起源于 Facebook 的内部项目，在回调 instagram 网站时做出来的，在 2013年5月开源

1 React 项目创建

创建项目目录 demo1 ,然后使用 idea 打开这个项目目录，然后打开 idea 的 termial 命令行工具

1.1 初始化项目

npm init

React 的 Hello World

1.2 安装 browser-sync

Browsersync能让浏览器实时、快速响应您的文件更改（html、js、css、sass、less等）并自动刷新页面

browsersync使用说明文档

npm install --save browser-sync

React 的 Hello World
1.3 编写启动项目命令

在 package.json 文件中

{
  "name": "demo1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "browser-sync start --server --files *.*"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "browser-sync": "^2.26.7"
  }
}

1.4 启动项目

npm run dev

2 使用 React

2.1 创建 index.html 文件并引入 React 相关的依赖

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>启动页面</title>
  
  <!--React相关的依赖-->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script>
  <script src="https://cdn.bootcss.com/react/16.2.0/umd/react.development.js"></script>
  <script src="https://cdn.bootcss.com/react-dom/16.2.0/umd/react-dom.development.js"></script>
  <script src="https://cdn.bootcss.com/babel-standalone/7.0.0-beta.3/babel.js"></script>

  <!--自定义的jsx-->
  <script type="text/jsx;harmony=true" src="app.jsx"></script>
</head>
<body>
 <!--配制dom一个标签-->
 <div id="content"></div>
</body>
</html>

2.2 创建 app.jsx 文件

关于 React JSX 可查看这里
React 使用 JSX 来替代常规的 JavaScript

//React 的组件可以定义为 class 或函数的形式。
// 定义 class 组件，需要继承 React.Component
class HelloWorld extends React.Component {
  //在 React.Component 的子类中有个必须定义的 render() 函数
  //render() 方法是 class 组件中唯一必须实现的方法
  //在这里通过 render() 函数来创建 React 组件的元素
  render() {
    return (
        <div>
          react hello world !!!
        </div>
    );
  }

}


//ReactDOM.render(...) 是渲染方法，所有的 js,html 都可通过它进行渲染绘制
//参数一 可以是一个 React 部件，也可以是一段HTML或TEXT文本，在这里使用的是 React 部件
//参数二 是DOM中HTML的节点对象
ReactDOM.render(
    <HelloWorld/>,
    //这里的 content 就是刚刚我们定义的div 的 id
    document.getElementById('content')
);

等效于


const element = <h1>Hello, world!</h1>;

//ReactDOM.render(...) 是渲染方法，所有的 js,html 都可通过它进行渲染绘制
//参数一 可以是一个 React 部件，也可以是一段HTML或TEXT文本，比如这里使用的就是一段HTML
//参数二 是DOM中HTML的节点对象
ReactDOM.render(
    element,
    //这里的 content 就是刚刚我们定义的div 的 id
    document.getElementById('content')
);