记录学习React中的小tip (一)

最近在学习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
  }
}

在学习的过程中插件会一直完善下去。