I am totally new to React JS or any given server-side technology. And now, I want to learn how to develop in React JS.
Introduction
I started with React JS tutorials on official website. Now, I am trying to import React toolbox or any other third-party component into my JSX code. But, I am facing the problem of uncaught exception error: require not defined.
When I searched about it, I came to know about various build mechanisms(browserify, webpack, gulp), to which I was totally new(again). After reading about these, and seeing some examples, I was able to let my browser compile require() statements written in my .jsx files.
Problem
What I am trying to do is:
Write a .html file.
Start it via my server.js file.
Add a <script> tag in it, which will inject my .jsx code into my .html file.
The examples that I have seen so far (1, 2, and some other...) load a .js file in the beginning and write their .html code in .jsx files (render() function).
Question
Is it possible to load a .html file from server.js and use .jsx from a <script> tag in that .html file? Something like this:
<html>
.
.
<body>
<div id="container"></div>
<script src="path_to_reactjs_file"></script>
</body>
</html>
I am sorry if this sounds like totally dumb question, but because of being totally new to this technology, I am not able to understand how I should go about it.
Any help would be appreciated.
Sounds like there might be an issue with file name extensions, Browserify only understands .js and .json extensions, unless you tell it otherwise.
$ browserify --extension jsx src/main.js > bundle.js
Babel with the right transforms will automatically do this for you as part of its module transpilation.
$ browserify src/main.js -t [ babelify --presets [ es2015 react ] ] > bundle.js
Note that this assumes your entry point has a .js file extension, if it was .jsx you'd have to set the extension type.
This config can be simplified by adding the config to your package.json
{
babel: {
presets: [ 'es2015', 'react' ]
}
},
{
browserify: {
transform: 'babelify'
}
}
Without bundling, you can not include jsx to html directly, but you can create components without jsx syntax (use plain js) and it will work.
first thing to note...
Browser can understand only HTML, CSS and plain javascript.
If you are providing JSX to browser, it fails to parse it. So you need to use a package bundler such as webpack. this converts all your JSX, typescript, Sass files into javascript(bundle.js) file. You can give this bundle.js file in the .html file
Related
I have code editor (CodeMirror v6) inside my ReactJS app and want to format code post edit with prettier. How to run prettier in browser?
Looking for something like:
prettier.format(code)
That's what found out after some test and fails:
There is Standalone package of prettier which does not require anything from NodeJs.
It has some limitations:
It only formats the code and has no support for config files, ignore files, CLI usage, or automatic loading of plugins.
https://prettier.io/docs/en/browser.html
Also inside prettier.format selected plugins and parser must be set manually.
Inside index.html, add standalone prettier + babel parser, which is enough to run prettier from a global variable:
// JS script, should be run after <script> tags load
const formatted = prettier.format("console.log( 'ok')", {
parser: "babel",
plugins: prettierPlugins,
});
console.log(formatted);
<!-- HTML -->
<script src="https://unpkg.com/prettier#2.6.2/standalone.js"></script>
<script src="https://unpkg.com/prettier#2.6.2/parser-babel.js"></script>
prettierPlugins was also exposed from these script tags, it is not my custom code.
I have built my react js app with create-react-app configs and it works fine in development build of React.
I built that with npm build command and now i have build folder.
this web page is static (server-less), Now I want to know how to use that and where put files in Cpanel.
After the bundle realized by webpack, you can check the transpiled and minified version inside the build folder. You should upload all the content to your public_html or another folder.
And the meaning of server-less is totally different than you're using. Check this article to understand what it is: What is serverless.
I do not use CRA boilerplate since i have my own but in your case, you should find where your js bundle is. You can find the bundle location in the webpack config. Then append that to your html somehow like this:
<div id="root"></div>
<script src='your-js-bundle'></script>
Assuming that somewhere in your code, you are appending your js code into a div like this:
const element = <h1>Hello, world</h1>; // assuming element is your entry point
ReactDOM.render(element, document.getElementById('root'));
That works if its just simple react project your working on (No SSR and such)
I'm working on a project that is built as an isomorphic React app using Redux, and webpack as well. I'm new to all of these technologies, and I would like to load 2 files into webpack for syntax highlighting in one of my react components.
In addition to these technologies the project is also built using React Helmet to manage the document head.
Having not used webpack all that much before I tried adding the reference to my two files in the head and body blocks as such:
<script src="path/to/file/fileName.js" type="text/javascript"></script>
however that throws the following error:
Uncaught SyntaxError: Unexpected token <
I've also tried adding it to my React Helmet config as a script...
script: [
{"src": "path/to/file/fileName.js", "type": "text/javascript"}
],
...but I'm getting the same error
How can I load this file into my webpack bundle so it is available across the app without it having to be required by a specific component?
I think you can use import or require in your code and webpack add that file to bundle. File will be AMD or Common.js module.
any cordova application is just a native web view and a www folder that contains the entire functionality in HTML javascript and css, so the app is entirely exposed, how can i make it as difficult as possible for anybody to read the app source code?
Yes you can. There is a cordova-plugin to crypt the html, js, and css files. You find it here: Cordova crypt file plugin
You are really concerned about it my advice is use a professional service to protect your code. E.g. Jscrambler
I found it, the problem with angular when got minified is that minification breaks dependency injection.
one solution is to use the string injection based syntax that maps every injected parameter to a string that never gets affected by minification.
example:
angular.module('app', []).controller(['$scope', function($scope) {
//code
}]);
another solution, is to use ngAnnotate i prefer to use it with gulp task runner
var gulp = require('gulp');
var ngAnnotate = require('gulp-ng-annotate');
var concat = require('gulp-concat');
var uglify= require('gulp-uglify');
gulp.task('task1', function () {
return gulp.src('src/js/*.js')
.pipe(concat('bundle.js'))
.pipe(ngAnnotate())
.pipe(uglify())
.pipe(gulp.dest('dist'));
});
Another good feature is to hide the location paths of your important scripts. I found a great npm plugin for this https://www.npmjs.com/package/location-hide
It turns
<script src="test/folder/sample.js" type="text/javascript"></script>
<link href="test/stylesheet/perfect-scrollbar.css" rel="stylesheet">
into
<script src="TNANIuTOLZfmLYwaPDIYhcZDVOWKodqYhysaTeQHFPDhYlDLCOtxZqYmkKAhaSwSgbsYOWlpBzVSBtMZKSfwRqvPSqWVlBBuzHR" type="text/javascript"></script>
<link href="gyXeFnOEvZbgTjLvdZRnsyrfhaXqffkDjcdATTouqpIenCalLRXKamuXEtiKbPGCsNrdQIaqTMTNWsLyLFuxygKytaruWzSjKYMq" rel="stylesheet">
And it generate new jquery include codes like this to include your scripts with javascript in a external file
$('[src=\'TNANIuTOLZfmLYwaPDIYhcZDVOWKodqYhysaTeQHFPDhYlDLCOtxZqYmkKAhaSwSgbsYOWlpBzVSBtMZKSfwRqvPSqWVlBBuzHR\']').attr("src", "test/folder/sample.js")
$('[href=\'gyXeFnOEvZbgTjLvdZRnsyrfhaXqffkDjcdATTouqpIenCalLRXKamuXEtiKbPGCsNrdQIaqTMTNWsLyLFuxygKytaruWzSjKYMq\']').attr("src", "test/stylesheet/perfect-scrollbar.css")
Also I would suggest you that you include all of your external javascript codes in 1 single js file. This file you place in the root of your index file that you can make this
<script src="./allinone_external_file.js" type="text/javascript"></script>
Then make right htaccess that nobody can acces this file. You can also make a fake import script for the source code that every body can see. But this file is only a redirect for the real external js file. you make this multiple times as example + use other obfuscation tools. This will protect you from people searching exploits with your javascript codes. I know its no big deal and maybe you can see the jquery include codes if you know how. But anyway it´s a great protection.
I advise to use babili library (https://github.com/babel/babili)
and form your app so that distribution using electron is made from obfuscated code not from source.
For example package.json contains scripts like this:
"main": "release/app.js",
"scripts": {
"debug": "node ./node_modules/electron/cli.js ./app/app.js",
"build": "./node_modules/.bin/babili app -d release -D",
"test": "./node_modules/.bin/electron ./release/app.js",
"pack": "./node_modules/.bin/build --dir --ia32"
}
.babelrc
{
"presets": ["es2015"]
}
BTW babel supports also ES6/7 obfuscation
Is it possible to use react with ReactRouter, without using browserify or webpack.
I am following the documentation from http://rackt.github.io/react-router they require react and react-router (require('react-router');). If I use browerifly my generated bundle is about 1MB filesize, which sounds like a lot.
So is it possible to get reactrouter working with including compiled JS from a CDN like https://cdnjs.cloudflare.com/ajax/libs/react-router/0.13.3/ReactRouter.js, instead of bundle all requirements by myself ? If i try to make it work with a CDN, I get an error that Route is not defined. But it looks like it is exported in the cdn file.
I would like to compile my JSX/ES6 react components include the ReactRouter and react JS-files from a cdn and only bundle my components into a new js file.
Is this possible or is browserify and webpack the right way to setup the project ? (I looked at several github repos). I got some doubts because there is no installation guide on http://rackt.github.io/react-router/
like this pseudo html:
<head>
CND :include react, react-router
my code combinded.js
</head>
When you're using the prebuilt version from the CDN, the library is exported onto window.ReactRouter. So, Route is defined on window.ReactRouter.Route.
Since React Router also depends on React, using the CDN/browser build will also require that React is available on window.React.
That said, the CDN version you linked to is, itself, generated with webpack, so I don't expect that you'd gain any file size improvements. You might look into minification/dead code elimination on your browserify bundle to see if it decreases the file size.
One additional info I want to share is the possibility to use externals (https://webpack.github.io/docs/library-and-externals.html) in webpack config.
I use it as following:
externals: {
"react": "React",
"react/addons": "React",
"reflux" : "Reflux"
}
this results in a smaller bundle and you can use react from a CDN as asked in my question. This also decreases the buildtime with gulp.