All:
I am pretty new to React.js and just use a little bit AngularJS, there is one question about React.js:
In AngularJS, the HTML part usually is separated from JS code as template, I like that way which make the code clean, I wonder if there is a similar way I can do this in React, or just use a function to apply this.state/this.props to the HTML part?
Thanks
The render function is just a synchronous function. As long as the template has already been loaded by something you can absolutely do this.
//Some module that has loaded the HTML
import jsxStore from 'jsxStore';
class SillyComponent extends React.Component {
render() {
return jsxStore.getSillyComponent(this.props, this.state);
}
}
The challenge here will be ensuring that the HTML is loaded by the time this call is made, since render doesn't accept asynchronous results. The HTML will have to be loaded before the component tries to do anything.
It should be noted that you are fighting React by doing this. The React idea of a component is a self-contained bundle of code and presentation. The goal is to keep the component in a single file, so that you can see the whole thing at once. This is different from frameworks like Angular intentionally. If you don't like this, React is not going to be a good fit for you.
Related
I am learning React.js, and I have noticed that each React file appears to be just a mix of JavaScript and HTML. But I enjoy having distinct files for my HTML and JS. So, I am wondering if I can have these two independent files but also include a link (or something) in either the HTML or JS file, so that they may communicate with one another.
Thank you.
React components implement a render() method that takes input data and returns what to display. This example uses an XML-like syntax called JSX. Input data that is passed into the component can be accessed by render() via this.props.
In other words, it was more simple than we separate html and render it on React, as a component.
If we still want to access html page via any page that created with react, we can did it via a href.
For any other way like import it (maybe), i think it was too complicated because of some reason.
Hope you will more understand about react with this react docs link
React is used to build single-page applications which is an application that loads a single HTML page and all the necessary assets (such as JavaScript and CSS) required for the application to run . this single HTML page is index.html located in the public folder (if you're using create-react-app)
I am a newbie with React and jsx.
I have a project where I am using React for the first time, but there are still some parts of the page which are not React-based, they use some other framework. Until that older code is refactored to use React or some agnostic way I will need to use both frameworks for now.
This other framework needs to be lazily included on the page, so it might take some time to load. Once available, I can create an object and call .placeAt(id) to tell the object where to render its DOM.
The below code is just a sample of what my current solution looks like.
import React from 'react';
import loadWidget from './loadWidget';
function App() {
return (
<div id="app"></div>
);
}
// loadWidget returns a Promise object which resolves with the Widget class asynchronously
// I need to create a new Widget that will then be placed into the App's <div> using the ID
loadWidget().then(Widget => {
new Widget().placeAt('app'); // Renders into the div with id "app"
});
export default App;
The code above works, but there are some issues with it that make it clear to me that I must not be well adapted to this React programming model yet, where I'm more used to Object oriented programming. In the code above it only works if the index.js calls the App() function exactly once and it must be called prior to the loadWidget() promise having returned. In my case, this is always true since the call to App is synchronous and I know it will only happen once, but I am not satisfied with the solution.
You can simply use other life cycle methods of React.
From what I can understand you're looking for a way to load them on based on
I believe what you're looking for can be adapted to
componenetDidUpdate(props) which will be called every time your props or states will be called.
So what you can do is use a State and then put the updated value in the state for which you need to render the HTML.
So something like this
<div> Render some HTML by ${myStateVariable} </div>
This would help you render your choice of HTML but there're some implications to it, I would recommend you to first read some materials such as
React life cycle components
enter link description here
States and Props
enter link description here
I have a web-app built with react. In this app I also have some pages with jQuery code from an old version. Right now this is rendered server side and i have to load the entire ejs file with jQuery and jQuery-UI code in script-tags with its own navigation menu. (Almost 1000 lines of jQuery code)
This means that I have to build another nav-menu for these jQuery pages.
I would like to render this jQuery depended code in my "content div" so I can still use the react menu which uses react router. I would like to render it like a component. But I don't know if this is the best solution.
I have read many examples of how this could be done, but I don't know which of them to go for and I have been strugling to make them work
Like shown in this example: Adding script tag to React/JSX This example adds script tags in componentWillMount
Or with import and require like this example: How to add script tag in React/JSX file?
I couldn't make these solutions work without installing jQuery through npm.
I have not yet installed jQuery through npm because I know this will affect my bundle size for the rest of the application and I am only using jQuery for a couple of my pages. The user don't really need to load jQuery for the rest of the app
What do you recommend in a situation like this? What is the best solution for performance and user experience?
Take a look at react-async-component. Your component might look something like:
// SomethingWithJquery.js
import React, {Component} from 'react'
import $ from 'jquery'
class SomethingWithJquery extends Component {
constructor(props) {
super(props)
}
render() {
// ... as much jquery mess as you need
}
}
export default SomethingWithJquery
And wrapper in separate file:
// SomethingWithJquery.async.js
import { asyncComponent } from 'react-async-component';
export default asyncComponent({
resolve: () => System.import('./SomethingWithJquery')
});
Than you can use it as regular react component, react-async-component will load entire component in separate .js file on purpose under the hood.
I want to create an in-repo addon to make certain modifications (styles, templates, etc.) to an existing ember app in an encapsulated way, but I'm having troubles overriding the templates.
Right now, I'm trying to override an existing component template with the template from a component with the same name in the in-repo addon. My code looks something like this:
// my-app/app/templates/components/foo.hbs
<h1>Some headline<h1>
// my-app/app/lib/my-addon/app/templates/components/foo.hbs
<h1>A different headline<h1> // -> this never shows up
I've tried a lot of switching around the template structure (like putting it in /addons or /app and linking to the template in different ways, but without success. My problem is that ember never uses the template from the addon.
If the component within the addon has a different name, like foobar.hbs, I can call it without a problem.
I'm currently looking through the source code and docs, trying to make sense of this. Is this even accomplishable the way I imagine it?
Thanks a lot!
You'd have to create the component in your ember app which, initially, will mean the component renders as nothing as it's a brand new, empty component. Then you'd dig into your node_modules, find the component file and template and copy over what you'd need to work with.
Here's an example. While working with ember-cli-jsonapi-pagination, I need to customize the paginate-collection component:
I created the component in my application.
I looked at the source: https://github.com/BookingSync/ember-cli-jsonapi-pagination/tree/master/app
In components/paginate-collection/component.js I copied over the component code, but you should be able to import it as well.
In components/paginate-collection/template.hbs I modified the template as needed.
I am currently working on learning React and Redux. Now I am getting a better grasp on what the two do:
React - Render components on the page
Redux - Keep the state of the page
My question though is: what should I actually be rendering with React? Is React suppose to render the entire page, even the header that won't change? For instance, am I suppose to create a new component for the header (logo and tabs, not changing), or just add that to the HTML file I will be rendering to?
I would suggest adding absolutely everything as a React component. Have a single <div> in your html file that you mount your React app to. I found that when I started using React I would try and avoid writing extra code (sure, writing a component for a header rather than the raw HTML is extra lines).
But this introduces complexity, in a way. Different parts of your app are rendered differently. In the long run, in my experience, consistency and readability is more important than fewer lines of code.
BTW if you're using stateless functional components (which your header would be), it's barely any extra code.
import React from 'react';
export default Header = () => <header>My wonderful app</header>;
like most other frameworks, you will have your base 'index.html' file that will include all of your dependencies and then a body which contains a div that you will render your react components into. it will look something like this:
<html>
<head>
<-- script, css, framework files added here -->
</head>
<body>
<div id="reactApp"</div>
</body>
</html>
then your main app file in react will have something along the lines of this at the bottom:
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('reactApp')
);
everything else can be rendered within React and passed along to that div view.
It's entirely possible to have a hybrid page. For example: keep the navbar as native HTML where as the content is React.
Remember, React is component oriented so you could think of it as small widgets.
However, you will often have different widgets share the same state. In this case, it's good to make them part of the same tree of components.
Your question doesn't have a definite answer. It depends on what your application state needs are, but use React for the dynamic pieces of your page. Those parts that you're thinking are going to change without a reload will probably keep a state, so that's where React's stage management could come in handy.