這里主要使用的都是ES6的語法(阮一峰的<a >ES6入門</a>)遗淳，我自己也在摸索中拍柒，在這個(gè)項(xiàng)目中會(huì)帶一些關(guān)于語法的解釋∏担可能有錯(cuò)誤拆讯，如果有發(fā)現(xiàn)錯(cuò)誤，歡迎指錯(cuò)养叛，謝謝种呐。
現(xiàn)在的前端主要流行工程化，模塊化爽室。react就是這樣一個(gè)框架瓶珊。框架主要是編程思想的體現(xiàn)蜀肘。
react的主要的思想就是組件化狐榔，模塊化。整個(gè)項(xiàng)目在之前也說過會(huì)使用react和react-reflux來做項(xiàng)目罢艾。react充當(dāng)?shù)氖莢iew層的作用春锋，實(shí)現(xiàn)view的模塊化直奋。react-reflux 來實(shí)現(xiàn)代碼的解耦，或者說是一個(gè)mvc的框架吧。
對于react的學(xué)習(xí)資源主要是看<a >阮一峰</a>的文字,這里是<a >react入門實(shí)例教程</a>
我這里直接從一個(gè)小的項(xiàng)目開始挖胃，會(huì)涵蓋一些react的知識(shí)點(diǎn)垛吗，碰到了再單獨(dú)解釋饵沧。
一羡儿、 helloworld
coding的過程都是從helloworld開始的。我們也從helloworld開始。
react component 的class 要大寫開頭，所以注意要HelloWorld
1、 創(chuàng)建一個(gè)名字叫HelloWorld.js 代碼
import React from 'react'
export class HelloWorld extends React.Component {
constructor(props){
super(props);
}
render(){
return <h1>hello world {this.props.name}</h1>;
}
};
2幻碱、在Main.js
import {HelloWorld} from './HelloWorld.js'
class AppComponent extends React.Component {
render() {
return (
<div className="index">
<img src={yeomanImage} alt="Yeoman Generator" />
<HelloWorld/>
</div>
);
}}
3蹦狂、查看運(yùn)行效果
4啊研、語法解析
// es6 總共有6種創(chuàng)建變量的命令
//如下：
// let 命令 const 命令 var 命令 function 命令
// import命令 和 export 命令
// import {} export{} 導(dǎo)入接口和導(dǎo)出接口的意思沟娱，能夠很好的實(shí)現(xiàn)模塊化
import React from 'react'
export class HelloWorld extends React.Component {
// constructor 就是react的初始化函數(shù)
constructor(props){
super(props);
}
// render就是講 下面return的模板轉(zhuǎn)換成 HTML語言台舱，把并插入節(jié)點(diǎn)讼撒，這個(gè)例子就是講先的<h1>標(biāo)簽插入到Main.js的節(jié)點(diǎn)下
render(){
return <h1>hello world {this.props.name}</h1>;
}
};
這樣我們就可以最簡單的使用了react 創(chuàng)建了一個(gè)react 組件并且使用了。
