Started to look at ReactJS and noticed that the latest version of ReactTS (typescript) 0.13.3, and the ReactJS version 0.14.0.
Question - are there any differences between versions 0.13.3 and 0.14.0?
Is it possible to join without restrictions ReactJS V0.14.0 + ReactTS V0.13.3?
There are a big changes in 0.14. Main change is splitting code base into two packages: main react part and react dom library, so looks like it's impossible to make these different versions working together.
You can read all changes here
Related
Are React, ReactJS and React.js different names for the same thing?
If they are different, what are the differences?
React = react = react.js = reactjs = ...
They all refer to the same JS library.
As Mentioned in their website:
React is a JavaScript library for building user interfaces
From what I know, .js and JS suffixes are a common thing in JavaScript world. Since React is a general world, sometimes they call it ReactJS to show it's a JS library.
Other examples are Next.js, Editor.js, Express.js, Node.js and so on...
Also you can see the website is reactjs.org, but it's called React in the page.
React is a utility package for UI implementation build by javascript.
So the base name is "react", but you can express its language more specifically by attaching js to it and make it bound to the web.
Also, it makes it distinguishable from other libraries called ReactNative.
There is no package such as react.js or ReactJs on npm and the main package is the "react" itself.
These named you've mentioned, might be for the focus on the core name itself, preventing collision from other packages with react itself
There is reactphph but the react keyword is using as a reference to this react not react in any other language or something.
So I need to update react, react-dom in order to update nextjs version to 11. React docs says that the new jsx transform approach is backwards compatible, though I met such problem after updating to react 17.0.2. Any file using jsx fails to compile with Can't resolve 'react/jsx-dev-runtime', no matter if I leave the import React from 'react', or remove it as intended after updating to react ^17.
I tried updating #babel/preset-react, using latest #babel/plugin-transform-react-jsx, same problem. The only thing I've found in a similar question topic here is adding /** #jsxRuntime classic */ to the top of the file, which obviously doesnt solve the problem for the whole application (perhaps there might be a way to make such directive global but even then - I would like to be able to use the new and more optimised jsx compiling)
Haven't been able to google exactly my case and any existing suggestions for similar cases didn't help.
To summarise - I need to either make my app work without importing react itself (https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html) or at least to be able to use the old way of jsx compiling with this new react version.
Any thoughts?
have very simple sample app which build Create React App + Styled-Components to prove this issue. But I have real big application which I am facing this issue which I am going to explain it below.
I would like to pre-render this app with Rendertron for SEO/GoogleBots and etc. But the problem is when I build PRODUCTION version of React App which use Styled-Components . all the style will be missing on static version which Rendertron produced, but from other side if I try the same workflow with dev-server of app , everything looks fine .
So far I know there is different on PROD version and DEV version of my application when I render it with Rendertron . But I am not sure what cause this issue and how I can fix this issue .
I am looking for solution or idea which can help me to solve this issue .
Here is my sample code which I peppered for test .
https://github.com/AJ-7885/test-styled-component-with-rendertron
Here is screen shot from different version of Rendered version by Rendertron base on PROD or DEV version of the same application .
enter image description here
After a lot of searching around, I finally found out the reason. The Styled Components library uses something called the "Speedy mode" to inject styles on production. This makes the styles bypass the DOM` and be injected directly inside the CSSOM, thus, appearing in the inspector, but totally invisible on the DOM.
Fortunately, Styled Components 4.1.0 came with a fix for this issue! Now you can set a global variable called SC_DISABLE_SPEEDY to true in order to disable the Speedy mode and get the styles to appear on Production as well.
Reference: https://www.styled-components.com/releases#v4.1.0
But the only part I am not sure , how to set disable this Speedy Mode in Create-React-App without Ejecting , Dose any body has any idea ?
You need to render your styles on the server side and inject those styles in your pre-rendered react app. Styled-components explains how to do that here: https://www.styled-components.com/docs/advanced#server-side-rendering
Also, I'd recommend using react-snap for pre-rendering since that is recommended by the Create React App docs. react-snap seems to be more of a React-specific solution that may be easier to implement, especially with styled-components.
I've been trying to get Parcel Bundler to code split a ReactJS project for a while with no success, this project also used TypeScript, ReactRouter and MobX for its state management.
I've been meaning to put a boilerplate sample together and ask for help here for a while but not got round to it.
After a quick google earlier today, I came across a ready made boilerplate on Github which uses the same setup and also does not code split...
https://github.com/wenpengfei/parcel-typescript-react-boilerplate
Once compiled and ran, it just ends up with one big .js file in the dist folder, the idea behind code splitting is to create several smaller .js files per 'area' of the web application right?
Is this even possible with this combination of libraries/frameworks? If not, is my only option to go down the webpack route instead (if that will work?)?
For client side code splitting just use import + React.lazy. Should work out of the box.
To support server-side code splitting (or client-side code splitting with server-side rendering) - https://github.com/theKashey/react-imported-component is the only choice for today.
I have successfully managed to render a React component inside of ember.
You can see the relevant code here.
The basics being adding an addon, that uses the preprocessTree hook, to use broccoli-react to parse the jsx files as per here. And a ReactComponent (which is an ember component) to wrap any react component.
This works well in ember cli 2.11.0 and 2.12.0, but in 2.13.0 and 2.14.0 something has changed and I can't figure out what.
I have narrowed the error down to this line in ember-resolver, for some reason this._moduleRegistry in the newer versions don't have the react component but the older versions do...
Any ideas?
I uninstalled everything node. And started matching package versions 1 for 1 from the newer app into the older one, and it all works.