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;