React Quick Start - 1. 安装

发表于

主要翻译的是React的官方文档Quick Start部分

安装

安装React

官方推荐使用Yarn或者npm来管理前端依赖。

如果使用Yarn，可以这样安装：

1
yarn add react react-dom

如果使用npm，可以这样安装：

1
npm install --save react react-dom

使用ES6和JSX

官方推荐使用Babel转义器来编译React代码，这样可以在React中使用ES6和JSX的语法。
ES6是最新一代的Javascript，它拥有诸多全新的特性与语法，能够使开发更加便捷轻松。
JSX是Javascript语言的一种扩展，可以与React友好地进行协作。

在使用babel之前确保已经安装了babel-preset-react和babel-preset-es2015，并且在.bablerc中做好了配置。

Hello World

官方推荐使用webpack或者Browserify等打包器来管理代码，一来可以让代码模块化，二来可以打包加载以减少加载时间。

下边是最小的一个React应用Hello World：

1
2
3
4
5
6
7
import React from 'react';
import ReactDOM from 'react-dom';

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

这段代码构造了一个包含Hello, world!字样的h1Dom元素,并且将这个元素渲染进了页面上一个id为root的元素里。