暑期React学习总结

React简介

React是一个用于构建用户界面的JavaScript库。
React主要用于构建UI，很多人认为React是MVC中的V（视图）。
React起源于Facebook内部的项目，用来架设Instagram网站。
React拥有较高的性能，代码逻辑简单，因此越来越多的人开始关注并使用它。

React特点

1.声明式设计 −React采用声明范式，可以轻松描述应用。
2.高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互。
3.灵活 −React可以与已知的库或框架很好地配合。
4.JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。
5.组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。
6.单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。

学习React我们需要以下 的知识：HTML CSS JavaScript

首先是React的开发环境的搭建

在这里由于是初学者，所以我在这里使用的是官方的方法：
Create React App 是开始构建新的React单页面的最佳途径。它可以帮我们配置开发环境，以便我们可以使用最新的 JavaScript 特性，还能提供很棒的开发体验，并为生产环境优化我们的应用。
在开始之前我们首先要安装nodejs，这是一个管理
首先我先进入Windows命令行： （Win + R）键并输入cmd

image.png

输入 npm install -g create-react-app
等待安装好之后我们输入下一步的命令：
create-react-app my-app。 my-react是我们项目的名字，名字我们可以随便起，但是避免使用中文。
接着我们进入我们已经创建好的项目： cd my-react
然后运行我们已经搭建好的项目： npm start

image.png

安装好之后我们看到的就是上面这个样子。
最后我们进入我们刚刚创建好的项目： cd my-react接着最后面就是 npm start
然后我们在浏览器就会看到这个界面：

image.png

这就表示我们已经成功创建了一个最最基础简单的create-react-app项目。

进到刚刚我们创建好的项目文件目录下：

image.png

node_moudules

是项目依赖包存放位置。当我们运行npm install安装package.json中的依赖包是，该文件夹会自动创建，所有的依赖包会安装到该文件夹中。

public

主要的作用是html入口文件的存放。当然我们也可以存放其他公用的静态资源，如图片，css等。其中的index.html文件就是我们的项目入口html文件。

src

组件的存放目录。在create-react-app 创建的项目中，每一个单独的文件都可以被看成一个单独的模块，单独的image，单独的css，单独的js等，而所有的组件都存在src目录中，其中index.js是js的入口文件。

下面介绍如何引入antd-design组件库：

安装和初始化

我们需要在命令行中安装 create-react-app 工具，你可能还需要安装 yarn。
$ npm install -g create-react-app yarn
我们其实可以不适用yarn的，但是官方向我们推荐了yarn,所以我们还是按照官方的方法去做。
接下来我们新建一个项目。
$ create-react-app demo
工具会自动初始化一个脚手架并安装 React 项目的各种必要依赖，如果在过程中出现网络问题，请尝试配置代理或使用其他 npm registry。

然后我们进入项目并启动。

$ cd demo
$ yarn start

此时浏览器会访问 http://localhost:3000/ ，看到Welcome to React
的界面就算成功了。就是刚刚我们成功创建项目并启动之后的界面，接下来我们要做的就是引入antd组件库。

引入antd

现在从yarn或npm安装并引入antd。
$ yarn add antd
修改 src/App.js，引入 antd 的按钮组件。

import React, { Component } from 'react';
import Button from 'antd/lib/button';
import './App.css';

class App extends Component {
  render() {
    return (
      

        Button
      
    );
  }
}

export default App;

修改 src/App.css，在文件顶部引入antd/dist/antd.css。

@import '~antd/dist/antd.css';

.App {
  text-align: center;
}

...

接下来我们要做的就是启动我们的项目：

$ cd demo
$ yarn start

等待浏览器成功打开并显示如下画面之后就表示我们成功地引入了antd组件库。

image.png

个人总结

从零开始学习一项新技术真的需要花时间，在这方面我很庆幸自己比其他同学多一个月的时间去触摸这张前途无限的技术。但是在这一个月来我也发觉自己还不是一个合格的程序员，在许多方面做得不是很好，但是知道自己不足才可以去努力变得更好的自己。这一个月以来，我懂得了并不是所有遇到的问题都得向初中高中那样追着老师的屁股问个明白，因为到了日后我们出去工作遇到你得学会去想方法解决，你不可能去问老板自己该如何解决，其他的同事也得忙手头的工作。一个月的学习庆幸的是自己去尝试了一项新的技术，遗憾的是我急功近利想着在一个月之内完成任务，因此我在基础上学得很差。后来自己也想了想，学习确实不能急，就好比打球基本功没练好，在比赛时想着去做那些平常根本熟练的动作，结果可想而知，就是被那些真正厉害的人教做人。学习也是如此，平时不练功，用时等着哭吧。希望自己在接下来的学习中能够稳扎稳打，让自己变得越来越好。

图片发自App