I want to put React app files in the React Native app.
I used React Native Web to support React Native components in the React app.
Last step I want to put all files from React App folder to React Native App folder.
the difference is in Package.json
React Package.json :
{
"name": "appname",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-scripts": "1.0.10"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
React Native Package.json:
{
"name": "appname",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"react": "16.0.0-alpha.12",
"react-native": "0.47.1",
"react-native-windows": "0.47.0-rc.5"
},
"devDependencies": {
"babel-jest": "20.0.3",
"babel-preset-react-native": "2.1.0",
"jest": "20.0.4",
"react-test-renderer": "16.0.0-alpha.12",
"rnpm-plugin-windows": "^0.2.7"
},
"jest": {
"preset": "react-native"
}
}
So is it possible I can merge the two packages together?
For your native app you can use package.json from React Native, no need to merge. You don't need "react-dom" and similar libs in native app. If your components are all from React Native for Web, there will be no problem running them on native.
Related
I am new on React. I have installed jqwidgets and node-sass packages.
I run: npm install --save node-sass
In JS component file:
import './style.scss';
in style.scss:
.welcome{
background-color: firebrick;
}
Then I open developer tools on browser style.scss I see:
module.exports = __webpack_public_path__ + "static/media/style.7388d000.scss";
//////////////////
// WEBPACK FOOTER
// ./src/components/Welcome/style.scss
// module id = ./src/components/Welcome/style.scss
// module chunks = 0
Why sass style code is not displaying?
packages.json:
{
"_from": "https://github.com/jqwidgets/my-app2/tarball/master",
"_id": "my-app2#1.0.0",
"_inBundle": false,
"_integrity": "sha512-TzCrV6rvvYS5En18r6qrM2T7Rz24DQomJCLmQ2j/V08534YPijH5CjTAKJcDI8vNHM+HgyNS3YFxDVd0mHWSqg==",
"_location": "/my-app2/my-app2",
"_phantomChildren": {},
"_requested": {
"type": "remote",
"raw": "my-app2#https://github.com/jqwidgets/my-app2/tarball/master",
"name": "my-app2",
"escapedName": "my-app2",
"rawSpec": "https://github.com/jqwidgets/my-app2/tarball/master",
"saveSpec": "https://github.com/jqwidgets/my-app2/tarball/master",
"fetchSpec": "https://github.com/jqwidgets/my-app2/tarball/master"
},
"_requiredBy": [],
"_resolved": "https://github.com/jqwidgets/my-app2/tarball/master",
"_shasum": "7d2a1b35e0af075c74da15c045aaddabd7a70e35",
"_spec": "my-app2#https://github.com/jqwidgets/my-app2/tarball/master",
"_where": "C:\\Users\\Evoiu\\AppData\\Roaming\\npm\\node_modules\\my-app2",
"bundleDependencies": false,
"dependencies": {
"axios": "^0.18.0",
"react": "16.4.1",
"react-dom": "16.4.1",
"react-router": "^4.3.1",
"react-router-dom": "^4.3.1",
"react-router-redux": "^4.0.8",
"react-scripts": "1.1.4"
},
"deprecated": false,
"description": "Please refer to its documentation: - [Getting Started](https://github.com/jqwidgets/my-app2/blob/master/README.md#getting-started) - [jQWidgets React Documentation](http://www.jqwidgets.com/reactjs-components-documentation/)",
"name": "my-app2",
"private": true,
"scripts": {
"build": "react-scripts build",
"eject": "react-scripts eject",
"start": "react-scripts start",
"test": "react-scripts test --env=jsdom"
},
"version": "1.0.0",
"devDependencies": {
"node-sass": "^4.11.0",
"sass-loader": "^7.1.0"
}
}
I spend so much hour, Idont know where is problem... :(
If I create new project with only node-sass, then its working. Deam it why its not working with jqwidgets.
https://www.jqwidgets.com/reactjs-components-documentation/documentation/create-jqwidgets-react-app/index.htm
have you install jqwidgets-react-app with this?
I haven't tested it myself.
I'm new at React.JS and I have made some sample app to test it, in my site I've already have the call to bootstrap CDN so I don't need to call bootstrap again in my React APP, but when I run 'npm run build', in the output, bootstrap code is appended to the css file, how can I disable bootstrap in my project.
Thank you...
UPDATE:
This is my package.json file, I've already remove the call from this file, but it still appending bootstrap.
{
"name": "new-home",
"version": "0.1.0",
"private": true,
"homepage" : "home/newHome/build",
"dependencies": {
"#types/react-slick": "^0.23.2",
"react": "^16.5.2",
"react-dom": "^16.5.2",
"react-scripts": "1.1.5",
"react-slick": "^0.23.1",
"reactstrap": "^6.5.0",
"slick-carousel": "^1.8.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
Solved,
In index.js I needed to remove the import call to bootstrap, in my case I removed but I recommend just comment it.
Thanks everyone...
If you have not Ejected(which isnt recommended for newer react users) than you may not be able to see it in your package.json file, but on eject you will see it in there.
From react application (App.js ) imported jaeger-client.
import jaegerClient from 'jaeger-client'
Got exception 'TypeError: _fs2.default.readFileSync is not a function' from following line of /node_modules/jaeger-client/dist/src/thrift.js:168
source: _fs2.default.readFileSync(_path2.default.join(__dirname, './jaeger-idl/thrift/jaeger.thrift'), 'ascii')
Trying to solve it. Thanks for any help.
Complete package.json is like below
{
"name": "calculator",
"version": "0.1.0",
"private": true,
"homepage": "http://ahfarmer.github.io/calculator",
"devDependencies": {
"gh-pages": "^1.1.0",
"react-scripts": "^1.0.17"
},
"dependencies": {
"ajv": "^6.4.0",
"ajv-keywords": "^3.1.0",
"big.js": "^5.0.3",
"bufferutil": "^3.0.3",
"fs": "0.0.1-security",
"github-fork-ribbon-css": "^0.2.1",
"hexer": "^1.5.0",
"jaeger-client": "^3.10.0",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-tracing": "^0.1.5",
"thrift": "^0.11.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"deploy": "gh-pages -d build"
},
"eslintConfig": {
"extends": "./node_modules/react-scripts/config/eslint.js"
}
}
Forked from https://github.com/ahfarmer/calculator and I am trying to trace every user action ( button press ). To test tracing from react.js application.
node-jaeger-client currently doesn't run in the browser. There is ongoing work to make jaeger-client browser friendly. This issue: readFileSync is not a function contains relevant information to why you're seeing the error message. Essentially, you're trying to run jaeger-client (a nodejs library) using react-scripts which doesn't contain the modules that jaeger-client needs.
Not jaeger, able to send traces to zipkin server, using zipkin-simple.
Related code is in repository https://github.com/debmalya/calculator
import zipkinSimple from 'zipkin-simple'
const zipkinTracerSimple = new zipkinSimple({
debug: true,
host: "localhost",
port: "9411",
path: "/api/v2/spans",
sampling: 1.0,
})
var zipkinSimpleTraceData
zipkinSimpleTraceData= zipkinTracerSimple.getChild(zipkinSimpleTraceData);
zipkinSimpleTraceData =
zipkinTracerSimple.sendClientSend(zipkinSimpleTraceData, {
service: '<service_name>',
name: "<span_name>"
})
I got an error on my browser window "Cannot read property 'string' of undefined" when i import module (import { Button } from 'react-lightning-design-system'), even i am not using this module.
//package.json
{
"name": "demo",
"version": "0.1.0",
"private": true,
"dependencies": {
"history": "^4.7.2",
"prop-types": "^15.6.0",
"react": "^16.0.0",
"react-dom": "^16.0.0",
"react-lightning-design-system": "^2.4.0",
"react-redux": "^5.0.6",
"react-router-dom": "^4.2.2",
"redux": "^3.7.2"
},
"devDependencies": {
"react-scripts": "1.0.14"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
Given that it's a PropTypes issue I'm guessing it's a React v15 vs React v16 issue (i.e. you're using one version of React, but that module requires the other version). Check the dependencies.
Probably gonna need some more info then just an out of context error message though
Using react-codemon, run on your project directory
jscodeshift -t react-codemod/transforms/React-PropTypes-to-prop-types.js myapp/
This will resolve updating proptypes for your source code and any node modules.
Re-installing node modules will require running the command again it seems.
I'm trying to implement react-navigation into an app made using create-react-native-app. The problem is after installing the npm module (or any other) nothing works. I get build error like undefined is not an object (evaluating 'ReactPropTypes.string').
Googled and followed issues on github and still haven't found a solution. Could some one help me out please?
package.json
{
"name": "TestApp",
"version": "0.1.0",
"private": true,
"devDependencies": {
"jest-expo": "~1.0.1",
"react-native-scripts": "0.0.31",
"react-test-renderer": "16.0.0-alpha.6"
},
"main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
"scripts": {
"start": "react-native-scripts start",
"eject": "react-native-scripts eject",
"android": "react-native-scripts android",
"ios": "react-native-scripts ios",
"test": "node node_modules/jest/bin/jest.js --watch"
},
"jest": {
"preset": "jest-expo"
},
"dependencies": {
"expo": "^17.0.0",
"react": "^16.0.0-alpha.6",
"react-native": "^0.45.0",
"react-navigation": "^1.0.0-beta.11"
}
}
yarn v0.24.5
npm v3.10.10
Mac OSX Sierra 10.12.5
It looks like a version mis-match between react and react-native. Installing react-native#"0.45.1" with react#"16.0.0-alpha.12" fixed this for me.