精华内容
下载资源
问答
  • 新手使用webstorm创建React项目

    千次阅读 2020-02-12 14:42:23
    1、在想要使用react.js之前,电脑上需要安装好node.js。如果没有安装的要先去官网或者其他途径下载安装并配好环境。然后在命令窗口输入以下...3、安装成功后打开软件界面,选择新建一个项目,这里新建的项目工程名...

    1、在想要使用react.js之前,电脑上需要安装好node.js。如果没有安装的要先去官网或者其他途径下载安装并配好环境。然后在命令窗口输入以下命令来下载create-react-app脚手架工具包:

    npm install -g create-react-app

     

    2、安装好之后我们再来安装webstorm工具。

    3、安装成功后打开软件界面,选择新建一个项目,这里新建的项目工程名为demo1

    4、等待片刻项目创建完毕后,我们只需要在Terminal窗口输入:npm start

    5、启动成功

    6、此时我们在浏览器上输入:http://localhost:3000/就可以看到启动界面啦。

    React.js å®è£æç¨å¾ç

    到此,我们已经创建并开启了该项目。需要自己写什么页面的话,可以在index.js页面编辑

    打开里浏览器就能看到你编辑的效果了。

    需要主要的是,如果我们是要写React.js,那么在文件的头部是必须要引入React包和Component组件。

    import React,{Component} from 'react';
    import ReactDOM from 'react-dom';

     

    展开全文
  • 1、安装nodejs 2、安装reactapp依赖:npm install -g create-react-app 在pycharm/webstorm中选择react 转载于:https://www.cnblogs.com/ianduin/p/8464459.html

    1、安装nodejs

    2、安装reactapp依赖:npm install -g create-react-app

    在pycharm/webstorm中选择react

    转载于:https://www.cnblogs.com/ianduin/p/8464459.html

    展开全文
  • webstorm创建react,及其代码结构 webstorm提供了创建各种框架的方式,通过用户点击交互的方式简化了命令行的操作,这篇markdown主要说明一下使用webstorm 2020版本创建react的一些问题和react框架的代码结构。 为了...

    webstorm创建react,及其代码结构

    webstorm提供了创建各种框架的方式,通过用户点击交互的方式简化了命令行的操作,这篇markdown主要说明一下使用webstorm 2020版本创建react的一些问题和react框架的代码结构。

    为了让过程更清晰,先新建一个test目录作为工程目录:E:\test

    生成react

    在上方导航栏点击File->New->Project,会出现一个对话框
    在这里插入图片描述
    在对话框左侧选择React,右侧会出现一些选项,Location是希望创建react的工程目录,Node interpreter是node.exe文件的路径,create-react-app是使用的创建命令,webstorm会默认使用npx create-react-app命令来创建,填好之后点击Create即可开始创建,创建过程需要安装很多的依赖项,会用几分钟的时间。

    创建完成后,这时候在导航栏点击Run -> Run ‘npm start’即可在浏览器打开框架的初始页面,默认是localhost:3000。
    在左侧目录栏打开工程目录,可以看到三个文件夹:node_modules,public,src。
    在这里插入图片描述

    • node_modules是react框架的所需的依赖项,打开可以看到非常多的文件夹,创建这个文件夹里边的内容,也是刚才生成react花费时间最长的部分。
    • 可以看到public文件夹包含了ico文件,png文件,txt文件,json文件等,不难看出这个文件夹主要放一些视图层的东西。
    • 在src文件里,包含了css文件和js文件,因此不难看出逻辑层和样式文件都写在这里边。
      此外还有四个其他的文件,yarn.lock是由于创建过程使用了yarn命令,自动生成的文件,README.md,是一个markdown文件,就是一个说明文件,.gitignore文件暂时不用管,package.json文件是yarn的配置文件,安装依赖,添加命令等都是通过这个配置文件完成的。

    首先打开public里边的index.html文件,看到标签里:

      <body>
        <noscript>You need to enable JavaScript to run this app.</noscript>
        <div id="root"></div>
      </body>
    

    有个空的div标签,id为root。
    打开src文件夹里的index.js文件:

    ReactDOM.render(
      <React.StrictMode>
        <App />
      </React.StrictMode>,
      document.getElementById('root')
    );
    

    render函数的第二个参数中,找到html里id为root的元素进行渲染,在第一个参数中的JSX代码里使用了名为App的组件。
    App.js组件里代码:

    import logo from './logo.svg';
    import './App.css';
    
    function App() {
      return (
        <div className="App">
          <header className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
            <p>
              Edit <code>src/App.js</code> and save to reload.
            </p>
            <a
              className="App-link"
              href="https://reactjs.org"
              target="_blank"
              rel="noopener noreferrer"
            >
              Learn React
            </a>
          </header>
        </div>
      );
    }
    
    export default App;
    

    通过简单分析源码可知,组件里的主要内容是一张图,一个串文本,还有一个链接指向https://reactjs.org
    在浏览器打开也可以验证出结构分析的正确性。
    在这里插入图片描述

    展开全文
  • React—webstorm新建react项目 1、在webstorm中选择一个文件夹,输入指令: sudo npx create-react-app 文件名 例如:sudo npx create-react-app aa(windows应该不需要加上sudo) // 下载速度很慢。。。 完成之后是...

    React—webstorm新建react项目

    1、在webstorm中选择一个文件夹,输入指令:

    sudo npx create-react-app 文件名
    

    例如:sudo npx create-react-app aa(windows应该不需要加上sudo)
    // 下载速度很慢。。。

    完成之后是这样的:
    在这里插入图片描述

    2、cd 文件名
    例如:cd aa
    cd 文件名之后的效果是这样的:输入npm start
    在这里插入图片描述

    3、npm start 运行
    效果:
    在这里插入图片描述

    展开全文
  • WebStorm 创建 React Native

    2018-03-21 18:07:49
    一、打开 WebStorm点击create这时候 会自动下载依赖的包下载完成后二、运行 项目三、运行后 1.iOS 项目用 Xcode打卡2.安卓项目用Android Studio 打开运行即可
  • image.png /usr/local/bin/node /usr/local/lib/node_modules/create-react-app/index.js . Creating a new React app in /Users/jack/WebstormProjects/helloworld. Installing packag...
  • WebStorm 提示 Error: No ESLint configuration found. 需要配合 ESLint 的配置文件,如果不想配置,可以临时在 WebStorm 中将 ESLint 禁用掉。Ctrl+Alt+s -&amp;amp;amp;amp;gt; Languages &amp;amp;amp...
  • 目录 1.Chrome安装插件JetBrains IDE ...3. 创建React Native配置 3.1 打开Configurations 3.2 添加React Native配置 3.3 配置React Native 3.4 开始调试React Native 1.Chrome安装插件JetBrains IDE Su...
  • WebStorm运行React Native项目

    千次阅读 2018-09-26 17:52:47
    WebStorm是一款前端开发工具,也可以用于React Native项目 下载安装WebStorm WebStorm下载地址 安装完不要运行webstrom 下载破解补丁 打开网址(IntelliJ IDEA 注册码),下载补丁 然后将补丁...
  • Webstormreact

    2018-07-18 00:36:29
    1.react的下载 2.下载webstorm下完后解压并且拖到目标的文件夹,官网下即可,可以在网上找激活码 3.创建一个项目 4.用webstorm打开该项目 ...
  • webstorm 快速搭建react项目

    万次阅读 2018-03-07 10:07:49
    强烈推荐30个原生JavaScript的demo,包括canvas时钟特效、自定义视频...前端新手如何安装webstorm ,初步搭建react项目 下载安装webstorm:配置成功: 配置成功后就可以开启webstorm项目了。(存微信收藏、、) ...
  • React Native开发一 webstorm搭建React Native开发环境

    万次阅读 热门讨论 2017-12-16 17:50:29
    1 前言最近打算真的开始学习一下跨平台APP开发,一直在关注RN,因此也打算真...2 基于webstorm的RN环境搭建本次开发采用的环境为windows10+webstorm2017.3+安卓开发环境 需要的开发环境主要有node.js + react native +
  • RN学习笔记02:利用WebStorm创建RN项目 在RN学习笔记01里,安装了node.js与react-native-cli,而且配置了环境变量。 在命令行环境,利用react-native init <项目名>创建项目,执行react-native run-...
  • 如果之前全局安装过旧的react-native-cli命令行工具,先使用npm uninstall -g react-native-cli 命令卸载掉,再进行全局安装它,以避免产生一些冲突问题。 安装成功后会有提示 验证: 3、安装 Webstorm 官网下载 ...
  • 创建React Native项目 1.File->New->Project 2.在New Project窗口中选择React Native, 并根据情况, 修改项目路径和项目名称(我这里将untitled改为我的新项目ReactNativeDemo), 修改完成后, 点击create
  • 1. 创建一个空白项目   2. 执行npm init –y,产生package.json文件 解释1:npm init用来初始化一个项目,初始化的过程中,会让我们逐步确认项目名称、版本、项目描述、主文件、关键字等信息,如果使用npm ...
  • 通过webstorm快速创建react组件模板

    千次阅读 2020-04-16 22:46:58
    一、点击File,然后点击... 二、添加模板 三、模板内容 import React, {Component} from 'react'; export default class ${NAME} extends Component { constructor(props) { super(props); this.state = {}; ...
  • webstorm定义react模板

    千次阅读 2019-01-03 22:48:16
    选择了define才会出现第一张图那样,这个很重要,要指定你这个模板是在什么情景下使用,这个必须指定,如不指定就没效果,我这个是react语言模板,所以就指定了js。。 在js文件中输入My它就出来了。  
  • 前提条件: 已安装过webstorm和nodejs。 安装create-react-app和yarn npm install -g create-react-app ...打开WebStorm创建工程 安装antd yarn add antd --save 修改app.js代码 import React, { Component }
  • WebStormReact和webpack的初始配置

    万次阅读 2016-12-15 11:11:05
    喜欢WebStorm支持JSX语法和代码高亮以及代码提示。...2.WebStorm的配置在WebStorm上默认打开React编写的js文件代码会报错,这时候需要去设置里面 Languages&Frameworks => javaScript 勾选 JSX Harm
  • 复制使用androidstudio创建项目中的local.properties文件至android目录下 或者直接在android目录下创建local.properties文件 ndk.dir=D\:\\AndroidSDK\\ndk-bundlesdk.dir=D\:\\AndroidSDK 注意路径的书写!!...
  • webstorm+react+webpack-demo

    2016-11-12 12:28:00
    序言:通过这个小例子你也许、大概、可能会掌握以下几点 1、webstorm如何使用命令行 2、如何使用webpack的loaders把json...4、对于react而言如何使用合适的loaders把react的JSX文件转换为javascript文件 5、webp...
  • 推荐使用:WebStorm 理由:界面和AndroidStudio相似。 在 ReactNative官网 下载配置环境,再次不做记录。 推荐安装git,为了方便使用ReactNative的命令,比如查看ReactNative的安装路径: witch react-native.

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,873
精华内容 749
关键字:

webstorm创建react项目