I have standalone components like Header, Footer, etc. built in Storybook. The components are written in JSX. I have some react apps that consume those components by importing them, and rendering them with JSX notation.
Now we have a Drupal app which has a frontend written in Twig. I want to reuse the already built JSX components, to render them in Twig.
I am already creating a dist.js in plain js, compiled with webpack. So that the react apps can import the components, without having to parse JSX from the node_modules folder.
Now I would like to have the possibility to import the dist.js created with webpack (or the JSX files directly) into the Drupal app, and render single components (eg. Header, Footer, etc.). Everything in between should remain Twig.
I already tried to include the dist.js file with <script> tag, but then I didn't know how to trigger something that I can say, which component should be rendered and in which container it should be rendered.
I did a bit of research but what I found was just how to integrate an entire react app into Twig. But I already know this principle, and its not that what I want. I want just to render already written JSX components, in a mainly Twig written app. How can I accomplish that without rewriting the components in Twig?
Related
Working on a new project setup, and trying to get figure out the configuration to get .scss files to build per component. Ideally, only the necessary css files would load per component added to a page, rather than an entire combined .css file for all components. I know this can be done with JSS, but I believe should work with webpack in a CRA app.
My current project setup is:
/src/App.js
/src/components/
index.js => exports all components for easy import to the page (i.e., import {ComponentName} from './components')
/src/components/{component-name}
{component-name.js}
{component-name.scss}
Currently trying sass#v1.56.1 and sass-loader#13.2.0, but not sure about the proper setup.
Might need to do a modular setup to accomplish this or just stick with JSS?
If you're writing JSX in other files to create the frontend. What is the point of having the index.html file there?
JSX can be thought of as syntactical sugar for writing react components. There is usually a transpiler at work working to turn the JSX into valid JavaScript. This valid JavaScript and other assets is then bundled. But what use is this without any html to use it? The bundle is injected into the index.html. If you open it there should be a comment giving a brief explanation about it.
public/index.html is the main HTML file of our app that includes your React code and provides a context for React to render to.
If you look at the html file you could see <div id="root"></div>.
We call this a “root” DOM node because everything inside it will be managed by React DOM. That is the mounting point for react app.
In your index.js you could see a code at the bottom,
ReactDOM.render(<App/>, document.getElementById('root'));
this function mounts your react app to the "root" provided in the index.html file.
Basically, react is for the components and react-dom is for rendering the components in the DOM. ‘react-dom’ acts as a glue between components and DOM.
How to merge node_module, project dependencies, of both Svelte and ReactJs?
I've seen guides showing how to include ReactJS file into a Svelte app
<SvelteComponent this={First} {...this.props}/>
That produces the following error:
Constructor is not a Constructor error
here is an example of including a svelte component in react. It been written by Rich Harris author of svelte:
https://github.com/Rich-Harris/react-svelte
Svelte and React are not compatible to import and use the other framework component directly.
It is definitely possible to create a Svelte app inside of a React app or vice-versa though.
You would have to instantiate the app like normal inside of the other app. The Svelte docs show how you can bind a Svelte app to a DOM node, which you can include in a React component. Make sure you also add the DOM node inside of that component, such as <div id="svelte-app" />.
I use Styled Components as CSS alternative for my React App. In development everything works fine (first screenshot), but when I run a production build (npm build), styles within style tags are stripped out (second screenshot). As a result, there're no styles in the production build.
Here is the production version: http://projects.loratadin.com.s3-website-us-east-1.amazonaws.com/weather-app/
Here is the source code: https://github.com/Loratadin/weather-app
I had a similar issue with empty style tags in production. I'm using a headless browser for server-side rendering and this issue caused the server-side rendered pages to appear with no styles before JS assets are loaded.
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. Keep in mind that you should do it at the very beginning of your application's entry file, before importing any styled component, otherwise it will not work.
The way I did it is by creating a new file called globals.js that contains global.SC_DISABLE_SPEEDY = true
and importing it as the very first thing in my index.js.
Reference: https://www.styled-components.com/releases#v4.1.0
For the Create React App folks out there you can add a .env file in your root and add:
REACT_APP_SC_DISABLE_SPEEDY=true
I was able to replicate your issue and it looks like when the application is in production, it can't select html elements within a styled component (the styles don't apply to the element). Instead, you'll need to create additional stylized components for input and button.
Working example: https://github.com/mattcarlotta/Weather-App
I refactored your application to simplify its structure. Please read the README for instructions on how to run it in development and in production (DO NOT use the above repository for production, as it's highly unnecessary to have an express backend -- I only did this so that you can run a local production build).
What I changed:
Moved any styled components to the components folder for modularity
Any sort of global stylization was put into a styles folder
Moved assets to images and imported them into the styled component that needed them (eliminating the need to use require('../path/to/image'))
Simplified the App.js file. Children are controlled by state and class methods. Most importantly, turned your form into a controlled component, fixed the getWeather method to: Not allow an empty submission, if the AJAX calls fails, it'll catch the error (instead of breaking your app), and reset the form inputs on successful submission.
Added prop-types to ensure props were consistent in declaration (string remains a string, number remains a number, and so on).
In React, there is two ways to use the react file. one is JSX and another is js file. my doubt is why react created new extension to develop the react application event though js file format is getting support by it.
You can use js extensions for JSX components if you want. But actually JSX is not JS standard. I think thats why they created a new extension. Being strict, JSX is not JS.
Some eslint rules, like airbnt ruleset, force to you to use .jsx extension for React components, and .js extensions for JS 'plain' code.
Here there is a interesing thread discussing about that:
https://github.com/airbnb/javascript/pull/985