最近在学习React技术框架。对于前端比较著名的两大框架之一，React相比Vue来说是入门相对较困难一些的，这篇针对没有前端基础的人可能会有一些些帮助。
准备工作
直接引入
你可以在现有的项目中直接引入React组件，只需要在HTML页面中添加三个 script 标签
<!-- 加载 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>
在自己目录下创建like_button.js文件，编写React代码，在文件底部加入
const domContainer = document.querySelector('#like_button_container');
ReactDOM.render(e(LikeButton), domContainer);
就能在HTML中加载出js文件中定义的组件。
创建新的React项目
首先需要的是自己安装 npm>=5.6 和 Node >= 8.10。
之后直接在终端运行以下命令。
npx create-react-app 项目名
cd 项目名
npm start
注意：项目名不要大写。
这样一个脚手架就出来了。
JSX原理
在React中编写JSX语法时，其实是在底层做了一层封装。
例如
<div className= 'my_class' id= 'my_id'>JSX</div>,
以上直接创建了一个div，等效于下面的写法
React.createElement(
'div',
{
className: 'my_class',
id: 'my_id'
},
'JSX'
),
创建类组件一般有一下几种方法
/**
* 第一种方式 函数法
*
*
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'),
)
*/
/*第三种 创建类组件 */
/*
class App extends React.Component {
render(){
return <div>{this.props.title}</div>
}
}
const app = new App(
{
title : '创建类组件'
}
).render()
ReactDOM.render(
// <App title='创建类组件'/>,
app,
document.querySelector('#root')
)
*/
在React中只有一种语法，那就是 {} ,将所有需要执行的 js代码使用 {} 括起来，父传子组件时，通过 props 来获取传递的属性和值，组件内部自定义的类型将使用 state。
比较好用的依赖包
在React开发中，通常使用一些插件可以帮助我们快速构建应用，这里简单介绍几种。
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
这是一个类型检查插件，将你需要的类型语法进行检查。
函数组件和类组件对类型prop进行检查时，都可以直接写在函数体外部
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关键词进行修饰，写入到类组件内部
export default class MyComponent extends React.Component {
static propTypes = {
optionalArray: PropTypes.array.isRequired,
}
static defaultProps = {
optionalArray : []
}
render() {
// ... do things with the props
}
}
在学习的过程中插件会一直完善下去。
网友评论