從0開始學 react

2024-04-27 15:04:07

字體：大中小

來源：轉載

供稿：網友

1 webpack

mkdir chong0kaishixuereactcd chong0kaishixuereactnpm initnpm install webpack --save-devnpm install -save-dev babel-core babel-loader babel-PReset-es2015 babel-preset-reactnpm install --save react react-domtouch index.htmltouch component/component1.jstouch main.js ```

cat webpack.config.js

var config = { entry: './main.js', output: { path:__dirname, filename: 'index.js', }, devServer: { inline: true, port: 3000 }, module: { loaders: [ { test: //.js?$/, exclude: /node_modules/, loader: 'babel-loader', query: { presets: ['es2015', 'react'] } }] }}

cat main.js

import React from 'react';import ReactDOM from 'react-dom';import Component1 from './component/component1'; ReactDOM.render(<Component1 />, document.getElementById('index'))

cat index.html

<!DOCTYPE html><html> <head> <meta charset = "UTF-8"> <title>React App </title> </head> <body> <div id = "index"></div> </body></html> <script src = "index.js"></script>

cat component/component1.js

import React from 'react';export default class Component1 extends React.Component { render() { return ( <div> Hello <br /> component1 </div> ); }}

進入項目根目錄

webpack 輸出 index.js文件

然后運行 npm start

瀏覽器顯示 “component1” 調用組件成功

問題1 調試發現，npm start能編譯通過，但WEB空白，中間的錯在終端看不出，

解決方法，在Chrome devtools 中查

問題2 為何直接 npm start 不能編譯成 index.js? 但這個時候沒有index.js , index.html 顯示還是正常的

2 ES6

1 箭頭函數

cat component/component1.js

import React from 'react';export default class Component1 extends React.Component { render() { //最簡單的 function,一個參數 a var foo = a => a ; console.log(foo('hihi')); //沒有參數的直接是空括號 var foo2 =() =>{ alert('haha'); } foo2(); //多個參數要用到小括號,參數間逗號間隔,例如兩個數字相加 var add = (a,b) => a+b; console.log(add(1,2)); //返回對象時需要用小括號包起來，因為大括號被占用為代碼塊了 var getHash =() =>{ return( { name:'zhangsan', age:10 }); }; console.log(getHash()); //點擊事件, document.addEventListener('click',event=>{console.log(event);}); return ( <div> <br /> component1 </div> ); }}

3 類class

vi employee.js

class Employee{ //構造 function constructor(id,name,job){ this.id = id; this.name = name; this.job = job; } //注意，上面無分號間隔 getMessage(){ return this.id + "=>" + this.name +"=>" +this.job; }} //export 是導出類,其他地方可以直接 import 這個類 //default 只能用一次，是只是當前頁用一次，還是其他頁也不能用了? export default Employee;

vi component/component1.js

常量const和 let 聲明

vi component/component1.js

import React from 'react';import Employee from '../employee.js';export default class Component1 extends React.Component { render() { var e1 = new Employee('001','jack','cooker'); console.log(e1.getMessage()); // {// let a = 10;// var b = 11;// }// console.log(a);// console.log(b);for(let i =0;i<10;i++){}for(var k=0;k<10;k++){}//console.log(i);console.log(k); return ( <div> <br /> component1 </div> );}}

JSX

cat main.js

import React from 'react';import ReactDOM from 'react-dom';import Component1 from './component/component1';import Component2 from './component/component2'; // ReactDOM.render(<Component2 />, document.getElementById('index2')) //ReactDOM.render(<Component1 />, document.getElementById('index'))// ReactDOM.render(// <div>// <h1>{1+1}</h1>// </div>// ,// document.getElementById('index')// ); var arr =[ <h1> hi</h1>, <h2> react is awesome</h2> ]; ReactDOM.render( <div>{arr}</div>,document.getElementById('index'));

notice:

Warning: Each child in an array or iterator should have a unique "key" prop. Check the top-level render call using <div>. See https://fb.me/react-warning-keys for more information. in h1 我網上查了下，知道是要用 key,但查的例子沒辦法參考，暫時略過,各位留意這里的優化和提高，我自己也要注意以后改正

props和省略號語法

vi component/component2.js

import React,{Component} from 'react';import ReactDOM from 'react-dom';// class Component2 extends React.Component {// render() {// // //最簡單的 function,一個參數 a// // var foo = a => a ;// // console.log(foo('hihi'));// // //沒有參數的直接是空括號// // var foo2 =() =>{// // alert('haha');// // }// // foo2();// // //多個參數要用到小括號,參數間逗號間隔,例如兩個數字相加// // var add = (a,b) => a+b;// // console.log(add(1,2));// // //返回對象時需要用小括號包起來，因為大括號被占用為代碼塊了// // var getHash =() =>{// // return(// // {// // name:'zhangsan',// // age:10// // });// // };// // console.log(getHash());// // //點擊事件,// // document.addEventListener('click',event=>{console.log(event);});// return (// <div>// Component2<br />// </div>// );// }// }//聲明一個組件類，叫 MyTitleclass Component2 extends Component{ show(){ console.log(this.props.title); console.log(this.props.contents); console.log(this.props.name); } //渲染組件：一個按鈕，并可以點擊 //注意 bind(this)的寫法，這是 JSX 語法要的 //如果怕麻煩也可以用箭頭 function render(){ return(<button onClick={this.show.bind(this)}>click</button>); }}//要向組件傳遞的數據 var data ={ title:'this is a little', contents:'this is contents'};ReactDOM.render(<Component2 {...data} name ={'my name'} />,document.getElementById('index'));export default Component2;

這里寫圖片描述步驟是：1 聲明組件： ES6的類聲明 2 渲染組件： render用法渲染方法包括兩個參數,一個是組件名稱，一個是頁面的 id，進一步得想，index.html可以有多個 id嗎？不同的 component可以定位不同的 id,然后在 index.html上顯示嗎？還是main.js是一個大的組件，由很多小組件組合而成，這就不是 SPA了，多頁面這里如何處理

this.props.children

cat component/NodeList.js

'use strict';import React,{Component} from 'react';import ReactDOM from 'react-dom';//聲明一個組件類，叫 NodeListclass NodeList extends Component{ render(){ return( <ul> { //遍歷 this.props.children 節點 React.Children.map(this.props.children,function(child){ return(<li>{child}</li>); }) } </ul> ); <NodeList><span> hello</span><span> world</span></NodeList>; }}export default NodeList;

cat main.js

import React,{Component} from 'react';import ReactDOM from 'react-dom'; import NodeList from './component/NodeList'; ReactDOM.render(<NodeList><span> hello</span><span> world</span></NodeList> ,document.getElementById('index'));i

state狀態機和 refs

cat component/inputstate2.js

'use strict';import React,{Component} from 'react';import ReactDOM from 'react-dom';//聲明一個組件類，叫 Searchclass Search extends Component{ checkSth(){ var inputValue = this.refs.myInput.value; alert(inputValue); } render(){ return(<div><input type = "text" ref="myInput" /><button onClick ={this.checkSth.bind(this)}>獲取內容</button></div> ); }}// ReactDOM.render(// document.getElementById('index')// );export default Search;

cat main.js

import React,{Component} from 'react';import ReactDOM from 'react-dom';import Search from './component/inputstate2'; ReactDOM.render(<Search/> ,document.getElementById('index'));![這里寫圖片描述](http://img.blog.csdn.net/20170204145612982?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd2lyZW5j/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)#綜合案例cat component/box.js 'use strict';import React,{Component} from 'react';import ReactDOM from 'react-dom';//小部件，渲染為 UL 列表class Items extends Component{ render(){ var arrLi =[]; for(let i=0;i<this.props.info.length;i++){ //注意，這不是拼接字符串 arrLi.push(<li key={i}> {this.props.info[i]}</li>); } return(<ul>{arrLi}</ul>); }}//大部件class Box extends Component{ constructor(props){ super(props); this.state ={ list:this.props.sourceData } } checkSth(){ var arr=[]; //獲取文本信息 var inputValue = this.refs.myInput.value; //獲取 props 信息 var sourceData = this.props.sourceData; //選擇數據 for(let i=0;i<sourceData.length;i++){ if(sourceData[i].indexOf(inputValue)!= -1){ arr.push(sourceData[i]); } } //更新狀態機 this.setState({list:arr}); } render(){ return( <div><input type="text" ref="myInput" onKeyUp={this.checkSth.bind(this)} /><Items info={this.state.list} /></div> ); }};export default Box;

cat main.js

import React,{Component} from 'react';import ReactDOM from 'react-dom';import Box from './component/Box'; var data = ['jackson','milly','john smith','make','denny','emili','jenny']; ReactDOM.render(<Box sourceData={data}/> ,document.getElementById('index'));

這里寫圖片描述