React基础项目搭建以及基础数据搭建

前端的三大框架React vue angule;在github上使用react还是排行第一的；然后是国内用vue的比较多；
直接开始入门教程；
类比vue的搭建方法；

1：脚手架搭建项目；

• 全局安装脚手架
  npm install -g create-react-app;
• 创建自己项目的文件夹；
  create-react-app [项目名称] 例如：create-react-app meeting-system 创建了一个会议管理系统的文件夹
  
  

  image.png
  ；

node_modules用于存放项目的依赖包，也就是构建这个React项目可能会用到的工具，

          --public文件夹中是 index.html存放目录，也就是React根页面的所在地

          --src中用于存放js文件，也就是项目开发中的主要区域

          --package.json用于记录项目信息，以及外部依赖包的导入信息等

2：组件的运用和数据的传递；

React框架的一大特色就是它通过组件化的方式来构建和渲染前端页面，了解过React基础知识的小伙伴应该知道，React框架采取的是虚拟的DOM，也就是说，在呈现实际的Web页面之前，首先编排出虚拟化的DOM元素，在确定了要显示的内容和显示方式后，再将HTML页面渲染出来。
而组件就是页面编排过程中很重要的组成部件，就像搭积木一样，把组件一块一块地拼接起来，可以把这块拼上去，也可以把那块拆下来。具体知识各位可以参照React官方手册。 React官方中文文档地址： https://doc.react-china.org/

• 首先将上面通过脚手架创建的文件夹删除掉；创建第一个文件夹；
  index.js

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
hello world
,document.getElementById('root'));

来分析一下，上面的两行适用于引入react以及react-dom中的内容，是React框架的基础依赖包，就像地基一样，其中，ReactDOM提供渲染函数，也就是下方这一行所用的函数。
ReactDOM.render函数，就是将其中的内容渲染到上文中讲道德index.html中id为“root”的标签中。其中有两个参数，第一个参数是一个

标签，至于为什么标签能出现在js代码中，各位可以去查找参照JSX和ES6相关知识。
标签内容为Hello World！，是要显示的内容，逗号右边则是获取“root”节点的语句。

• 接下来是创建组件
  在src下面创建一个App.js文件夹；
  App.js

import React from 'react';

class App extends React.Component {
 render(){
  return(
This is App
)
 }
}
export default App;

• 下面来介绍State和Props的运用，首先，我们在App.js文件中声明State中的属性，如下所示

import React from 'react';

class App extends React.Component {
constructor(props) { //构造函数
super(props);
 this.state = {
  text : 'This is TEXT!'
 }
}
render(){
  return(
{this.state.text}
)
 }
}
export default App;

至于其中的细节请参照React文档，其中，this.state = { text : 'This is TEXT!' } 方法就是State的初始化方式，当这个组件被加载的时候，text这个属性就被放到了state中。然后，我们在下方render函数return的标签中输入 { this.state.text }，“{ }”括号的作用是在标签中使用js语句，该语句作用就是获取该组件的state中的text属性值。
然后就能在 localhost:3000 中看到 This is TEXT！

• 下面来介绍Props的用法，既然要用到Props，就需要再创建一个组件，将其命名为View。创建View.js文件，内容如下所示：
  View.js

import React from 'react';

class View extends React.Component {
constructor(props) { //构造函数
super(props);
   this.state = {
   }
}
render(){
   return(
{this.props.text}
)
 }
}
export default View;

其构造方式与App组件相似，只是在render函数中return的标签内输入{ this.props.text }，意思就是获取并显示上一个组件传到这个组件的数据中名称为“text”的属性值。

同时也要改造一下App组件的内容：

import React from 'react';
import View from './View';

class App extends React.Component {
constructor(props) { //构造函数
super(props);
this.state = {
text : 'This is TEXT!'
}
}
render(){
let text = this.state.text;
return()
}
}
export default App;

在render函数里，通过let创建一个变量text，获取state中的text属性的值。
然后再return里面输入 标签，并在其中添加语句 text={ text }，意思就是将上面let的text变量传输到View组件中。
保存两个文件，我们就能在网页窗口中看到 This is TEXT！
虽然内容和之前一样，但之前是由App组件显示其State里的属性，而现在是由View组件获取App组件传来的Props中的text属性，然后将其显示出来。一个来自State，一个来自Props。