react 脚手架 及路由和 redux

  前提是我们需要下载 nodejs

  使用 npm 下载 react 的脚手架,react-router-dom,redux

    全局下载 react 的脚手架:npm i create-react-app -g

    使用 react 脚手架创建一个 app 的项目:create-react-app app

    根据指令进入 app 项目: cd app

    下载 react 的路由插件:npm i react-router-dom -S

    组件通信的优化: npm i redux -S

  以上便是把我们的 react 的脚手架配置完了

  接下来我们来看看他的结构:

    src 下面的目录,而且如果我们向引入本地图片的话,只能放在 src 下面的目录,通过 import 来引入图片到组件,然后使用 src={} 的方法引用

    我们的组件都是 .js 的文件

    src 下面的目录介绍

      App.css:是所有组件的样式 (我们也可以专门写 组件的 css 文件,通过 import 来引入到组件里面就可以了)

      Index.css:是整个网页的全局样式

      App.js:是最大的组件

      Index.js:是出口文件

      每个组件都需要使用 import React from ‘react‘; (必须的)

  react-router-dom 的使用

    他里面提供了很多的组件标签,供我们使用

    我们是在 App.js 中写了一个 小demo ,基本实现了 路由的跳转,剩下的思想也差不了很多

    因为我们 react-router-dom 里面有很多的组件,所以我们只能通过这中方法引入

    

    使用

     

  下面是每个组件对应的功能

    <BrowserRouter> history
    <HashRouter> hash
    <Route> 路由
    <Redirect> 重定向
    <Link> 连接
    <NavLink> 导航连接
    <Switch> 切换
    history 的 push
    match 函数
    withRouter 函数

  redux 的使用

    由于这个比较绕,希望大家可以多看几遍

    app.js

    

  index.js

    

  store 的逻辑

    

  actions.js

    

  actions-type.js

    

  reducer.js

    

  store.js

    

  这样 redux 的功能就可以初步使用了

原文地址:https://www.cnblogs.com/shangjun6/p/11479932.html

时间: 2024-10-09 08:30:43

react 脚手架 及路由和 redux的相关文章

react脚手架搭建

react脚手架搭建 [转]https://blog.csdn.net/weixin_41421227/article/details/80875544 由于我们在安装的过程中要使用到npm  因此需要先前安装好node.js 直接到官方下载即可  一般建议大家下载稳定版的(左边那个!) 知道你们懒,咯官网戳→_→  node.js官网:https://nodejs.org/en/ 判断安装成功与否的标志↓ 打开cmd命令行,输入 node -v 和 npm -v 来查看版本号,如果显示则安装完

react脚手架搭建1

23:01:17 react脚手架搭建 (个人用的是webstorm,所以分享下webstorm中的创建react脚手架项目的方法) 1.创建新项目(前提是下载nodejs环境) 2.下载好在webstorm中右键自己创建的项目目录,菜单中会出现一个命令行工具,点进去   然后    npm start 开启服务 3.在浏览器中打开 http://localhost:3000/ 可以看见react的默认页面 初步的搭建完成,开始自己写东西 原文地址:https://www.cnblogs.com

React 脚手架应用以及注意事项

在使用React脚手架之前需要通过  create-react-app 快速构建 React 开发环境 , 注意 : create-react-app 自动创建的项目是基于 Webpack + ES6 . 执行以下命令创建项目: $ npm install -g create-react-app $ create-react-app myapps $ cd myapps/ $ npm start 在安装成功后开始使用脚手架 图为安装成功后的目录 在使用React之前需要注意以下三点: 一 .  

【webpack系列】从零搭建 webpack4+react 脚手架(四)

经过三个章节的学习,你已经学会搭建了一个基于webpack4的react脚手架.如果要更改配置,比如,你希望把编译后的js文件和css文件等单独放dist下的static目录下,你想想,是不是有点麻烦.你要去浏览webpack的配置文件,找到哪些配置项,然后去更改它,我们希望有个参数配置文件,只要更改参数配置,而无需更改webpack的配置文件. 1 添加参数配置文件 (1)在根目录创建config文件夹,在config文件夹内新建一个index.js文件,文件内容如下: 'use strict

React脚手架中使用less

最近在用react.js 结合蚂蚁金服的 Ant Design Mobile 做一个单页面的应用程序,遇到了一个很棘手的问题——那就是 react脚手架不支持less,看了不少优秀博主如何在react脚手架中使用less,,觉得繁琐且又不能解决实际问题,于是自己弄明白后感觉如此简单,做了这么个教程,避免新手走弯路. 首先声明一下我用的是微软的代码编辑软件VS code,下面的是详细的图文教程. 前期准备: 通过命令 create-react-app react-demo 创建了自己的React应

React 脚手架

React 脚手架,来让我们快速的搭建起来一个 React 的项目 1. 全局安装 React 的脚手架 npm i -g create-react-app 2. 创建项目 create-react-app 项目名 3. 进行项目指令: cd 项目名 4. 运行项目: npm start 这样我们 React 脚手架的项目搭建就完成了 接下来,让我们看看 React 脚手架,给我们下载的目录 现在我们就来看看每个文件的功能: 首先来看 README.md 文件,这里是对我们 React 脚手架的

react脚手架的建立——小白入门

一.介绍:React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设Instagram 的网站. 做出来以后,发现这套东西很好用,就在2013年5月开源了. 二.React脚手架:create-react-app React 的环境搭建,是比较繁琐的,有很多的依赖:react.react-dom.babel.webpack ... 需要很多的前置知识,很容易让人从入门到放弃. 于是就诞生了 脚手架 这种东西,

React: React脚手架

一.简言 React开发目前已经非常流行,对于如何实现对React项目的管理和维护,React生态圈出现了大量可用的开发工具,例如Browserify.Gulp.Grunt.webpack等.其中,webpack称为CommonJS模块的主流工具之一,它是一个模块绑定器,拥有模块化和网络性能的两大优点,可以将不同类型的文件转换为单个文件,也可以将所有的依赖项打包成单个文件.当然,使用webpack管理React,开发者需要通过命令行去安装webpack和Babel,然后对webpack进行配置.

React 脚手架创建项目

使用react脚手架创建项目 一.首先需要安装node.js 具体如何安装参考网址:https://www.jianshu.com/p/0ddecdbb4048 下载安装包 双击打开安装文件 setup 点击next,下一步 勾选 选中勾选框,点击next,下一步 安装路径 选择安装路径,默认路径即可,点击next,下一步 安装配置 默认即可,点击next,下一步 安装开始 点击install,开始等待安装 安装中 点击finish,安装完成 finish 打开命令提示符窗口,输入 node -