react安装

资料阅读:

    UI组件名 : Ant Design of React    react dva antd

    官网地址: https://ant.design/docs/react/introduce-cn 


    Es6 文档: http://es6.ruanyifeng.com/#docs/class 

    npm 包管理使用介绍   http://www.runoob.com/nodejs/nodejs-npm.html 
  


    简介 Ant快速上手  淘宝镜像说明等http://ant-tool.github.io/setup.html


    dva.js 导图  https://github.com/dvajs/dva-knowledgemap

如何构建一个 react 脚手架?

create-react-app 是一个全局命令行工具,用来创建一个新的项目。

react-scripts 是一个生成的项目所需要的开发依赖。

第一步:全局命令安装 用npm
      npm install -g create-react-app     
第二步:创建一个项目名称
     Create-react-app karla-react
     生成目录结构,没有配置webpack.config.js
第三步:运行程序
     npm run start
第四步:分析
     在 karla-react 这个项目的目录结构里面,public/index.html 是启动 http 服务的首页。浏览器的入口文件。src/index.js 是编译入口的文件。
     http 服务器是自动打开浏览器的,react、es6、babel-core、webpack这些都没有配置和下载。react-script 会帮我们做这些。 

如何构建一个 Ant Design React ?

第一步:安装脚手架工具
        npm install antd-init -g
第二步:创建一个项目
        初始化:mkdir antd-demo && cd antd-demo
        antd-init     (会自动安装 npm 依赖,若有问题则可自行安装)

如何构建一个 dva 的脚手架?一般用于企业项目,是react 和 redux的结合,出来的 dva。

命令提示分析:
        antd-init@2 仅适用于学习和体验 antd,如果你要开发项目,推荐使用 dva-cli 进行项目初始化。dva 是一个基于 react 和 redux 的轻量应用框架,概念来自 elm,支持 side effects、热替换、动态加载等,已在生产环境广泛应用。

脚手架安装:
       npm install dva-cli -g
       dva new karla-test
       cd myapp
       npm start 

如何用react创建一个组件?

npm i -g react-component-maker

//此时便会创建App组件
mkreact App

//此时你就分别创建了Header,Body,Footer三个组件
mkreact Header Body Footer 




React 和 Redux 结合在一起通常用于构建复杂的单页应用,Redux 提供了状态管理,而 React 则负责视图渲染。下面是基本的安装步骤: 1. 安装 Redux: 使用 npm 或 yarn 进行安装: ```bash // npm npm install redux // 或者 yarn yarn add redux ``` 2. 安装中间件(如 redux-thunk 或 redux-saga)来处理异步操作: ```bash npm install redux-thunk --save // 如果使用 thunk 中间件 npm install redux-saga @redux-saga/core @redux-saga/effects --save // 如果使用 saga 中间件 ``` 3. 创建 store (store 是Redux的核心): ```javascript import { createStore } from 'redux'; const initialState = {}; // 应用初始状态 function rootReducer(state = initialState, action) { // 根据 action 更新 state } const store = createStore(rootReducer); ``` 4. 将 store 分发到组件: 在根组件 `App.js` 中,你需要将 store 通过 `Provider` 组件传递给所有的 Redux 监听者: ```jsx import { Provider } from 'react-redux'; import { App } from './components/App'; // 根组件 ReactDOM.render( <Provider store={store}> <App /> </Provider>, document.getElementById('root') ); ``` 5. 在需要使用 Redux 的组件里,订阅状态变化: 使用 `connect()` 函数从 store 中提取数据并处理 actions,例如使用 `mapStateToProps` 和 `mapDispatchToProps`: ```jsx import { connect } from 'react-redux'; function mapStateToProps(state) { return { myData: state.myReducer }; } function mapDispatchToProps(dispatch) { return { fetchData: () => dispatch(fetchAction()), }; } export default connect(mapStateToProps, mapDispatchToProps)(YourComponent); ``` 现在,你的 React 组件就可以访问 Redux 的状态,并且可以发送 actions 来改变它。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值