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了 。。。。。。。额 子组件向父组件就先放着了下次再看   拐回去先学基础 。。。。。。。。