in the index.html I added the
<div id="sb_widget"></div>
and
<script src="web-widget/SendBird.min.js"></script>
<script src="web-widget/build/widget.SendBird.js"></script>
<script>
sbWidget.start(Appid);
</script>
it works fine but I need to implement it in my react app
my scripts are still in index.html but I put the div(<div id="sb_widget"></div>) in my app.js
but nothing happened it's not working anymore
so how could I implement it in a reactjs app ??
Related
<script>
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<h1>Hello, world!</h1>);
</script>
<div id="root">
</div>
I am running the html snippet but getting a console error message , this code is from https://reactjs.org/docs/hello-world.html ,it runs fine on codepen but not my local browser, please help as i am new to react.js
That snippet won't run in your browser's console as-is. In the code pen go to settings > JS > Add External Scripts/Pens. You'll see react and react-dom are dependencies for the code to run.
This tutorial for create-react-app will help you get everything installed correctly so you can try the hello world example - https://create-react-app.dev/docs/getting-started/
Here's the full setup in order for this example code to run:
<!-- INCLUDE REACT LIB -->
<script src="https://unpkg.com/react#18/umd/react.production.min.js" crossorigin></script>
<!-- INCLUDE REACTDOM LIB -->
<script src="https://unpkg.com/react-dom#18/umd/react-dom.production.min.js" crossorigin></script>
<!-- INCLUDE BABEL COMPILER LIB FOR JSX -->
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
<div id="root"></div>
<!-- Change the type to text/babel in order for the Babel compiler to detect and compile the JSX syntax -->
<script type="text/babel">
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<h1>Hello, world!</h1>);
</script>
You can find the CDN links used in this example for the React, ReactDOM and Babel libraries on the link that #abo mentioned above.
Happy Hacking and welcome to the wonderful world of React! ;)
I made two apps one is for angularjs and one is to react. Now the problem is I include the react build in angularjs app and try to initialize the '' component but when I run the code it says Test is not defined.
Can someone help me with this or give me any idea how I can get out of this problem.
React Component:
import React from 'react';
import ReactDOM from 'react-dom';
class Test extends React.Component {
render() {
return (
<div>
Hello
</div>
);
}
}
angular Js Code:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body ng-app="angular-app">
<div id="root"></div>
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
<script src="https://unpkg.com/react#16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js" crossorigin></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular.min.js"></script>
<script src="react/dist/build.js"></script>
<script>
ReactDOM.render(<Test/>, document.getElementById('root'));
</script>
</body>
</html>
You should write the following code in your react app and then load your bundle file in angularJS app.
ReactDOM.render(<Test/>, document.getElementById('root'));
Thing is, you cannot use jsx inside browser, jsx is usually transpiled using Babel into JavaScript function calls.
So 1. <Test /> will never work inside browser, you need to Babel that.
You need to expose react to you angularjs, best way I can think of is
// In react, instead of exporting component, export a function that mount component in given HTML
Export default (elm) => ReactDOM.render(<Test/>, elm)
I am trying to import React.js codes from from a .js file and use it in my index.html with react cdn imports. I needed to to very small task so I didn't wanted to use "create react app".
Is there any possible way to use React.js just like we can use jQuery/Vue.js using only cdn imports and importing them from a separate .js file?
What if I wanted to use react.js in an existing project along side another javaScript framework, without using create-react-app as it has its own project structure.
//my_react.js:
class Greeting extends React.Component {
state={
name: 'Deutschland'
}
render() {
return (<h1>Hello {this.state.name}</h1>);
}
}
ReactDOM.render(<Greeting />, document.getElementById('root') );
//index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script crossorigin src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"> </script>
<script src="js/my_react.js"></script>
</head>
<body>
<div id="root"></div>
</body>
</html>
TL;DR Browsers do not understand JSX format used by React for mixing HTML with JavaScript. You will need to transform JSX code to JS using babel before it can be included directly. Or you will need to write React code without using JSX. Continue reading for that.
The apparent capability of freely using html within JavaScript programs doesn't actually exist in any of the browsers. For most people, this mixed code with JS and HTML goes through a transformation and the result is pure JS code which can be run in any browser. Go through the React getting started guide to see how to achieve this https://reactjs.org/docs/getting-started.html.
The transformation, for example, of the following snippet would happen in this manner:
render() {
return <div />;
}
will get converted by babel to:
render() {
return React.createElement('div', {});
}
The second snippet is something that browsers can understand and execute. You can obviously write the code directly in second format, and in that case no build process would be required.
React does (officially) support usage without JSX, see more about it here: https://reactjs.org/docs/react-without-jsx.html. Be warned though, the React components written in this manner tend to be a bit verbose. Use this option only if you absolutely cannot have a build system.
I have the following react html page contents, and I would like to know the problems with this style of react development. Mainly I do not use any bundling tools. I am a newbie and finds this very easy for development and integration with server side languages.
<!DOCTYPE html>
<html lang="en">
<head>
<title>My First React Example</title>
</head>
<body>
<div id="greeting-div"></div>
<script src="react.development.js"></script>
<script src="react-dom.development.js"></script>
<script src="browser.min.js"></script>
<script>
</script>
<script type="text/babel">
class Greeting extends React.Component{
render() {
return (
<p id="test">Hello, Universe</p>
)
}
};
ReactDOM.render(
<Greeting/>,
document.getElementById('greeting-div')
);
</script>
</body>
</html>
You can't have hot reloading which is pretty awesome in React.
It will also scale awfully as you will have all your elements inside of the same html.
It will probably be bad to run a linter / any code analysis tool for it.
You should probably try create-react-app: https://github.com/facebookincubator/create-react-app, it's really simple to get started and you'll get a really good development setup.
I am new to ServiceStack and Angular. Apologies if this is verbose.
with reference to Html5 pushstate Urls on ServiceStack
I would like to be able to have my api service served up from the root. ie http://mydomain.com/
If a user browses the route, I would like to serve up a default html page that bootstraps my angular app.
In the the app itself if angular calls mydomain.com/customer/{id} json should be served but if this is browsed directly it should serve the default html page and keep the url but the route in the service method does not need to be called. as this will be resolved by angular which will call the customer service itself for a json result.
There are probably a few different ways to make this work, as long as you don't need to support html5mode urls. I have hope that I'll be able to leverage this code to eventually support html5mode, but at the moment, I've resigned myself to hash based URLs.
Given urls like: http://example.com/ or http://example.com/#/customer/{id}, here's how to bootstap an angularjs single page app on a self-hosted servicestack project from the root of the domain.
To enable the markdown razor engine, add this to your AppHost config (not absolutely necessary, but my preference over the default razor engine):
Plugins.Add(new RazorFormat());
Place a file, default.md, in the root of your project, and ensure it's properties are "content/copy when newer". Put whatever content you want in there. The important thing is to assign the template file. (If you're using the default razor engine, an equivalent default.cshtml file should also work, but I've never tried it. ) The template file is what will bootstrap your angularjs app. This is what I have in my default.md:
#template "Views\Shared\_Layout.shtml"
# This file only exists in order to trigger the load of the template file,
# which bootstraps the angular.js app
# The content of this file is not rendered by the template.
My _Layout.shtml file looks like this (omitting irrelevant details). Note ng-app in the html tag, and the ng-view div in the body. Also note that I don't include <!--#Body--> in the file. I'm not using server side templates for this project.
<!DOCTYPE html>
<html lang="en" ng-app="MyApp">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="Content/css/app-specific.css"/>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<!-- Navbar goes here -->
<div class="container">
<header id="header">
<!-- Header goes here -->
</header>
<div ng-view></div>
<hr>
<footer id="footer">
<!-- Footer goes here -->
</footer>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src="/Scripts/app-specific/app.js?3ba152" type="text/javascript"></script>
<script src="/Scripts/app-specific/app-services.js?3ba152" type="text/javascript"></script>
<script src="/Scripts/app-specific/app-controllers.js?3ba152" type="text/javascript"></script>
</body>
</html>