react入门(留言板案例),路由...

react入门

React 是一个声明式，高效且灵活的用于构建用户界面的 JavaScript 库。使用 React 可以将一些简短、独立的代码片段组合成复杂的 UI 界面，这些代码片段被称作“组件”。

它把原生js进行了封装，公开出一些方法可以使用，react，它的本质 ，还是JavaScript

特点
1、声明式的设计，就是特别好；
2、高效，灵活；
3、jsx的语法，就是把html、css、js都按照xml的格式进行了规范；

4、组件化开发，易于复用与维护；
5、单向数据流(从父组件向子组件去传递数据)【数据驱动视图】

安装

npx create-react-app my-app
cd my-app
npm start
<!-- 或 者-->
npm install -g create-react-app
reate-react-app my-app
	\_node_modules，项目所需要的各种包，文件
	\_public，公共的文件
	\_src，项目的源文件

基础

ReactDOM.render()，
用于把dom节点渲染到html页面

src/index.js，是默认的项目的入口文件它的格式相对固定

es6的写法定义组件
class 组件名 extends React.Component{
render(){
	return <h1>第一个react页面</h1>
}
}
return 默认情况下，后面只能跟一个html标签
组件名，一般跟 它所在的组件 同名
import 引入 .js 文件，不用写 .js 后缀名
import 引入 .css 文件，你就必须写 .css 后缀名
要引入 css ，要使用  className

react的传值

在react之中，父组件通过给子组件添加自定义属性

子组件，使用 this.props

在react当中，如果想在html代码中，写js就要把html里面的js，用{}括起来

reactJs的State(状态)

state状态也是，它也是用来传递一些值，从传递值的角度来考虑的话，它和props有一定的相同之处。

但它们的区别是，
props，传递的是确定的值；一般是以自定义属性的形式，出现
子组件，通过this.props.自定义属性名，获得父组件传递的属性、方法

state，它传递的值，是会变的，用来切换组件的状态。

在reactjs当中，用户在页面中进行不同的操作，会触发不同的事件，改变一些数据，这些数据，就是组件的【状态】。

【数据驱动视图】。当一个组件的数据发生变化的时候，那么这个组件的ui界面，也要同步发生变化。

在reactJs当中，你改变了组件的state，那么就是自动的重新渲染组件，也就是更新了页面。

设置组件的state状态