React基础知识扫盲

React开发环境搭建

在搭建React开发环境前，需要安装Node

Node.js安装

使用React.js可以使用最原始的

这实在太low，工作中也不会有这种引入形式

因此采用脚手架形式的安装，需要Node.js，用里面的npm来进行安装

Node中文网址：http://nodejs.cn/

node -v

npm -v

脚手架安装

Node安装好后，使用npm命令安装脚手架工具

npm install -g create-react-app

create-react-app是React官方出的脚手架工具

创建第一个React项目

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

项目目录介绍

用脚手架生成目录后，需要对目录有个基本认识

最起码指导都是做什么用的，否则如何编写程序？

项目根目录中的文件

• README.md 主要是对项目的说明
• package.json 是webpack配置和项目包管理文件
  • 项目中依赖的第三方包和一些常用命令配置都在这里边
• package-lock.json 是锁定安装时的版本号，并且需要上传到git，以保证其他人 npm instal时依赖能保证一致
• gitignore 这是git的选择性上传的配置文件
  • 比如node_modules文件夹，就需要配置不上传
• node_modules 这个文件夹就是项目的依赖包
• public 公共文件，里面有公用模板和图标
• src 主要代码编写文件，这里就是最重要的地方

public文件夹介绍

项目中的公共文件，就是共用的

• favicon.ico 这是网站/项目的图标，在浏览器标签页的左上角显示
• index.html 首页的模板文件，稍微改动下，可以看到效果
• mainifest.json 移动端配置文件

src文件夹介绍

这里就是源代码，平时操作最多的目录

• index.js 项目的入口文件
• index.css
• app.js 相当于一个方法模块，一个简单的模块化编程
• serviceWorker.js 这是用于写移动端开发的，PWA必须用到，有了它就相当于有了离线浏览的功能

HelloWorld与组件化

先把src目录里的全部删除，编写一个HelloWorld程序，通过这个程序来了解React中的组件化编程

写一个项目一般从入口文件进行编写，在src目录下，新建一个index.js

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

• 首先引入React两个必要的文件
• 然后引入一个APP组件，当前还没有，待会建立
• 最后用React的语法把APP模块渲染到rootID上
• rootID在public\index.html文件中

入口文件写好了，接下来写APP组件

import React, {Component} from 'react'

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

import React,{Component} from 'react'

这是ES6的语法-解构赋值，等价于

import React from 'react'
const Component = React.Component

两个文件编写完成后，使用npm start命令运行

React的主要优势之一就是组件化编写，这是现代前端开发的一种基本形式

JSX语法简介

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App' //App这是一个组件

// JSX javascript and xml 方便使用HTML、H5代码创建虚拟DOM
// 虚拟DOM不是真实的DOM节点，是虚拟化的，可以快速反应，不占用页面的渲染机制，快速反应动作
// 当JSX遇到< ,会把语法当做HTML解析；遇到{ ,会把语法当做JavaScript解析
ReactDOM.render(<App />,document.getElementById('root'))
                        // 把组件挂载的地方

// App.js
import React,{Component} from 'react'
// 结构化赋值，相当于下面语句
// import React from 'react'
// const Component = React.Component

// App这个类继承于Component
class App extends Component{
// React中 大写字母开头的JSX是自定义组件 ，小写字母开头的就是HTML的标签
	render(){
		// JSX简单理解，就是在React的JAvaScript中写HTML代码
		return(
		// 无序列表
			<ul className="my-list">
				<li>{false?'Leonzhao.com':'赵沐阳'}</li>
				<li>I Love React</li>
			</ul>
		);
		
		// 传统JS写法
		/* 
		var child1 = React.createElement('li',null,'JSPang.com')
		var child2 = React.createElement('li',null,'I Love React')
		var root = React.createElement('ul',{className:'my-list'},child1,child2) 
		*/
	}
}

// 将APP这个类暴露出去
export default App;