React的初步使用与组件传值（详细图解）

        React是用于构建用户界面的JavaScript库，起源于Facebook的内部项目，该公司对市场上所有 JavaScript MVC框架都不满意，决定自行开发一套，用于架设Instagram的网站。于2013年5月开源。

一 . 初步使用安装

        首先，桌面创建文件，在vsCode打开

        

        右击选择在集成终端打开之后，输入以下代码，安装React框架 my-app是你的项目名 可以进行更改

npx create-react-app my-app

        安装成功后 如下图所示 

        打开本文件目录下的终端，输入 

npm start

        然后便可以启动项目 或者在NPM脚本里启动项目

        ​​​​​

        恭喜你 第一个React项目的创建成功

 二 . React的基础语法与初步使用

        首先 我们下载插件 帮我们构建React的基础模板

         将src目录下的App.js全部删除  输入rce或者rcc回车 就会获得一个模板

                

        state里面写定义的变量，render里写jsx代码，就是js与html，{}里面写的便是js，

<></>里面写的便是标签，比如我写一个无序列表，需要循环渲染li,先在state里面定义数据，

然后{}里面用map进行循环，箭头指向li标签，渲染li,可以进行尝试一下，很有意思。（图示）

         React里面定义事件，好比说这个点击事件，onClick注意C大写，括号里对应的是事件名，

this.你的事件名，不然会找不到，事件与state，render同级，事件需要使用箭头函数，不然的话

也是会找不到（图示）

 如果想要在循环里传值，比如说需要传每个li对应的id，需要加箭头指向，如下图所示

       书写css样式的时候，我们需要在当前页面引入一下使用的是哪一个目录下的css，然后便可以使用了。（图示）

                                 

        子父组件的传值操作，首先我们创建自己的组件，在src路径下创建一个js文件，首字母大写，然后在父组件里引入子组件，将子组件作为标签名写在render里，这样就引入了自己的子组件。

       父组件传子组件，在引入子组件之后，我们在子组件的标签内，随意写一个名字当做键值，后面跟着的是要往子组件里面传的值（图示）

      

         在子组件内，写一个constructor钩子函数然后用super(props)接收父组件传过来的值，可以在控制台打印一下props看一下传过来的值对不对与格式是什么样子（图示）

         子组件传父组件，子传父相对于父传子要麻烦一些，但并不困难，首先，我们在父组件里已经调用过子组件了，在父组件的子组件标签里，写一个自定义事件，这个自定义事件，是为了将子组件的值接收过来,括号里写自定义事件，为了将子组件那边的值拿过来之后，可以进行操作，子组件写个标签，给个点击事件，然后this.props.父组件自定义的事件(要传的值),然后父组件事件里用this.setState进行修改更新父组件的值，进行覆盖，与小程序一样。

                                        （如下图所示 图一父组件 图二子组件）

 

React官网 中文文档

创建新的 React 应用 – React

Getting Started | Create React App 中文文档