后端开发学React - 1 开发环境搭建及HelloWorld

后端开发学React - 1 开发环境搭建及HelloWorld

1.1 开发环境搭建

1. 安装 node.js

   1. 官网下载：下载地址
   2. 安装
   3. 验证
      1. win+r：打开控制台 输入cmd
      2. 输入命令：node -v 或者 npm -v
      3. 获取到版本号即为安装成功

2. 安装 Visual Studio Code

   1. 官网下载：下载地址
   2. 安装

1.2 第一个React程序

React.js官方网站：官方网站

1. 脚手架安装

npm install -g create-react-app 

2. 创建第一个React项目

F:           //进入f盘
mkdir ReactDemo         //创建ReactDemo文件夹
create-react-app demo01            //用脚手架创建React项目
cd demo01           //等创建完成后，进入项目目录
npm start          //预览项目，如果能正常打开，说明项目创建成功

ps：由于某原因，create-react-app demo01 在拉取各种资源时,往往会巨慢
解决方案是换源：
a. 设置npm的register为阿里：npm config set registry https://registry.npm.taobao.org
b. 验证是否成功：npm config get registry 或者 npm info express

1.3 项目目录介绍

根目录	二次菜单	作用
node_modules		项目的依赖包
public	favicon.ico	这个是网站或者说项目的图标，一般在浏览器标签页的左上角显示
	index.html	首页的模板文件
	mainifest.json	移动端配置文件
src	index.js	项目入口文件
	index.css	index.js里的css文件
	app.js	一个模块
	serviceWorker.js	用于写移动端开发的，PWA必须用到（离线浏览功能）
package.json		这个文件是webpack配置和项目包管理文件，项目中依赖的第三方包（包的版本）和一些常用命令配置都在这个里边进行配置
package-lock.json		用来锁定安装时的版本号，保证大家npm install 时依赖保持一致

1.4 index.js解析

//引入react两个必要文件
import React from 'react';
import ReactDOM from 'react-dom';
//引入app.js组件
import App from './App';

//不必要
import './index.css';
//不必要（pwa时有用）
import * as serviceWorker from './serviceWorker';

//通过 React 渲染到 id 为 root 的 div 上（在public/index.html中）
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

//不必要（pwa时有用）
serviceWorker.unregister();

1.4 app.js解析

//ES6的语法-解构赋值
import React, {Component} from 'react'
//上面那句相当于下面两句
//import React from 'react'
//const Component = React.Component


class App extends Component{
    render(){
        return (
            <div>
                Hello Razera
            </div>
        )
    }
}

//将app暴露出去
export default App;