React入门（一）

前言：

其实我不懂框架，只会简单的HTML,CSS,JS.在入门之前，连ES5,ES6,Webpack都没听过，更不用说React了.但是公司最近缺人，赶鸭子上架，踩了很多坑，希望记录一下，同时也希望您能够少踩点坑。题外话：官网的React中文文档很详细，完全可以照着官网的教程来。

安装：

React需要Node.js,Node.js需要Python.我装的时候先装的Node.js,然后偶然间听到Node.js需要Python，我又装了Python2.7（捂脸.jpg，不应该是先安装Python再安装Node.js吗？！）.这里提供Node.js下载链接（左边那个哦）和Python2.7下载链接，同时提供Node.js安装教程和Python2.7安装教程。

快速入门：

实践

首先什么都不用想，在windows命令行按顺序敲下面的代码（创建的时候有点慢，请耐心等待，有问题请留言）：

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

在浏览器中运行下列类似界面就算成功：

image

解释命令

npm install -g create-react-app

1. npm:node包管理工具
2. -g:全局安装
   (具体指的是，如果指定是-g，那么其他react项目也可以调用，如果没有指定-g，那就是局部安装，安装在当前目录所在的地方)
3. create-react-app:脚手架，facebook官方开发,强烈建议.
   何为脚手架：个人理解，就是搭好了最基本的框架，但是内容需要自己填充.

那我们来看看这个脚手架的整体结构:

image

鄙人用的HBuilder（有打广告嫌疑），您可以按照您自己熟悉的IDE来开发。
node_modules:就是使用npm install xxx之后，会存放在该目录下。
public:存放html文件
src: 我们关心的是这个文件啦！，我们源码都是要存放在介个位置的。
package.json:定义了这个项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等元数据）
关于package.json我有话说:如果去github clone一个项目的话，模块是不会存在项目里面的，那么clone下来之后，需要在 项目根目录下输入npm install，那么这行命令会自动帮你安装package.json中的各种模块。所以我们要养成一个好习惯：每次在给项目安装新的库的时候加入 --save这个命令,完整命令如下所示：

npm install xxx --save

--save的作用就是会把当前安装的依赖记录到package.json中去.

Hello World

src文件里面东西太多，我们只留下index.js 和index.css,其余都删掉。并且把index.js里面内容删掉，在文件首行加入

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

其实这个是ES6语法，跟Python语法糖是不是很像~~~~用到什么模块就import什么模块
然后继续在文件添加下面的代码：

ReactDOM.render(
  
Hello, world!
,
  document.getElementById('root')
);

打开命令行，进入my-app目录，输入npm start,就能看到Hello world！了。

解释

ReactDOM.render()负责页面渲染，我们可以看到有两个参数，一个是

Hello, world!

，另外一个是document.getElementById('root')，大概意思就是要找到id为root的DOM元素，然后负责对DOM元素进行渲染。

后记

如有错误，麻烦请告之，谢谢。下一节我会讲一下React面向组件的思想以及实例~