react-基础入门分享

前端三大巨头 - VUE、React、angular,

　　这段时间一直在看React，最近刚把文档看完，又百度了一些demo，今天给自己做一个总结。

　React两种引入安装使用方法

　　1. 就是html页面中script标签引入　　

　　<script src="https://unpkg.com/react@^16/umd/react.production.min.js"></script>   

        <script src="https://unpkg.com/react-dom@16.13.0/umd/react-dom.production.min.js"></script>

        <script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>

　　第一个引入的是react库，第二个引入的是react-dom库，第三个引入的是babel

　　然后就可以在html页面中新建一个script标签 type="text/babel"; babel会把你写的react代码编译成js体现在页面上，这种的挺简单的，直接可以看文档  写的很清楚的

　　2.脚手架安装

　　　　a.安装 node.js(关于node版本管理 用 nvm 我有一篇博客可以去瞅瞅)

　　　　b.使用淘宝镜像安装 cnpm 或者 yarn　

　　　　 　　npm install -g cnpm --registry=https://registry.npm.taobao.org

　　　　c.全局安装react脚手架　　　　　　

　　　　　　cnpm install -g create-react-app;

　　　　d. 创建项目

　　　　　　create-react-app 项目名称

　　　　e. cd 项目名称

　　　　f. npm start

　　3.  安装完成之后形成的目录结构

　　　

 　　4. 

　　之后新建的文件可以引入到App.js文件中进行展示

　　接下来看一个最简单的展示demo吧

 　　新建一个demo文件夹，新建demo1.js

　　　　1. 引入react

　　　　2.export default class demo1 extends React.Component {

　　　　　　render() {

　　　　　　　　return { 输出的内容 }

　　　　　　}

　　　　　}

　　　　3. App.js 文件中引入demo组件

　　　　import Demo from './demo/demo1.js';

　　　　切记  Demo 名字首字母要大写  不然会报错的

　　　　

 

 　　然后以标签的形式展示出来

　　

 　　数据就展示出来了

二、父子组件之间传值

　　父组件 ==》 子组件

　　

 父组件：

　　引入子组件 ，添加属性的方式传递值给子组件

　子组件：

　　this.props. 【父组件中传递的属性】来获取值

　　数据交互的话，就需要 this.setState({  }) 来改变state中的值

　　再解释个知识点

　　constructor(props) {

　　　　super(props)  // 因为 class 函数中是没有this的  所以用super()来替代this指向 差不多是这个意思

　　　　this.bindChange = this.bindChange.bind(this)  // 这个是必须要的 相当于是用来绑定 this 这个参数的  因为 class 里没有 this me

　　}

　　bindChange() {

　　　　　/***/

　　}

下来就是子组件传递给父组件

　　

 简单来说 就是父组件传递一个方法过去 然后子组件通过 this.props,方法名称 来调用父组件的方法 并趁机把值当成参数传递过去

react-dom 简单可以理解为操作DOM的方法

　　在html页面中 需要用到React DOM.render(element, document.getElementById('元素'))，来展示数据到页面

　　在脚手架中 可以用 ReactDOM.finDOMNode(this.refs. ).value； 来获取input 的值

切记 组件之间不要有太多的 state   尽量只有一个  放在最外层的组件中

这些是我自己的总结，为了加深印象，距离搞项目还是有很大差距的  ，如果看完觉得有什么问题的话  可以告诉我 ，请多多指教