react-1

react

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

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

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

react

猜你喜欢