react学习

1. 环境搭建

1.1 安装node环境

node.js是基于Chrome V8引擎的JavaScript运行环境，安装node.js主要为了使用webpack以及npm，
下载地址：node官网下载地址

安装成功之后，打开cmd窗口查看是否安装成功：

node -v

返回node版本号即证明安装成功

【说明 】

node的安装无论对于vue还是react都是基础环境搭建的必备工具，所有的依赖安装使用的npm就是node的绑定产物，使用npm过程中由于使用的是国外站点故而下载可能会比较慢，影响网速的话建议使用淘宝镜像，yarn或者cnpm。

2. 安装create-react-app

2.1 介绍

create-react-app是一款构建React单页面应用的脚手架工具，类似于vue中的vue-cli，同样也是集成了webpack，基本可以实现零配置就可以快速开发的react应用

2.2 安装

打开cmg窗口或者git brash

# 全局安装
npm install -g create-react-app
# 创建文件
mkdir ReactDemo
cd ReactDemo
# 构建项目
create-react-app demo01

# 启动编译当前的React项目，并自动打开 http://localhost:3000/
npm start

【说明 】

至此，一个最简易的react的demo就构建成功，构建过程中如果出现报错，切换一下网速好点网络再试一下就可以，构建时间比较久，

3. 文件结构解析

3.1 结构目录

├── package.json
├── public                  # 这个是webpack的配置的静态目录
│   ├── favicon.ico
│   ├── index.html          # 默认是单页面应用，这个是最终的html的基础模板
│   └── manifest.json
├── src
│   ├── App.css             # App根组件的css
│   ├── App.js              # App组件代码
│   ├── App.test.js
│   ├── index.css           # 启动文件样式
│   ├── index.js            # 启动的文件（开始执行的入口）！！！！
│   ├── logo.svg
│   └── serviceWorker.js
└── yarn.lock

• README.md :这个文件主要作用就是对项目的说明，已经默认写好了一些东西，你可以简单看看。如果是工作中，你可以把文件中的内容删除，自己来写这个文件，编写这个文件可以使用Markdown的语法来编写。

• package.json : 这个文件是webpack配置和项目包管理文件，项目中依赖的第三方包（包的版本）和一些常用命令配置都在这个里边进行配置，当然脚手架已经为我们配置了一些了，目前位置，我们不需要改动。如果你对webpack了解，对这个一定也很熟悉。

• package-lock.json ：这个文件用一句话来解释，就是锁定安装时的版本号，并且需要上传到git，以保证其他人再npm install 时大家的依赖能保证一致。

• gitignore : 这个是git的选择性上传的配置文件，比如一会要介绍的node_modules文件夹，就需要配置不上传。

• node_modules :这个文件夹就是我们项目的依赖包，到目前位置，脚手架已经都给我们下载好了，你不需要单独安装什么。

• public：公共文件，里边有公用模板和图标等一些东西。

• src ： 主要代码编写文件，这个文件夹里的文件对我们来说最重要，都需要我们掌握。

• public 文件夹介绍
  这个文件都是一些项目使用的公共文件，也就是说都是共用的，我们就具体看一下有那些文件吧。

• favicon.ico : 这个是网站或者说项目的图标，一般在浏览器标签页的左上角显示。

• index.html : 首页的模板文件，我们可以试着改动一下，就能看到结果。

• mainifest.json：移动端配置文件，这个会在以后的课程中详细讲解。

• src 文件夹介绍
  这个目录里边放的是我们开放的源代码，我们平时操作做最多的目录。

• index.js : 这个就是项目的入口文件，视频中我们会简单的看一下这个文件。

• index.css ：这个是index.js里的CSS文件。

• app.js : 这个文件相当于一个方法模块，也是一个简单的模块化编程。

• serviceWorker.js: 这个是用于写移动端开发的，PWA必须用到这个文件，有了这个文件，就相当于有了离线浏览的功能。

4. Hello World

4.1 基本编码

首先先删除src下面的所有文件，在自己重新编写一个helloWorld界面，

4.1.1 入口文件编写

新建一个index.js文件作为组件的入口文件，主要内容：

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
ReactDOM.render(<App />,document.getElementById('root'))

利用react语法将app模块渲染到root这个DOM节点上面去，其中id为root的节点在index.html中

4.1.2 组件编写

编写一个简单的helloWorld组件：
App.js文件

import React, {Component} from 'react'

class App extends Component{
    render(){
        return (
            <div>
                Hello World
            </div>
        )
    }
}
export default App;