React16学习笔记（一）-------进入React的世界

第一章进入React的世界

React是什么：声明式写法、组件化、一次学习，随处编写
为什么使用React:大厂加持 - Facebook，最流行，简单易懂

一、配置开发环境

官方脚手架工具(命令行工具) create-react-app
cmd启动->node -v（版本大于6）->npm install create-react-app -g(gloable全局安装)

1. 创建项目：create-react-app my-project（项目名）
   

2. 遇到的问题：node版本过低，升级node版本到10以上

3. 升级node版本(linux版本)：

   1. 使用npm全局安装一个管理node版本的管理模板n
   2. 安装命令：npm i -g n（npm i -g n --force）
   3. 升级node版本块：n 版本号 如 n 10.0.0
   4. 安装最新的版本：n latest
   5. 安装最近的稳定版本：n stable（n --stable）

   windows版本：

   1. node历史版本：https://nodejs.org/en/download/releases/（win7系统下载12.0版本）

   2. 查看当前node安装位置
      node -v 查看当前node版本
      where node 查看当前node安装位置
      

   3. 将下载下来的node安装到相同路径即可。
      
      问题二：create-react-app 创建项目很慢和创建时出错

      1. 修改npm安装资源的源
         npm config set registry https://registry.npm.taobao.org
      2. 测试有没有修改成功，如果返回的跟上面设置的一样则说明修改成 功了
         npm config get registry

4. 进入刚才创建的代码：cd my-first-react

5. 查看package.json文件：cat pakcage.json
   发现已内置npm命令（npm start, npm build, npm test, npm eject）

6. npm start
   terminal自动化启动并在chrome中打开localhost:3000
   

二、第一个组件

1. 用编辑器（vscode）打开项目
   目录结构：
   #Readme.md：项目文档
   #package.json：项目依赖、命令
   #public：公共文件
   index.html：主页 root节点是程序的主入口
   #src文件
   app文件与样式文件
2. src目录下创建welcom.js
3. 引入依赖（使用ES6语法）

import React from "react"

// 创建类继承react.Component类
class Welcome extends React.Component{
    //组件最终显现出来的结果
    render(){
        return <h1>Hello React</h1>
    }
}

//导出整个类
export default Welcome

4. 将组件挂在到dom节点,打开主入口文件index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

//引入welcom组件
import Welcome from './welcome';

ReactDOM.render(
    <Welcome />,
  document.getElementById('root')
);

5. 显示结果