React学习（记录贴）

React 基础

随着越来越多的公司使用React, 这项技术也成为了每个前端人绕不过去的门槛，记录一下我的学历历程。从零开始好好学。

安装React

安装React 肯定要安装node和Npm了，这里就不多做赘述了；安装React也有各种各样的继承框架，我使用是的create-react-app来一件安装；全局安装create-react-app

go 复制代码

   `npm install -g create-react-app`

检查是否安装成功

lua 复制代码

    create-react-app --version
    // 创建成功会返回版本号

使用create-react-app创建项目

lua 复制代码

    create-react-app hackrnews

现在你可以在你的编辑器里面打开这个项目。类似下面的文件结构（或者是略有不同，根据你的 create-react-app 的版本的不同）会呈现在你面前：

java 复制代码

hackrnews
    node_modules/
    public/
    src/
    .gitignore
    package.json
    README.md
    package-lock.json

简单说一下文件夹结构：

node_modules: 存放依赖包；
public: 这个文件夹包含了所有你的项目构建出的产品文件。最终所有你写在 src/ 文件夹里面的代码都会在项目构建的时候被打包放在 public 文件夹下。；
src: 存放源代码，比如js、css、html等；我们开发的代码一般都放在这个文件夹里面；
.gitignore: 忽略文件，比如node_modules、.DS_Store等；
package.json: 项目依赖包版本信息，以及项目信息；
README.md: 项目说明文档；

下面说一下几个常用的命令：

npm start: 启动项目，并打开浏览器；
npm run build: 构建项目，生成生产环境代码；
npm test: 运行测试。

在创建项目的时候包也就是 node_modules 已经加载完毕了，如果需要自己安装包就运行如下命令

arduino 复制代码

     npm install
     // 此命令会把package.json里面所有的依赖包安装到node_modules里面

JSX简介

JSX 是 JavaScript 的扩展语法，React 使用 JSX 来描述用户界面。JSX 语法 looks 很像 HTML，但是它实际上是 JavaScript 的语法扩展。
JSX 允许你使用 JavaScript 的语法写 HTML。
JSX 允许你使用 JavaScript 的变量。
JSX 允许你使用 JavaScript 的表达式。
JSX 允许你使用 JavaScript 的条件语句。
React并不强制要求使用JSX，但是使用JSX会方便读写。比使用ReactDom.createElemen()创建元素更简单、也更易读。

js 复制代码

    import logo from './logo.svg';
    import './App.css';
    import React, { Component } from 'react';
    class App extends Component {
    render() {
        return (
            <div className="App">
                <header className="App-header">
                <img src={logo} className="App-logo" alt="logo" />
                <h1 className="App-title">Welcome to React</h1>
                </header>
                <p className="App-intro">
                To get started, edit <code>src/App.js</code> and save to reload.
                </p>
            </div>
            );
        }
    }
    export default App;

这段代码是class组件，继承自Component。当然后面还会有hooks组件也就是函数式组件。就像我们写HTML一样，只不过要使用render()方法来渲染组件。这样React就会用JavaScript方式来创建HTML元素。