概述

web端三大框架react、vue和angular，本篇教程介绍react的从入门到精通。

一、环境搭建

1、npm搭建项目

如果您之前未曾使用过 create-react-app，请先通过如下命令全局安装（假定您本机已经安装了 Node.js）：

npm install -g create-react-app

然后，通过如下命令构建一个新的项目my-app：

npx create-react-app my-app

通过cd my-app命令进入项目文件夹，执行npm run start命令启动程序，成功运行，则实验环境准备完毕。

最终目录结构

├─ node_modules
├─ public
├─ src
├─ .gitignore
├─ package.json
├─ README.md
└─ yarn.lock

打开浏览器，输入http://localhost:3000可以看到系统默认生成的页面了。(看到如下页面标识安装成功)

2、推荐使用的项目结构

如果你对上面的一无所知的话可以访问追梦猪git下载demo实现快捷开发，省掉安装的步骤

追梦猪react项目demo实例（https://github.com/jiawenguang/React-demo.git）

可以通过git clone方式下载项目结构。

二、目录结构与各文件功能

1、目录结构

1、index.js文件为项目的总入口，CDN引入的资源可以放在此文件中。

2、package.json文件是模块功能配置，使用npm install可生成node_modules文件夹，所有模块功能所需要的资源都存储在这个文件夹中。

3、routers.js文件是路由配置文件，路由功能是三大前端框架的特色（具体用法下面会详细说）。

4、home.js文件是项目结构初始化放上去的界面。

5、components文件夹是存放组件使用。

6、assets文件夹存放静态资源

7、views文件夹存放页面视图

8、router文件夹存放路由

三、react.js的第一个dome

在Home.js中编写代码，代码如下：

import React, {Component} from 'react';
import logo from '../logo.svg';
class Home extends Component {
  render(){
    return (
      <div className="zmz-react">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            我的第一个demo从react初始化开发
          </p>
          <a
            className="App-link"
            href="https://reactjs.org&quot;
            target="_blank"
            rel="noopener noreferrer"
          >
            准备起步
          </a>
        </header>
      </div>
    );
  }
}

export default Home;

效果如下：