React项目搭建

React.js是Facebook推出的全球最火的开源前端框架之一，阿里、美团、百度都将React作为前端主要技术栈。React上手简单且拥有强大的生态体系，几乎所有开发需求都有成熟的解决方案。本文概述搭建React项目的步骤，实现最简单的” Hello world”项目；

一、前期准备

• 需要安装node.js和npm

              Node.js下载地址：http://nodejs.cn/

              最新的Node已经集成了npm,打开命令行工具，运行node -v 和npm -v，出现正确的版本号，则Node安装成功

•     官网链接

            react官网：https://reactjs.org/ 

            react中文网: https://www.reactjscn.com/

二、使用npm命令全局安装脚手架工具

    npm install -g create-react-app

三、使用脚手架工具create-react-app在ReactDemo文件夹中创建第一个react项目demo01

     //创建并进入ReactDemo文件夹，命令行工具运行命令：

     create-react-app demo01

    //此时react已经创建成功，进入demo01目录，运行npm start命令，将会在默认浏览器中http://localhost:3000打开react项目的index.html页面

四、React项目目录构成（由create-react-app生成）

1. README.md :对项目的说明，使用Markdown的语法编写。默认描述了项目的运行，打包，测试等方法，可以根据项目内容自行修改。
2. package.json: webpack配置和项目包管理文件，配置了项目中依赖的第三方包和常用命令。
3. package-lock.json：锁定安装时的版本号，并且需要上传到git，以解决第三方包版本升级后的冲突，使npm install时所有人的依赖一致。
4. gitignore :git的选择性上传的配置文件，比如本项目中node_modules文件夹不会上传。
5. node_modules :项目的依赖包，通常不需要任何更改。
6. public ：公共文件，包含公用模板和图标等。
   1. favicon.ico : 网站图标，在浏览器标签页的左上角显示
   2. index.html : 项目首页的模板文件
   3. mainifest.json：移动端配置文件
7. src :项目工程目录，包含项目源代码，是操作做最多的目录。
   1. index.js : 项目的入口文件
   2. index.css ：index.js里的CSS文件
   3. app.js : 一个方法模块，是一个简单的模块化编程
   4. serviceWorker.js: 用于移动端开发，PWA必备文件（离线浏览功能）

五、编写APP组件

• 将app.js的内容替换为

      import React, {Component} from 'react'  // S6的语法-解构赋值

            class App extends Component{

                render(){

                    return (

                        <div>

                            Hello World

                        </div>

                    )

               }

            }

            export default App;

• 运行npm start 命令

至此，“Hello World”项目搭建完成。