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 脚手架的指令的一个介绍,尤其要关注一个指令,npm run eject

  因为我们的 React 脚手架的配置文件时隐藏的,我们可以通过 npm run eject 来让隐藏的配置文件展现出来,然后我们可以加一些自己喜欢的配置

  src 下面的目录

    App.css:是所以组件的样式

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

    App.js:是最大的组件

    index.js:出口文件

    App.test.js:将 App 组件的内容渲染到页面上来

  在这里,我们的图片地址,如果是通过相对路径来获取的都不能直接的在 src 属性上面输入,而是应该通过 import 来引入此图片,之后通过 src={} 的方式,来引入,否则报错

  组件中需要引入的图片,不能放在 public 中,而是应该放在 src 中,且相对组件的引入方式  (图片引入的两种情况,1、相对组件,2、相对 index.html 中)

  添加自组件的方法:

  首先:我们在 src 下面创建一个专门放一个子组件的文件夹

    heads 文件夹里面就是我们的 Heads 的组件

    

    heads.js 的写法

    

    heads.css (则就是普通的 css 写法)

    

  然后我们的组件将创建好了,接下来我们就要在父组件中引入子组件了

    

  render 函数中,return 返回的是模板,所以可以带 ()

  

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

时间: 2024-10-30 05:16:01

React 脚手架的相关文章

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之前需要注意以下三点: 一 .  

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 来查看版本号,如果显示则安装完

【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 脚手架 及路由和 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

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 -