I am trying to use http://www.material-ui.com/ for front end design. I am trying to execute the first example within the getting started tutorial. I have following html file :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>examples</title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="App.js"></script>
<script type="text/javascript" src="MyAwesomeReactComponent.js"></script>
</body>
</html>
and following App.js and MyAwesomeReactComponent.js files as defined in ( http://www.material-ui.com/#/get-started/usage )
App.js :
import React from 'react';
import ReactDOM from 'react-dom';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import MyAwesomeReactComponent from './MyAwesomeReactComponent';
const App = () => (
<MuiThemeProvider>
<MyAwesomeReactComponent />
</MuiThemeProvider>
);
ReactDOM.render(
<App />,
document.getElementById('app')
);
MyAwesomeReactComponent.js:
import React from 'react';
import RaisedButton from 'material-ui/RaisedButton';
const MyAwesomeReactComponent = () => (
<RaisedButton label="Default" />
);
export default MyAwesomeReactComponent;
But when I run the index file, I can't see any output.
The problem is here since you are implementing ES6 code, you need to use a javascript compiler like babel to transform your ES6 code to ES5 which is current javascript standard that is supported by browsers.
It would be a good practice to use babel with webpack as a loader.
Following React's get started page's instruction is a good starting point. I'd suggest reading the instructions carefully.
Finally, if you want to use pure ES6 without transforming, the compatibility table is available here: https://kangax.github.io/compat-table/es6/
Related
I built a normal HTML/JS/CSS website and am Adding a widget( a code form made with react ) that I compile and export as a js and css to the index.html page by doing so:
<head>
<script src="https://unpkg.com/react#16.13.1/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom#16.13.1/umd/react-dom.development.js"></script>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="app"></div>
<link href="app.css" rel="stylesheet"/>
<script src="app.js"></script>
</body>
And I"m compiling the app with:
//yarn parcel , or npm run parcel
"parcel": "parcel build src/index.js --no-minify --no-source-maps -d widget && cp build/static/css/*.css widget/index.css",
React js script that get's the component and then add it to the element with id.
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
const app = document.getElementById('app')
ReactDOM.render(
(<React.StrictMode>
<App />
</React.StrictMode>),
app
);
After compiling I tried to make a secondpage serving it in another route, like blog.html and add the component too as I did with head and body, but the page remains blank. What could it be ? ( there are no logs in the console).
//the first html served
files_routes.get('/', (request, response) => {
response.sendFile('index.html', { root: '../build' })
});
//the second html which doesn't work
files_routes.get('/blog', (request, response) => {
response.sendFile('blog.html', { root: '../build' })
});
I couldn't replicate the issue in the newer code base. So I'll be closing this question...
I have completed the meta tags implementation in react js at client side using react document meta and my title has changed.However I am confused about the server side prerendering for meta tags.I am completely new at this.I have gone through links like React-document-data and Npm React-document-meta but could not get through server side rendering.Would appreciate any help
Ok I've been doing this recently with expressjs and I think I've cracked it!
Firstly you're going to want to make one singular instance of your react 'app' which will be babel-ified. I tend to stick everything in an src and babel it to dist. My main for the server then ends up being /dist/index.js and this includes my app using `dist/App/index.js.
Next you're going to want to make your assets because rendering locally within a node process is very different to on a DOM.
Ok so firstly src/index.js
import express from 'express';
import app from './App';
import Mailgun from 'mailgun-js';
const server = express();
server.use(express.static('public'));
const port = process.env.SERVER_PORT || 3000;
server.get('/*', function(request, response) {
response.send(app());
});
This is my App/index.js file which is my initial content not my react app!
import * as assets from './../Assets';
import App from './app';
import React from 'react';
import {renderToString} from 'react-dom/server';
import {Provider} from 'react-redux';
import createStore from './Store';
import reducers from './Reducers';
import sagas from './Sagas';
//const browserHistory = createBrowserHistory();
const store = createStore({}, reducers, sagas);
const html = renderToString(
<Provider store={store}>
<App />
</Provider>
);
export default function render () {
return `<!doctype html>
<html prefix="og: http://ogp.me/ns#">
<head lang="en">
<meta charset="UTF-8">
<title>Preloaded title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<link rel="stylesheet" href="build/${assets.get('index.css')}"/>
<div id="root">${html}</div>
<div id="fb-root"></div>
<script type="text/javascript">
// WARNING: See the following for security issues around embedding JSON in HTML:
// http://redux.js.org/docs/recipes/ServerRendering.html#security-considerations
window.__PRELOADED_STATE__ = ${JSON.stringify(store.getState()).replace(/</g, '\\u003c')}
</script>
<script type="text/javascript" src="build/${assets.get('index.js')}"></script>
</body>
</html>`;
}
the assets.get() function is essentially returning a full url to my assets based on a manifest file. Ignore this for now. Not particularly important.
That's essentially it for pre-rendering. Now you'll need a different version for the build js for rehydrating your react app.
So assets/js/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux'
import createStore from './../../src/App/Store';
import {createBrowserHistory} from 'history';
import reducers from './../../src/App/Reducers';
import sagas from './../../src/App/Sagas';
import App from './../../src/App/app';
const preloadedState = window.__PRELOADED_STATE__;
// Allow the passed state to be garbage-collected
delete window.__PRELOADED_STATE__;
preloadedState.server.env = false;
const browserHistory = createBrowserHistory();
const store = createStore(browserHistory, reducers, sagas, preloadedState);
ReactDOM.hydrate(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root'));
notice ReactDOM.hydrate not ReactDOM.render.
In this file you can add your google analytic etc. Anything to do with the DOM/window, DOM load etc.
And that's essentially it! I used the below example to work from.
https://redux.js.org/docs/recipes/ServerRendering.html
I know how to set up a React project using npm, yeoman and it works fine.
When I follow this tutorial
http://danprince.github.io/learn-react/lessons/ex1.html and apply React from CDN, it also works - but it's an old version. If I try to apply a new version of React via CDN, I can't figure out how to render ANYTHING on the screen. For example, what's wrong with the following code?:
react:
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.min.js'>
html:
<body>
<div id="root"> </div>
</body>
js (based on Code School tutorial exaple):
class StoryBox extends React.Component {
render() {
return( <div>Story Box</div> );
}
}
ReactDOM.render(
<StoryBox />, document.getElementById('root')
);
Since react v15.6.0 the ReactDOM module has been moved to a separate package add this to below your react <script ... /> tag:
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js"></script>
Snippet:
class StoryBox extends React.Component {
render() {
return( <div>Story Box</div> );
}
}
ReactDOM.render(
<StoryBox />, document.getElementById('root')
);
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.min.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js"></script>
<div id="root"> </div>
I think you should look at some updated react tutorials e.g.
Simple React Development in 2017
I am trying to setup a basic react application(Hello World) on my laptop. I am using react and react-dom ( version 15.5.4) alongwith babel, webpack and yarn to run/test it.
I am getting Uncaught ReferenceError: Button is not defined for a pure function component that I have defined in App.jsx.
Here are the content + the application directory structure I have used.
App.jsx
import React from 'react';
/*
export default class App extends React.Component {
render() {
return(
<div>
<h1>Hello World</h1>
</div>
);
}
}*/
const Button = () => {
return(<button>Go</button>);
};
export default Button;
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App.jsx';
//ReactDOM.render(<App />, document.getElementById('root'));
ReactDOM.render(<Button />, document.getElementById('test'));
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>React App Setup</title>
</head>
<body>
<!-- <div id="root"></div> -->
<div id="test"></div>
</body>
</html>
Directory Structure
<root_directory>
|_client
|_components
|_App.jsx
|_index.html
|_index.js
Please let me know, if the package.json, webpack config and .babelrc file content is required as well.
The browser console shows the below error.
Uncaught ReferenceError: Button is not defined
at Object.<anonymous> (index_bundle.js:12891)
at __webpack_require__ (index_bundle.js:20)
at Object.<anonymous> (index_bundle.js:30981)
at __webpack_require__ (index_bundle.js:20)
at module.exports (index_bundle.js:66)
at index_bundle.js:69
I am trying to use react-bootstrap in react and installed it by using command
npm install react-bootstrap --save
but it's not working, also tried to add external react-bootstrap.js but still getting an error
error 'ReactBootstrap' is not defined no-undef
✖ 1 problem (1 error, 0 warnings)
what am I doing wrong in this code. This is HTML file
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>React App</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.27.3/react-bootstrap.js"></script>
</head>
<body>
<div id="root"></div>
</body>
</html>
This is JSX file.
import React, { Component } from 'react';
import logo from './logo.svg';
class Hello extends Component{
render()
{
let { Button} = ReactBootstrap.Button;
return(
<div>
<img src={logo} className="App-logo" alt="react-logo"/>
<h1> Trying react</h1>
<Button>Noob</Button>
</div>
);
}
}
export default Hello;
and here the rendering code in other file.
import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './Hello';
import './index.css';
ReactDOM.render(
<Hello />,
document.getElementById('root')
);
the same code is working fine , If I remove
let { Button} = ReactBootstrap.Button;
and
<Button>Noob</Button>
from JSX file.
You will need to import that component from react-bootstrap like - var Alert = require('react-bootstrap').Alert;
For more information please take a look at this - https://react-bootstrap.github.io/getting-started.html