• 看了react官方文档,看到利用 Create React App 工具是新建react程序最好的方式...新建文件夹,在路径下执行create-react-app my-app进入my-app目录执行npm start4.创建之后目录结构为:my-app/ README.md node_m...

    看了react官方文档,看到利用  Create React App 工具是新建react程序最好的方式。

    1.安装node.js6以上版本

    2.

    npm install -g create-react-app

    3.新建文件夹,在路径下执行

    create-react-app my-app

    进入my-app目录执行

    npm start

    4.创建之后目录结构为:

    my-app/
      README.md
      node_modules/
      package.json
      public/
        index.html
        favicon.ico
      src/
        App.css
        App.js
        App.test.js
        index.css
        index.js
        logo.svg

    这之中,public/index.html 是页面模板;src/index.js 是JavaScript的入口点。这两项不要修改名称或删除。其他的文件随意。

    【注】①把自己的js与css都放到src文件夹内,否则webpack无法打包②把index.html里用到的所有文件都放在Public文件夹下,否则无法使用。

    可以自己修改一下index.js与index.html看看效果



    5.在根目录下执行

    npm start

    就能在http://localhost:3000里看开发模式下网页效果了

    6.在根目录下执行

    npm run build

    就能优化并打包应用

    npm run build creates a build directory with a production build of your app. Set up your favorite HTTP server so that a visitor to your site is served index.html, and requests to static paths like /static/js/main.<hash>.js are served with the contents of the /static/js/main.<hash>.js file.

    生成的build文件夹就是最后可以使用的工程,将其放到tomcat里即可。

    此时报错了,发现很多文件路径请求不到

    解决办法是,打开package.json,添加一句:  

      "homepage":"." 

    路径问题即可解决~~~


    展开全文
  • 根据自己最近学习react 视频,下面谈谈如何去创建一个react项目 准备工作: ES6语法、html5、css3、JSX语法 node.js 这里我们根据react官网中给出的安装react项目步骤来创建一个react项目。 打开react官网,可以是...

    根据自己最近学习react 视频,下面谈谈如何去创建一个react项目
    准备工作:
    ES6语法、html5、css3、JSX语法
    node.js

    这里我们根据react官网中给出的安装react项目步骤来创建一个react项目。
    打开react官网,可以是中文文档,当然,如果你的英文水平支持的话,可以去查看react英文的官方文档,英文的官方文档的内容相比较于中文文档会更加准确些。

    在这里插入图片描述

    这里我们打开的是react的中文文档官网,我们点击左上角的文档。出现下面的页面:
    在这里插入图片描述

    这是react官网提供的学习文档,想要学习react相关概念内容的,可以通过这个文档去学习react相关内容。

    之后,我们需要点击右侧菜单栏中的安装按钮。
    在这里插入图片描述
    点击第二项,使用React开发新项目。
    在这里插入图片描述
    进入上述页面后,我们下拉左侧内容部分,可以看到下图(Create React App):
    在这里插入图片描述
    上面描述的是如果创建一个react-app的方式,可以看到,这里是需要用到的是create-react-app脚手架。因此,我们需要先通过npm去下载create-react-app脚手架,它可以帮助我们快速的去搭建react项目。

    1. 通过npm下载 create-react-app

    由于我们需要去使用create-react-app,因此我们可以通过npm下载create-react-app。

    这里我直接给出如何通过npm安装全局create-react-app脚手架的方式。当然你也可以通过网上搜索如何去下载它。

    npm install -g create-react-app
    

    2.根据官网给出的安装内容,我们现在在已经安装好了create-react-app的情况下,开始正式通过create-react-app去安装我们的react项目。

    查看上面我标记有Create-React-App的图中,我们接下来的操作是:打开你的命令行(windows系统下,无论是GitCMD、cmd、还是node.js都可以)

    通过命令行命令或直接右击桌面,将命令行路径定位到桌面上(Desktop)上

    之后输入命令(npx create-react-app 项目名称):

    在这里插入图片描述

    上图中项目名称为官方给出demo的my-app,当然你也可以自己起项目名称。

    输入后回车。等待它创建好你的项目。

    3.启动你的react项目
    在这里插入图片描述
    分开输入上面两行命令即可。

    他的意思是:你需要先进入到你新创建的项目路径下,通过npm start命令创建服务,在你本地创建了一个3000端口后的服务。

    在你运行完上面两行命令之后,他会自动帮你打开页面地址为http://localhost:3000的页面了。如下图:
    在这里插入图片描述
    这时,你可以打开桌面或你自己创建项目路径上的react项目文件夹。可以观察他的文件结构:
    在这里插入图片描述

    这样,你就成功创建了一个最简单的react项目了。
    d=====( ̄▽ ̄*)b!!!

    展开全文
  • 1,先创建一个文件夹用于存放项目2,运行cmd,路径选择到你创建的文件夹内3, npm install -g create-react-app create-react-app my-app cd my-app/ npm start...

    1,先创建一个文件夹用于存放项目

    2,运行cmd,路径选择到你创建的文件夹内

    3,  npm install -g create-react-app 
            create-react-app my-app 
            cd my-app/ 
            npm start

    展开全文
  • react中配置绝对路径

    2019-09-25 15:14:15
    react中 如果想使用例如img的东西 它不像vue里面直接拿过来使用 react则需要手动引入 但是当项目目录嵌套太深的时候 很容易出现错误 ...1. 在根目录下创建一个jsconfig.json文件(是根目录 而非src 相当于是和src...

    在react中  如果想使用例如img的东西 它不像vue里面直接拿过来使用 react则需要手动引入 但是当项目目录嵌套太深的时候 很容易出现错误 有没有什么简单的方式呢 那肯定会有的了 react官网里面其实也有告诉配置的 只是不细心的人可能找不到 说白点 就是配置成绝对路径 看看到底该怎么配置吧

    1. 在根目录下创建一个jsconfig.json文件(是根目录 而非src 相当于是和src同级的

    2.在里面添加配置(添加完成后 一定要记得重新启动项目 这就相当于修改了配置文件 不重启会报错的

    {
        "compilerOptions":{
            "baseUrl":"src"
        },
        "include":["src"]
    }

    3.页面引入 (它默认就是src 所以 只需要写绝对路径就行了

    展开全文
  • react配置之绝对路径

    2018-08-17 10:39:29
    绝对路径不多bb,简单的说就是,我们不再使用 ../ ../../之类的来表示路径位置了 直接上代码 我用的是react-crate-app脚手架    npm install react-create-app -g react-create-app my-react cd my-react ...

    绝对路径不多bb,简单的说就是,我们不再使用 ../  ../../之类的来表示路径位置了

    直接上代码

    我用的是react-crate-app脚手架

     

    1.  npm install react-create-app -g
    2. react-create-app my-react
    3. cd my-react
    4. npm install
    5. npm run ejecj 得到想要的了
    6. 再config 中的  webpack.config.dev.js  和  webpack.config.prop.js的文件中,分别编辑,如下
    extensions: ['.web.js', '.mjs', '.js', '.json', '.web.jsx', '.jsx'],
    alias: {
      
      // Support React Native Web
      // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
        'common': path.resolve(__dirname, '../src/common'),
        'components': path.resolve(__dirname, '../src/components'),
        'pages': path.resolve(__dirname, '../src/pages'),
        'static': path.resolve(__dirname, '../src/static'),
        'config': path.resolve(__dirname, '../src/config'),
    },
    plugins: [
      // Prevents users from importing files from outside of src/ (or node_modules/).
      // This often causes confusion because we only process files within src/ with babel.
      // To fix this, we prevent you from importing files out of src/ -- if you'd like to,
      // please link the files into your node_modules/ and let module-resolution kick in.
      // Make sure your source files are compiled, as they will not be processed in any way.
      new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
    ],

    我的src下得目录结构如下

    展开全文
  • React使用build生成项目:资源文件路径"/"修改为相对路径"."React使用build生成项目:资源文件路径"/...一直想学习一个前端框架,看中react很久,最近终于对它下手了。在踩了js加载及渲染顺序的坑之后,发布也遇到...
  • react 文件路径优化

    2018-12-13 17:54:34
    1 原有的引用路径 2 webpack 提供配置别名 无论在哪个路径下, 引用都可以这样 3 替换页面中的所有相对路径
  • 教程:从零开始使用webpack 4, Babel 7创建一个React项目(2019) 你会在本篇学到什么 如何安装配置webpack 如何安装配置babel 如何安装react 如何创建两种React Component --- 容器/展示组件 在html文件中...
  • react 配置路径别名

    2019-12-16 16:16:22
    const { addWebpackAlias, override, fixBabelImports } = require('customize-cra') const path = require('path') function pathResolve (pathUrl) { return path.join(__dirname, pathUrl) ...
  • React—引入图片 1、新建文件夹 src=》common=》images ...2、相对路径 Pic.js // 封装的一个组件 class Pic extends React.Component{ render () { return ( <div className="pic"> <img cla...
  • 需要先安装npm 创建项目 react-native init ReactDemo 通过npm安装最新版本 ...main目录下创建一个名为assets空文件夹,执行如下命令 react-native bundle --platform android --dev false --entry-file index...
  • react配置导入根路径

    2019-12-31 17:27:57
    react配置导入根路径需要在webpack中配置,但使用脚手架创建的项目,默认将babel、webpack等内容全部封装到react-scripts中,所以在这种状态下没有办法更改webpack中的内容 需要执行npm run eject解开react-scripts...
  • create-react-app 生成的项目看不到 webpack 相关的配置文件,需要先暴露出来,使用如下命令即可 npm run eject 修改配置文件 webpack.config.js resolve: { ... alias: { ... // 路径引用 @ '@': p...
  • 文章写时react版本16.13.1 1输入命令 npm run eject 在项目根目录下生成config目录 2在confilg下打开webpack.config.js文件找到如下位置 alias: { // Support React Native Web // ...
  • 如果你之前从未接触过React,你可能会对它的生态感到一头雾水。这可以理解,因为:1、React针对的是接受能力强的开发者和行业专家;2、Facebook仅将它实际生产中应用的框架开源了出来,因此它没有关注比Facebook量级...
  • 在 tsconfig.json中添加代码"baseUrl": "src", create-react-app只支持src或node_modules 可以把 ‘/’ 改成 src
  • 会出现一个命令提示:这是一个单向操作,确认操作后不可逆转/返回? 输入 y 回车 成功之后 在项目根目录出现 config 文件夹 2.打开 config 文件夹下的 webpack.config.js 文件 3.进行搜索 alias ,大...
  • 发现create-react-app打包后路径css、js文件饮用路径不正确,在sf上网友提出直接修改package.json的homepage值为'.'即可。create-react-app打包后会在引用路径上加上homepage的路径部分。...
  • react 项目创建 首先安装脚手架工具,create-react-app ...执行完成后一 react 项目就在指定的路径创建 react目录结构 react项目创建完成后的目录结构如图: 主要看 public 和 src 文件夹中的文件: p...
  • 步 下载react-app-rewired和customize-cra npm i react-app rewired customize-cra -D 第二步 下载 babel-plugin-import npm i add babel-plugin-import -D 第三步 修改package.json里的配置 "scripts": { ...
1 2 3 4 5 ... 20
收藏数 28,889
精华内容 11,555
FreeMarker template error (DEBUG mode; use RETHROW in production!): The following has evaluated to null or missing: ==> sidebar.items [in template "pc.ftl" at line 151, column 15] ---- Tip: It's the step after the last dot that caused this error, not those before it. ---- Tip: If the failing expression is known to legally refer to something that's sometimes null or missing, either specify a default value like myOptionalVar!myDefault, or use <#if myOptionalVar??>when-present<#else>when-missing. (These only cover the last step of the expression; to cover the whole expression, use parenthesis: (myOptionalVar.foo)!myDefault, (myOptionalVar.foo)?? ---- ---- FTL stack trace ("~" means nesting-related): - Failed at: #if (sidebar.items?size gt 0) [in template "pc.ftl" at line 151, column 9] ---- Java stack trace (for programmers): ---- freemarker.core.InvalidReferenceException: [... Exception message was already printed; see it above ...] at freemarker.core.InvalidReferenceException.getInstance(InvalidReferenceException.java:134) at freemarker.core.UnexpectedTypeException.newDesciptionBuilder(UnexpectedTypeException.java:85) at freemarker.core.UnexpectedTypeException.(UnexpectedTypeException.java:48) at freemarker.core.BuiltInsForMultipleTypes$sizeBI._eval(BuiltInsForMultipleTypes.java:496) at freemarker.core.Expression.eval(Expression.java:83) at freemarker.core.EvalUtil.compare(EvalUtil.java:113) at freemarker.core.ComparisonExpression.evalToBoolean(ComparisonExpression.java:62) at freemarker.core.ParentheticalExpression.evalToBoolean(ParentheticalExpression.java:35) at freemarker.core.ConditionalBlock.accept(ConditionalBlock.java:48) at freemarker.core.Environment.visit(Environment.java:330) at freemarker.core.Environment.visit(Environment.java:336) at freemarker.core.Environment.process(Environment.java:309) at freemarker.template.Template.process(Template.java:384) at org.springframework.web.servlet.view.freemarker.FreeMarkerView.processTemplate(FreeMarkerView.java:389) at org.springframework.web.servlet.view.freemarker.FreeMarkerView.doRender(FreeMarkerView.java:302) at org.springframework.web.servlet.view.freemarker.FreeMarkerView.renderMergedTemplateModel(FreeMarkerView.java:253) at org.springframework.web.servlet.view.AbstractTemplateView.renderMergedOutputModel(AbstractTemplateView.java:178) at org.springframework.web.servlet.view.AbstractView.render(AbstractView.java:316) at org.springframework.web.servlet.DispatcherServlet.render(DispatcherServlet.java:1370) at org.springframework.web.servlet.DispatcherServlet.processDispatchResult(DispatcherServlet.java:1116) at org.springframework.web.servlet.DispatcherServlet.doDispatch(DispatcherServlet.java:1055) at org.springframework.web.servlet.DispatcherServlet.doService(DispatcherServlet.java:942) at org.springframework.web.servlet.FrameworkServlet.processRequest(FrameworkServlet.java:1005) at org.springframework.web.servlet.FrameworkServlet.doGet(FrameworkServlet.java:897) at javax.servlet.http.HttpServlet.service(HttpServlet.java:634) at org.springframework.web.servlet.FrameworkServlet.service(FrameworkServlet.java:882) at javax.servlet.http.HttpServlet.service(HttpServlet.java:741) at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:231) at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:166) at org.apache.tomcat.websocket.server.WsFilter.doFilter(WsFilter.java:53) at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:193) at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:166) at com.alibaba.druid.support.http.WebStatFilter.doFilter(WebStatFilter.java:123) at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:193) at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:166) at org.springframework.boot.actuate.web.trace.servlet.HttpTraceFilter.doFilterInternal(HttpTraceFilter.java:90) at org.springframework.web.filter.OncePerRequestFilter.doFilter(OncePerRequestFilter.java:107) at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:193) at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:166) at org.springframework.web.filter.RequestContextFilter.doFilterInternal(RequestContextFilter.java:99) at org.springframework.web.filter.OncePerRequestFilter.doFilter(OncePerRequestFilter.java:107) at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:193) at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:166) at org.springframework.web.filter.FormContentFilter.doFilterInternal(FormContentFilter.java:92) at org.springframework.web.filter.OncePerRequestFilter.doFilter(OncePerRequestFilter.java:107) at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:193) at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:166) at org.springframework.web.filter.HiddenHttpMethodFilter.doFilterInternal(HiddenHttpMethodFilter.java:93) at org.springframework.web.filter.OncePerRequestFilter.doFilter(OncePerRequestFilter.java:107) at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:193) at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:166) at org.springframework.boot.actuate.metrics.web.servlet.WebMvcMetricsFilter.filterAndRecordMetrics(WebMvcMetricsFilter.java:117) at org.springframework.boot.actuate.metrics.web.servlet.WebMvcMetricsFilter.doFilterInternal(WebMvcMetricsFilter.java:106) at org.springframework.web.filter.OncePerRequestFilter.doFilter(OncePerRequestFilter.java:107) at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:193) at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:166) at org.springframework.web.filter.CharacterEncodingFilter.doFilterInternal(CharacterEncodingFilter.java:200) at org.springframework.web.filter.OncePerRequestFilter.doFilter(OncePerRequestFilter.java:107) at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:193) at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:166) at org.apache.catalina.core.StandardWrapperValve.invoke(StandardWrapperValve.java:200) at org.apache.catalina.core.StandardContextValve.invoke(StandardContextValve.java:96) at org.apache.catalina.authenticator.AuthenticatorBase.invoke(AuthenticatorBase.java:490) at org.apache.catalina.core.StandardHostValve.invoke(StandardHostValve.java:139) at org.apache.catalina.valves.ErrorReportValve.invoke(ErrorReportValve.java:92) at org.apache.catalina.core.StandardEngineValve.invoke(StandardEngineValve.java:74) at org.apache.catalina.connector.CoyoteAdapter.service(CoyoteAdapter.java:343) at org.apache.coyote.http11.Http11Processor.service(Http11Processor.java:408) at org.apache.coyote.AbstractProcessorLight.process(AbstractProcessorLight.java:66) at org.apache.coyote.AbstractProtocol$ConnectionHandler.process(AbstractProtocol.java:834) at org.apache.tomcat.util.net.NioEndpoint$SocketProcessor.doRun(NioEndpoint.java:1415) at org.apache.tomcat.util.net.SocketProcessorBase.run(SocketProcessorBase.java:49) at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1149) at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:624) at org.apache.tomcat.util.threads.TaskThread$WrappingRunnable.run(TaskThread.java:61) at java.lang.Thread.run(Thread.java:748)