react 入门

安装脚手架 npm install -g create-react-app

搭建项目 create-react-app my-app (my-app是项目名字)

cd my-app切换到根路径或者手动选择文件夹切换 npm start启动项目

下面我们新建一些页面作为小组件

看一下目录

hello 和 list 是我新建的组件

vue中引用组件的步骤是:

import  hello  from './hello'    (引入)

components：{
　　hello                             (注册组件 后才可以使用 )
}

<hello></hello>                  (使用组件)

而react中省去了注册组件的一步

import  Hello  from './hello'    (引入)

<Hello  />             (使用组件)

可以观察到现在组件名称的Hello的首字母是大写如果写小写会出现以下报错

Warning: The tag <hello> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.
大概意思就是说:浏览器无法识别标记。如果要呈现react组件，请以大写字母开头。这是和vue不一样的地方

相同之处是组件都只能有一个根结构
就是说

<div>
　　<span>...</span><span>...</span>
</div>  　　　　　　　　　　　　　　　　　　行
<span>...</span><span>...</span>  　　不行

上面是使用组件的方法 现在开始写我的第一个组件

 分三个部分   第一个 导入react   第二个 写主体内容  第三导出

// 1. 导入 react
import React from 'react'



//主体
const Welcome = function () {
    return (
      <div className="shopping-list">
        <ul>
          <li>Instagram</li>
        </ul>
      </div>
    )
  }

 //导出
  export default Welcome;

　导出以后再app.js中引用因为我是把app.js作为hello的父组件所以我在里面导入使用

import React from 'react';
import './App.css';

import Hello from './hello.jsx'          //这里导入

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <p>react</p>
        <Hello/>                           //这里使用
      </header>
    </div>
  );
}

export default App;

以上就完成了组件的简单应用下面是父组件向子组件的传值

现在我赏给hello一个子组件让它做一次爸爸

list组件:

// 1. 导入 react
import React from 'react'


const listt = function (props) {        //注意 props参数要写
    return (
      // 此处注释的写法 
      <div className="shopping-list">
          我是hello的子组件-----------
          {props.user.name}
      </div>
    )
  }

 
  export default listt;

hello组件做一些添加

// 1. 导入 react
import React from 'react'
import Listt from './list.jsx'             //引入子组件 list

const comment = {                    //声明一个对象
  'msg':"hello  react  ",
  "cy":{
    name:"陈怡",
    age:22
  }
}

const Welcome = function () {
    return (
      <div className="shopping-list">
        <Listt user={comment.cy}/>                    //向子组件传输 comment的对象
        <ul>
          <li>Instagram</li>
          <li>{comment.msg}</li>                    
        </ul>
      </div>
    )
  }

 
  export default Welcome;

props vue中和react中的不同

react中

//父组件中

<Listt user={comment.cy}/>                    //向子组件传输 comment的对象   在react是这种写法  把comment.cy 复制给user  然后在子组件中通过props.user 使用传过去的值 (注意子组件的函数中需要写props参数) 

//子组件中 直接使用 也省去了接收的那步或者是说接收方式变成了参数形式

const listt = function (props) {        //注意 props参数要写
    return (
      // 此处注释的写法 
      <div className="shopping-list">
          我是hello的子组件-----------
          {props.user.name}                
      </div>
    )
  }

注意看这里 输出是props.user.name而不是props.user   可以看下面vue中的例子 直接输出{this.user} 
这也算是我遇的坑 因为我是用vue开发对于{props.user}的输出我觉得是正常的按照我的想法输出的是

{
  name:"陈怡",
  age:22
}
这样的对象 但是页面给出报错如下
Objects are not valid as a React child (found: object with keys {name, age}). If you meant to render a collection of children, use an array instead.
简单点说是人家不输出json的子对象 但是找到子对象的key值name和age 想输出需要明确key值 也就是{props.user.name} 或者{props.user.age}   这也是和vue不一样的地方 (当然上面提示了如果想呈现子集合可以改用array数组)


还记得在vue中怎么写的吗~  回忆一下

//相同的情景 
//父组件中
　　<Listt :user="comment.cy"/>   用属性名前面加:   也就是v-bind: 的方式告知vue接受的是一个变量 
//子组件中接收
　　props: ["user"]

//使用  页面输出
{this.user}

刚入门好像走的走的歪循环渲染样式指令事件生命周期好像还没开始就props了。。。。。。。额子组件向父组件就先放着了下次再看拐回去先学基础。。。。。。。。