react-1

react

• 创建方法
  • 首先确定你的电脑上面已经安装了node和npm
  • 检查方法：window键 输入cmd 输入node -v 或者 npm -v
• 在全局安装create-react-app这条命令 可以帮助你快速搭建react环境
  ```

1. npm i -g create-react-app
   ```

• 创建完成后
  ```
  create-react-app (你要创建项目的名字)

成功后

cd (你创建项目的文件夹)

npm start

此时你会发现已经有一个react项目打开了在你的浏览器中

那在你构建的项目中有几个文件夹以及文件 比如README,node_moudles,srcc,pubilc 等等。
那么public中的index.html是根目录所有的组件都会汇集于此
那么在src中就是我们构建不同组件等的文件夹 里面必须包含一个index.js文件，你可以把他理解成一个容器， 装什么的呢？是用来一如所有你构建的组件的汇集于此而后导入public中的index.html中

那么下面开始实现以下简单的操作 "hello word"

import React from "react";
import ReactDOM from "reacvt-dom";

ReactDOM.render(‘hello word‘,document.getElementById("app"))

此时呢，在你启动的浏览器的页面上不出意外的话就会显示出hello word的字样了
那这是传入一个字符串 ，那么问题来了 组件化  这也没有组件化啊？

那么我们在src文件夹下面在建立几个文件 比如 Hello.js,Word.js,Person.js

在Hello.js中写

import React,{Component} from "react";
// Component 为组件的意思 它是react中的方法 利用es6的方法引入进来
// 那么这个是hello组件 所有就要导出啊
export default Hello class extends Component{
// 这里面有个render方法
render(){
return(

Hello

)
}

}

这里面的语法是不是很奇怪  在js中写html  这就是react伟大的Jsx语法 为Javascript与xml的结合

在Word.js中写

import React,{Component} from "react";
// Component 为组件的意思 它是react中的方法 利用es6的方法引入进来

export default Word class extends Component{
// 这里面有个render方法
render(){
return(

Word

)
}

}

在Person.js中写

import React,{Component} from "react";
// Component 为组件的意思 它是react中的方法 利用es6的方法引入进来

export default Person class extends Component{
// 这里面有个render方法
render(){
return(

Person

)
}

}

那么好  现在我们的组件已经算是写完了 我们也exprot default 默认导出了，那么谁引入呢？对  就是src下的index.js文件

import React from "react";
import ReactDOM from "react-dom";
//在这里我们将引入 我们刚刚写的三个组件
// 组件的文件首字母必须大写
import Hello from "./Hello.js";
import Word from "./Word.js";
import Person from "./Person.js";
//ok 现在已经引入了 然后呢 ？

ReactDOM.render(

document.getElementById(‘root‘)
)

//这里呢 就是若是多个组件的情况下 最外层必须有且只有一个父级盒子包裹

```
这时候在你的浏览器页面上就会输出了
Hello
Word
Person

也就是你三个组件中的内容了。