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了 。。。。。。。額 子組件向父組件就先放着了下次再看   拐回去先學基礎 。。。。。。。。