进击的前端

学习React（一）

March 27, 2018

背景

随着了解的使用 React 大法的项目慢慢变多，渐渐产生了兴趣，想要从头好好看看 React。因此就有了这个起手式。

Hello World

# 新建目录
mkdir demo

# 初始化
yarn init -y

# 安装 react、react-dom
yarn add react react-dom

# 新建入口文件
touch index.js

# 编辑入口文件
vim index.js

# 新建 index.html
touch index.html

# 编辑 index.html
vim index.html

# 全局安装 parcel，如果已经安装可以跳过
npm i -g parcel

# 启动项目
parcel index.html

# 在浏览器中打开 http://localhost:1234 预览

index.js 文件的内容：

import React from 'react'
import ReactDom from 'react-dom'

ReactDom.render(
    <h1>Hello World</h1>,
    document.getElementById('root')
)

index.html 文件内容：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>React Demo</title>
</head>
<body>
    <div id="root"></div>
    <script src="./index.js"></script>
</body>
</html>

Written by ricosmall.
Github