When it comes to using react with yeoman - javascript

There are a ton of packages out there that have this all bundled up but I dont like the way they set up the projects and such so I was reading the Reactjs docs on installing with npm and my confusion is:
After installing it using npm install react or adding react to
package.json
Do I add this to the "devDependencies": {} or ...
for the require statement to work, do I need to include requirejs?
Can I just do grunt serv to start everything and auto compile the jsx or do I need to do this? (it seems like that might be answered for me ..... but how can I get it to auto compile the jsx when I run grunt serv)
I ask these questions and state I don't like the existing yo ... commands for this because they don't play nicely with bacbone.js So I was going to set this up my self. if there are any repos out there for yeoman that do this for me please point me to them.

dependencies vs devDependencies: for npm package.json, devDependencies are mainly used for the tooling around working on the project itself: testing tool chain and project building modules, for example. Things you'd often see in there: Mocha, Grunt, etc. So mostly for repo contributors and alike. As a consumer of React, you'd put it in dependencies, which are for modules that your code actually needs in order to work.
require isn't for requirejs. The naming clash is unfortunate. require() is part of CommonJS. Node uses CommonJS. Browserify too. Here, it's assuming that you're using Browserify, or maybe doing server-side React with Node.
I'm not sure what you've set up to use with grunt serve. There's nothing magical that makes it work by default. You do need to do what the link said. The --watch option will look for changes to your files and auto compile the jsx to js.
Hope that helps!

Related

Workflow to use a sub-module typescript written module into a non-typescript module?

