第一:搭建环境
安装node.js
在开始前,请确保你的电脑安装了node,不知道装没装,就命令行工具node -v 一下,有版本号是成功安装的
安装官方脚手架create-react-app
-
这里介绍两种方式,习惯用哪个你自己选
第一种npm install -g create-react-app
create-react-app myapp
第二种
npx create-react-app myapp
第二:目录结构介绍
public文件夹详解
初始化项目后,里边有三个小东西
favicon.ico : 网站图标,看,就是这玩意
src文件夹详解
-
这个目录里边放的是源代码,也是核心文件夹
index.js : 项目的入口文件,根组件挂载根元素
第三:类组件和函数组件的编写
简单的函数组件
你也许会感到意外,这就是函数组件了?没错,就是这样。
function Header(){
return <h1>我是头部</h1>;
}
function App() {
return (
<Header/>
);
}
这样就行了
简单的类组件
真正有关键字定义类是es6开始的,用class。下面用类组件改写上述App函数组件,实现相同的效果,输出hello world
import React, {Component} from 'react'
class App extends Component{
render(){
return (
<div>
hello world
</div>
)
}
}
export default App;
也许你不太理解上边的import React, {Component} from ‘react’,那个大花括号,是es6的语法,解构赋值,推荐参考下阮一峰大神的es6入门
- 代码中不会再写var,用let或const代替,详情参见let
- 要是不理解,也可以拆分来写
import React from ‘react’
const Component = React.Component
import React from 'react';
const Component = React.Component;
class App extends Component {
render() {
return (
<div>
hello world
</div>
);
}
}
export default App;
图片资源,样式表引用问题
在react中,图片引入是有讲究的,分为本地图片引入和网络图片引用
网络图片引用和以前一样,img标签src属性写图片链接地址就行
本地图片这样不行,需要以路径形式导入,也要有alt属性
你是否注意到,你在js文件居然引入了css文件!!!
这都是脚手架中webpack帮我们做的
如果你还不清楚webpack,请参考 https://www.webpackjs.com/
第四:jsx语法
jsx简介
jsx是Javascript和XML结合的一种语法糖,它可以让我们更快的编写代码,属于html+js混写。这种语法最先在react中使用,后来vue中也可以,但不常见。jsx语法用熟悉了自然是快的,但对初学者而言,并不是很容易理解。
jsx的优势
详情参见 在 React 中使用 JSX 的好处 - clearYang - 博客园
- 这里简单举个例子
jsx遇到<,就当作HTML解析,遇到{就当JavaScript解析.
比如我们写一段JSX语法
<h1>{1+2}</h1>
- 可以看到,除了h1的语义,js表达式也被识别了
jsx踩坑
- jsx中不允许用class属性,需用className代替
- 组件名必须大写
- 事件必须修正this指针,且绑定事件名时要使用小驼峰的写法onclick必须写成onClick
constructor(props){
super(props)
this.fun = this.fun.bind(this)
}
onClick = {() => ()} //绑定的事件名小驼峰写法
onClick = {this.fun.bind(this)}
如果写行内样式用双花括号{{}} <p style={{color:"red"}}>hello</p>
jsx中不允许label标签使用for属性,需用htmlFor代替
jsx中所有的标签都必须闭合,<br>不行,必须<br/>
jsx中注释比较讲究,{/*JSX 中的注释方式*/},单行也可以
第五:传统实例-todoList
新建TodoList
- 将src下的App.js删除,新建TodoList.js,然后将index.js要导入的文件和挂载的组件一并修改
import React from 'react';
import ReactDOM from 'react-dom';
import TodoList from './TodoList';//注意点1
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<TodoList />, document.getElementById('root'));//注意点2
serviceWorker.unregister();
完善TodoList.js
import React,{Fragment} from 'react'
const Component = React.Component
class TodoList extends Component {
render() {
return (
<Fragment>
<div><input type="text" /> <button> 添加 </button></div>
<ul>
<li>学习react</li>
<li>学习vue</li>
</ul>
</Fragment>
);
}
}
export default TodoList;
- 样式不是重点,最后会美化一下,先凑合着看
- 注意最外层包裹元素的事