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(
            <div>
                Hello
            </div>
        
        )
    }
}

这里面的语法是不是很奇怪 在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(
            <div>
                Word
            </div>
        
        )
    }
}

在Person.js中写

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

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

那么好 现在我们的组件已经算是写完了 我们也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(
      <div>
        <Hello/>
        <Woed/>
        <Person/>
      </div>
  document.getElementById('root')
)

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

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

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