最近在學(xué)習(xí)React技術(shù)框架。對于前端比較著名的兩大框架之一，React相比Vue來說是入門相對較困難一些的，這篇針對沒有前端基礎(chǔ)的人可能會有一些些幫助。
準(zhǔn)備工作
直接引入
你可以在現(xiàn)有的項目中直接引入React組件，只需要在HTML頁面中添加三個 script 標(biāo)簽
<!-- 加載 React。-->
<!-- 注意: 部署時，將 "development.js" 替換為 "production.min.js"。-->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<!-- 加載我們的 React 組件。-->
<script src="like_button.js"></script>
在自己目錄下創(chuàng)建like_button.js文件，編寫React代碼，在文件底部加入
const domContainer = document.querySelector('#like_button_container');
ReactDOM.render(e(LikeButton), domContainer);
就能在HTML中加載出js文件中定義的組件。
創(chuàng)建新的React項目
首先需要的是自己安裝 npm>=5.6 和 Node >= 8.10。
之后直接在終端運(yùn)行以下命令。
npx create-react-app 項目名
cd 項目名
npm start
注意：項目名不要大寫。
這樣一個腳手架就出來了。
JSX原理
在React中編寫JSX語法時，其實是在底層做了一層封裝。
例如
<div className= 'my_class' id= 'my_id'>JSX</div>,
以上直接創(chuàng)建了一個div，等效于下面的寫法
React.createElement(
'div',
{
className: 'my_class',
id: 'my_id'
},
'JSX'
),
創(chuàng)建類組件一般有一下幾種方法
/**
* 第一種方式 函數(shù)法
*
*
const App = (parps)=>{
return <div>{parps.title}</div>
}
const app = App({
title : '這就是title啊'
})
ReactDOM.render(
app,
document.querySelector('#root'),
)
*/
/*
const App = (parps)=>{
return <div>{parps.title}</div>
}
ReactDOM.render(
<App title='這也是屬性'/>,
document.querySelector('#root'),
)
*/
/** 第二種方式 自定義法 */
/*
const app2 = <div>這也是一個組件</div>
ReactDOM.render(
app2,
document.querySelector('#root'),
)
*/
/*第三種 創(chuàng)建類組件 */
/*
class App extends React.Component {
render(){
return <div>{this.props.title}</div>
}
}
const app = new App(
{
title : '創(chuàng)建類組件'
}
).render()
ReactDOM.render(
// <App title='創(chuàng)建類組件'/>,
app,
document.querySelector('#root')
)
*/
在React中只有一種語法，那就是 {} ,將所有需要執(zhí)行的 js代碼使用 {} 括起來，父傳子組件時，通過 props 來獲取傳遞的屬性和值，組件內(nèi)部自定義的類型將使用 state。
比較好用的依賴包
在React開發(fā)中，通常使用一些插件可以幫助我們快速構(gòu)建應(yīng)用，這里簡單介紹幾種。
styled-components
通過直接使用模板語法快速定義一個組件，這種方法非常高效。用法如下：
import styled from 'styled-components';
const Title = styled.h1`
font-size: 1.5em;
text-align: center;
color: palevioletred;
`;
const Wrapper = styled.section`
padding: 4em;
background: papayawhip;
`;
<Wrapper>
<Title>Hello World, this is my first styled component!</Title>
</Wrapper>
prop-types
這是一個類型檢查插件，將你需要的類型語法進(jìn)行檢查。
函數(shù)組件和類組件對類型prop進(jìn)行檢查時，都可以直接寫在函數(shù)體外部
import PropTypes from 'prop-types';
export default function ProptypesCheck(props) {
}
ProptypesCheck.propTypes = {
desc: PropTypes.string
}
export default class MyComponent extends React.Component {
render() {
// ... do things with the props
}
}
MyComponent.propTypes = {
// You can declare that a prop is a specific JS primitive. By default, these
// are all optional.
optionalArray: PropTypes.array,
optionalBool: PropTypes.bool,
optionalFunc: PropTypes.func,
}
對于類組件，還可以通過static關(guān)鍵詞進(jìn)行修飾，寫入到類組件內(nèi)部
export default class MyComponent extends React.Component {
static propTypes = {
optionalArray: PropTypes.array.isRequired,
}
static defaultProps = {
optionalArray : []
}
render() {
// ... do things with the props
}
}
在學(xué)習(xí)的過程中插件會一直完善下去。
