React学习笔记 - Hello World

最新推荐文章于 2023-05-06 17:50:26 发布

我爱丁丁猫

最新推荐文章于 2023-05-06 17:50:26 发布

阅读量98

点赞数

分类专栏：前端文章标签： react javascript

原文链接：https://www.mk2048.com/blog/blog.php?id=hi1i2khcj2ab&title=React%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0+-+Hello+World

版权

前端专栏收录该内容

1898 篇文章 4 订阅

订阅专栏

React Learn Note 1

React学习笔记（一）

标签（空格分隔）： React JavaScript

前、Hello World

1. 创建单页面应用

使用Create React App。

npm install -g create-react-app
create-react-app my-app

cd my-app
npm start

准备好部署到生产环境中时，运行

npm run build

将会在build文件夹中创建一个优化好的应用。

2. 添加到现有应用

首先需要安装包：

npm init
npm install --save react react-dom

开发环境使用

react.development.js``react-dom.development.js

。
生产环境使用

react.production.min.js``react-dom.production.min.js

。

如果使用像webpack或Browserify这样的构建工具：

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
    <h1>Hello, world</h1>,
    document.getElementById('root')
);

如果通过引用文件使用

注意

script

标签type是

text/babel

，而且需要引用 babel-standalone：

<!DOCTYPE html>
<html>
<head>
    <title>react demo</title>
    <script type="text/javascript" src="./node_modules/babel-standalone/babel.js"></script>
    <script type="text/javascript" src="./node_modules/react/umd/react.development.js"></script>
    <script type="text/javascript" src="./node_modules/react-dom/umd/react-dom.development.js"></script>
</head>
<body>
    <div id="root"></div>
    
    <script type="text/babel">
        ReactDOM.render(
            <h1>Hello, world!</h1>,
            document.getElementById('root')
        );
    </script>
</body>
</html>

The end... Last updated by: Jehorn, Jan 03, 2018, 4:51 PM

更多专业前端知识，请上【猿2048】www.mk2048.com