I'm having a private typescript module that is a dependency of another major project. This dependency is achieved by having the typescript repository as sub-module and installed using npm to the local sub-folder. The typescript module can compile into JavaScript on its dist folder and by doing so the major module that consumes it can make use of it without issues. But here is my problem, the dist folder isn't committed to the typescript repository.
What should be the workflow to follow in order to consume this typescript module from a JavaScript-only major project? The best I can think at this moment is to instruct someone, or something, to run the $ tsc command before using the major project but it's "annoying" since it isn't a transparent step. If this is a weird approach, what would be a more ideal approach? Thanks everyone.
You have a couple of options.
Assuming you're not planning to have a private npm registry using e.g. Verdaccio you can simply commit the dist folder. This is definitely the simplest option and it's not completely unheard of, I'd probably go with that option.
This solution is actually quite unusual, but it's pretty clever and it works. You could add a postinstall script in package.json of your TypeScript package that would run tsc after installing the package. The downside is that you'd have to add typescript as your dependency, which is not ideal (it should generally be a dev dependency, in which case it wouldn't be installed in the project using the package), but for some it might not be a big deal at all.
Instead of installing the package, you could use npm link and then have a script in your main project that would compile it. You'd have to run it every time something changes in that package, though. You could also append it to your npm start script, so it runs before it, e.g. "start": "npm compile-package && webpack" (assuming your current start script is "start": "webpack"). It doesn't scale very well though.
If your Javascript project uses Babel (and I'd assume so considering you said it's a "major" project) you could change its config so it transpiles Typescript for you using #babel/plugin-transform-typescript, however it can be a bit complicated, IIRC e.g. projects created with create-react-app by default don't recompile the code from node_modules.
There are probably more solutions, but I'd probably go with 1 or 2.

Do devDependencies affect bundle size?

I looked hard, and couldn't find a straight answer to this question.
Do the packages I add as devDependencies actually end up in the production bundle JS file and thus affect its size? Or is it only the dependencies that go into the bundle?
No it will not affect your bundle size because those package are only using in development mode. Let's take an example package like typescript
devDependencies: {
"typescript": "~3.2.5"
}
So I only need to have typescript compier, linting just in dev mode. And I'm not actually import typescript in my project because it's only use for dev mode. So if you are using webpack and you wont import typescript anywhere then in your project webpack will you tree shaking to eliminate code that don't need for production build so the bundle will not affect.
The answer is not that easy as might look. Here is clarification: https://github.com/webpack/webpack/issues/520#issuecomment-174011824
And adding relevant snippet here:
A browser app built by webpack has no runtime node dependencies, and thus all frontend dependencies should be listed as devDependencies. The dependencies vs devDependencies naming convention stems historically from node being a server side package manager, which was abused into a frontend package manager, and this is why the fields have names that are counter-intutive when applied to frontend dev, and is why every project ever is getting this wrong. It is as far as I can tell harmless to list frontend dependencies under dependencies, but it is wrong.
I hope this answers your question.

Converting React component to a single js file to integrate it with a blank html

A react component is developed using JSX. How to convert it to browser understandable JS code and minified to 1 js file so that it can be included as a single script tag in html ?Am very new to Js world and heard of babel and webpack.not sure how to use it and covert it to the same.
I got things generated after react-scripts build.but images are not serving if i deploy them in weblogic as static
For converting jsx into browser runnable js code, you would have to use babel. You can use babel-preset-react for this(via configuring .babelrc).
Babel Preset for React
Complete steps:
Run npm install babel babel-cli babel-preset-react
Define .babelrc at project root level, with following content
{
"presets": ["react"],
}
Run babel {jsxFile}.jsx --out {jsFile}.js
Am very new to Js world and heard of babel and webpack not sure how to use it
The statement above tells me that setting up npm build pipelines might best be avoided.
So assuming you have the component in jsx and you would like to use the javascript version, you will need to "convert" it. If it is a component that doesn't change quite a lot, you can take a look at the online babel.io repl (this is recommended by the official documentation site as well).
However, this approach can be tedious if your component changes frequently. I can highly recommend create-react-app for development. It is an opinionated toolkit which hides away webpack and babel configuration, but at the same time, their opinions are well documented and work for many general use cases.
Edit
From your comments, it seems you are already using react-scripts, then the most probably problem I see is that you perhaps forgot to specify the homepage property in your package.json (see relevant documentation) By default CRA assumes your static assets are hosted at server root, I assume you are not deploying your WAR in ROOT context, so you need to provide a static location.
I have a similar setup, where I need to package my site built with react inside a war file, I have the following setup:
in package.json
"homepage": "/<webapp_context>/build"
Then with gradle, I copy the build folder in its entirety to the WAR file (same level as WEB-INF).
This instructs react-scripts to put relative paths in all the static assets it publishes (such as CSS, js and images) and the imports then work.

Installing Babel to use with React and JSX

I'm new to React and Babel and JSX. I'm trying to figure out how to install Babel so it will "do the right thing" with React and JSX in the browser.
However, the documentation for Babel assumes that I already know the entire NPM/Node + many other package managers + frameworks ecosystem, which I don't.
Is there any documentation out there for someone who simply wants to use Babel to compile JSX for a React application? I want to learn how to do it on my machine (not on a hosted site) but it just seems like there is zero beginner documentation out there.
It also seems like various versions of these pieces no longer work together so I'm a bit confused about what I need.
So far I have downloaded React 16.2, and used npm to install Babel with
npm install --save-dev babel-plugin-transform-react-jsx
and have a node_modules/ folder in my folder where Babel is (seems to be version 6.24.1, no idea if that's the right one for React 16.2), and where I'd like to put my HTML and JavaScript.
But now I'm stuck. I have no idea how to get Babel to do what I need. I'd like to just write some HTML with some React + JSX in it and have the "right thing" happen, but cannot find any documentation as to how to do that.
Thank you!
You should start your project with Create React App (CRA).
It's a React app initializer made by the React team. It makes all the setup for you (including Babel and Webpack configurations) and add some really nice features to your development environment.
If you don't want to use CRA, you will need to install:
babel-core
babel-preset-env
babel-preset-react
Then create a file .babelrc in the root of your project containing:
{ "presets": ["env", "react"] }
Then install and configure Webpack to run the Babel transforms.
(Or you could also run Babel manually with babel-cli).
The React documentation slightly addresses the Babel setup problem here.
They also suggest to use CRA here.
Ah, I found an answer in a Beginner's Guide to React at https://egghead.io/courses/the-beginner-s-guide-to-reactjs.
Apparently there is a standalone Babel compiler you can just link to in the head of the document, along with the links to ReactJS and it "does the right thing". Yay! Here are the links I'm using:
<script src="https://unpkg.com/react#16.2.0/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom#16.2.0/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone#6.26.0/babel.min.js"></script>
In the script tag that contains the ReactJS and JSX code, you must use type=text/babel:
<script type="text/babel">...</script>
I hope this helps other people starting out with React and JSX.
I'm guessing I'll eventually need to learn how to use NPM, NPX, Node, Webpack, and Babel (and possibly other tools) to run production ReactJS code, but for now I'm hoping this will allow me to learn ReactJS without having to worry about all that.
As pointed out in the React website (about using a script to add JSX functionality):
This approach is fine for learning and creating simple demos. However, it makes your website slow and isn’t suitable for production.
So it suggests instead to use a JSX preprocessor named Babel (it works more or less like a CSS preprocessor would work, so translates JSX into javascript).
The only requirement is to have Node.js installed, so that you could download Babel and add it to your project as a npm.
Below the link to follow all the instructions:
Add react to website
This is not an exact answer to your exact question, but it may help some people who end up here. Forget Babel, skip the extra compilation step and the project bloat, and:
Use something like React.createElement():
React.createElement('div', {className="container"},
[
React.createElement('h1', {key: "title"}, 'Greetings'),
React.createElement('p', {key: "para"}, 'To the newcomer, ' + this.props.name + '!')
]
);
Or use preact:
h(
'div',
{ id: 'foo' },
h('span', null, 'Hello!')
);
In either case, nest elements to any depth desired.

VS2015 Convert javascript to typescript and node modules

I developed a javascript web app with npm and webpack. Now I converted all those .js files to .ts by using the powershell command stated here. The succeeding actions in the link is using grunt; I want to directly use VS2015 Typescript project but I cannot find any reference on the net about what to do with the node_modules and how I can fully convert all my package.json and webpack into Typescript project. The Task Runner Explorer in VS2015 only supports Grunt and Gulp tasks.
I recommend going with the "bare-foot" solution first. I'd rely much less on VS2015. It's maybe the best IDE available, but JS and TS projects can be handled from command line without relying on the magic of the IDE. This way you can gain a deeper understanding of these technologies and I think now it would be easier too.
I recommend the following steps:
create a tsconfig.json in the root folder. Read around, there's plenty of info available. Just one hint: use 'filesGlob' to specify the files to compile.
use TSD to get the .d.ts files of the libs you use from DefinitelyTyped. You might create, or at least just declare, the missing packages.
run 'tsc --project .' from command line to compile everything. You'll see the errors that are to be solved.
I'm typing from mobile, I can edit the codes tomorrow. Have any comments?

Categories