Integrate react ace editor to react native application - reactjs

I want to add react ace editor to a react native application to display javascript,c,java, html, xml files, is it possible ? If it is, I want to know if the performances will be correct ? And if it's not, do you know a component or a way to do that ?
Thanks

You can use a webView in react native and render in it an index.html file
stored locally and then put the javascript code, c code content in this html form
including the right js libraries to obtain the right coloration for each source code.
Your html can contain either a react component if you packed it in a bundle.js.
Then you can add your source code for right coloration using ajax call from your component for exemple if the code is stored on a server returning JSON.

Related

Is it possible to save a react Js rendered page to html and / or pdf server side?

This is more of a general question, hence I'm not including any code.
I've looked at quite a few options for both pdf and html, but haven't figured out a good solution.
I'm trying to take the output of what would be rendered by reactJs in a browser and save it to the hosting server instead of (or as well as) displaying it in the browser.
Specifically I'm generating a report using a pretty standard React functions, styled with css, and want to save that report upon rendering to the server.
The API which I also control is Django based.
I've looked at react-pdf/renderer, react-pdf, pdfkit on the Django side (w/wkhtmltopdf), reactdomserver to generate static html files, but can't quite piece together a solution.
Would love some feedback if anyone's done something like this before.

Is there a way to read a pdf file's content in React

I've been trying to see if I can read a pdf file's content from an input field in React and save the texts in a variable. I tried using pdfjs-dist package, it works in vanilla js and node js but for whatever reason, it doesn't work with react.
If you know any package that works kindly share

Custom reusable component using apostrophe with react

I am a new in using apostrophe. I read that apostrophe is build on node.js as a backend, express and nunjucks template
my questions is can I create my custom reusable component using react on apostrophe without using headless CMS?
or to be able to use react with apostrophe it must be with Rest API (headless CMS)
Can anyone help?
Yes, you can use React with Apostrophe, even if you are not using apostrophe-headless. React does not insist on "owning" the entire page, and neither does Apostrophe.
This can be as simple as adding some script tags to your outerLayout.html or an individual page template, overriding the extraHead nunjucks block to load them. You may want to bring babel into your project to allow the use of JSX however.
See the official React documentation on using it in existing websites.

React server and client rendering

Using https://github.com/ayoubdev/reactjs-isomorphic-starterkit as a boiletplate.
I'm trying to figure out how to inject the client's bundle into the server rendering process.
As the webpack build for server and client is well separated, is there a simple trick to achieve this goal ?
Thanks
I'm not too sure about the specifics of this boilerplate repo. But I can try to explain the main idea, and you can dig deeper.
The basic idea is, use a bundler (in this case, webpack is used, gulp, grunt, whatever else is fine as long as you transpile) and build a bundle based on the entry point for your React components. Then link this bundle via script tag in some html file.
For the server side, you can use ReactDOMServer.renderToString. Import your component(s), pass them into ReactDOM.renderToString. Pass the HTML to some templater like ejs or use a raw HTML string and call React.render from the server.
Client side.
In your example, the entry point is here and hooked here. Notice the <div class= "app"> tag. This is tag we are referencing in our entry point. We also reference our bundled js from webpack via script tag, client.bundle.js.
Server side
In your example, the relevant code is here. Notice the renderComponent function. It builds a string based on the HTML of the component supplied from ReactDOMServer.renderToString, which is called on Line 39. It then sends all of that html back as a response in res.send
This blog article uses jade as an example, which you can use as an alternative if you find this boilerplate a bit much.

AngularJS export html to pdf with css

I have a task where I need to export the html to pdf. Where the pdf should have the same design as it has in browser. Basically I need the css should also work in pdf file. Am using angularjs for front end. But I have not found any use full module or any js library which supports my requirement. I also need to update AngularJS scope variables values in pdf. I found one http://pdfmake.org/#/ but it only supports some predefined css attributes. Please provide some suggestion if there is some npm module or any js library which render the html to pdf with css.
Thank you
I am not sure if there is a fully featured JavaScript solution, which can convert HTML/CSS to PDF on client side. It makes sense to take a look to server-side solutions - there are many available.
In an "hybrid" scenario on client side you'd need to populate a HTML/CSS template with variable values, send the resulting HTML/CSS doc to the server side and to receive back a generated PDF.
In the case it is not important anymore, if the converter is written in JavaScript. You may use a standalone native applications, utilize print/PDF output subsystem of WebKit (i.e. PhantomJS) or it can be, for example, a Java module deployed to your application server (i.e. PD4ML).

Resources