react学习（一）基础项目搭建，环境配置，以及路由结构问题

PS:React官方中文文档地址：    https://doc.react-china.org/

      路由文档：http://react-guide.github.io/react-router-cn/docs/Introduction.html

 https://mp.weixin.qq.com/s?__biz=MzI3NzIzMzg3Mw==&mid=100000054&idx=1&sn=71f6c214f3833d9ca20b9f7dcd9d33e4#rd

1，react的使用是在node.js环境下运行的，涉及到了npm(依赖包管理工具)，首先要安装node.js

2，安装后可以用node -v查看版本，利用npm创建新的项目

           （a） npm install -g create-react-app //全局安装脚手架

            （b）create-react-app test-app  //创建名为test-app的项目，(注意名字要小写)

              (c)  cd  test-app// 转到项目运行目录下

            （d）npm init

              (e)   npm install --save react react-dom  ( 在该目录下导入react和react-dom）

              (f)   npm install --save  react-router-dom   （导入react路由 ）

              (g)  npm start //启动项目

            （h）npm run build //打包

3，目录结构

             

              

  4，组件创建的方式有函数声明式，和通过类的方式

           函数：

            类：

 5，State和Props的用法

       React框架是通过组件化的方式来构建和渲染前端页面的，在呈现实际的web页面之前，首先编排的是虚拟DOM,

       State是状态，代表着组件本身的属性，可以存储内容，参数，State中的属性只能在组件内部声明和使用

       Props是上层组件传给下层组件的参数，过程不可逆，因为React有单向数据流的特性

  

 

6，路由，详情可以看 https://mp.csdn.net/postedit/81122486

      BrowserRouter是Router中的一种,Router只能有一个子组件所以得用div包裹

      （a）一般App.js文件内容：

     import Home from './home'
     import Detail from './detail'
     import {BrowserRouter as Router,Route} from 'react-router-dom';
     <Router>
        <div>
            <Route path='/home' component={Home} />
            <Route path='/detail' component={Detail} />
        </div>
     </Router>

     (b)当使用Router时候的App.js文件

   

7,

 

未完待续================================================