I have only been learning React in a week so I am new to it and I am trying to write a simple todo app.
Originally I wrote all of the components in one file and loaded that file into the HTML file and it worked great. Now I am refactoring and trying to split the components into different files.
My full code is on my Github https://github.com/yasgreen93/todolist-react on the extracting-files branch.
I have split up each component into different files and have an linked them in script tags into my HTML. This is what my HTML file looks like:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Todo List</title>
<link rel="stylesheet" href="css/styles.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.16/browser.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
</head>
<body>
<div id="container"></div>
<script type="text/babel" src="scripts/components/TodoListApp.js"> </script>
<script type="text/babel" src="scripts/components/CompleteTodo.js"></script>
<script type="text/babel" src="scripts/components/TodoList.js"></script>
<script type="text/babel" src="scripts/components/SingleTodo.js"></script>
<script type="text/babel" src="scripts/components/AddTodo.js"></script>
<script type="text/babel" src="scripts/components/CompleteTodoButton.js"></script>
<script type="text/babel">
ReactDOM.render(
<TodoListApp url="/api/todos" updateUrl="/api/todos/update" pollInterval={2000}/>,
document.getElementById('container')
);
</script>
</body>
</html>
In the console, I always get the error message Uncaught ReferenceError: TodoListApp is not defined. I have tried loading them in different orders with no success. I have also watched many videos where they do very similar approaches without using webpack and it works for them. I would like to get this working first without using webpack and then move on to learning that.
Can anyone see where I am going wrong?
You have to add your components to a global window variable in order to use them in html script tag. Like window.TodoListApp =.... var declaration is relative to a file in which you declare it.
But it is considered to be a bad practice to expose parts of you code to a global scope and to transpile JSX in the browser. Instead you should consider to use some building system like Webpack.
This way you would be able to use es2015 import syntax to import components from one file to another, bundle everything in one file and much more additional benefits like code minification, sourcemaps, livereload etc.
Setting up React for ES6 with Webpack and Babel
Using React with Webpack Tutorial
Related
I'm pretty new to React and I've been trying to set up a REACT app. However, I always get a blank page. Can anyone help?
HTML Code (index.html)
<html>
<head>
<meta charset="UTF-8" />
<title>Home</title>
</head>
<body>
<div id="root"></div>
<script src="index.js" type="text/babel"></script>
</body>
</html>
Javascript (index.js)
import React from "react"
import ReactDOM from "react-dom"
const page = (
<div>
<h1>My page</h1>
</div>
)
ReactDOM.render(page, document.getElementById("root"));
And yes, I am using a live server to run this code.
Browsers don't understand the text/babel MIME type.
It is there for Babel to search the DOM for scripts that it should process to convert from whatever they are (JS + JSX in this case) to JS.
You haven't included Babel in your page though.
You have a further problem in that inside your script you have import statements which depend on Node.js module resolution (and you're using a browser, not Node).
You should start at the beginning of the React guide.
You currently have an odd mix of about 20% of the quick guide to adding React to a website and 5% of using a Node.js based toolchain to transpile your code.
I recommend starting with create-react-app as it gives you a robust, performant foundation to get started with.
I've been trying to run some of the basic React examples in Electron App, but nothing shows up, even though there is no errors.
Here's a file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="root"></div>
<script type="text/babel">
const React = require('react');
const ReactDOM = require('react-dom');
ReactDOM.render(
<h1>Hello World</h1>,
document.getElementById('root')
);
</script>
</body>
</html>
I have the following packages installed: react, react-dom and electron.
Am I doing something wrong? Thanks in advance!
type="text/babel" isn't recognized by browsers as a valid script type, so it'll just ignore it and skip over it completely, hence the lack of any error. You need to include the babel script to make it parse, like so:
<body>
<div id="root"></div>
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
<script type="text/babel">
// your react code here
</script>
</body>
This is fine for exploration and prototyping, but it's not good if you want to release the app for others to use. Having babel parse the script on-the-fly can weigh on performance and memory usage.
Instead, look into a tutorial on how to pre-compile your scripts and run them that way. This boilerplate could serve as a good reference.
After building a project with Angular CLI, I keep getting 404:Cannot GET with my inline, styles bundle.js, and main bundle.js.
At the bottom of my index.html:
<script type="text/javascript" src="inline.js"></script>
<script type="text/javascript" src="styles.bundle.js"></script>
<script type="text/javascript" src="main.bundle.js"></script>
The files are in the same folder as index.html, with all of the angular 2 goodies. When I copy the text into the corresponding script tags, it works just fine.
Thanks #Johan Blomgren for the answer. Adding this fixed it:
<base href="index.html">
I'm building a NW.js app, currently with babel-standalone and React. I can use ES6 import, but ES6 export on the other hand does not work, console spits out unexpected token export. What's going on?
index.html:
<html>
<head>
<meta charset="utf-8">
<script src="assets/react.min.js" charset="utf-8"></script>
<script src="assets/react-dom.min.js" charset="utf-8"></script>
<script src="assets/babel.min.js" charset="utf-8"></script>
</head>
<body>
<script type="text/babel" src="script/App.js"></script>
</body>
</html>
(yes, Babel indeed works, since React stuff inside runs OK)
In app.js:
import Lib from "./script/lib.js";
(and it's indeed exporting lib.js correctly, since that is the file responsible for the error)
In script/lib.js:
export default class {...};
I'm aware I can use Node modules instead, or even HTML script loading, but that's beside the point. I want to know why export doesn't work even if Babel doesn't seem to be broken, and even import works fine.
The problem is that Babel doesn't see files that were loaded via require, and they are loaded as they are, without transpilation.
There can be several ways to work this around, but the easiest one will be using Babel at build step.
Process your source code and then load processed code nw.js environment. The example how to do that you can find at this boilerplate project
The reason to have src and dist folders is pretty clear: we change source code commit it to repository and use compiled dist files for production.
But what could you recommend for development? We still want to keep src clean from compiled file and make it very fast to review the changes.
Before we just transpiled SAAS into CSS and put it into source and keep JS files as they are(without compiling in one file or coping them to dist). And now we decided to rethink the concept.
we are doing web development, but I think question is more broad.
If I well understood, you are looking for a development architecture/workflow to directly serve you sources to the browser (and use DevTools edition features btw). In fact, there are 2 things to do to achieve this.
1) For compiled/transpiled languages (SAAS, LESS, TypeScript, ...) and unsupported languages (ES6, ES7), you will need to compile/transpile them on the client side. Tools like LESS.js, typescript.js, BabelJS are great to do that. I don't know any SAAS compiler implementation in Javascript.
2) Then, you need 2 different html indexes. For example index.hml for production and dev.html for development.
index.html with bundled (dist) files:
<!DOCTYPE html>
<html>
<head>
<title>App Title</title>
<link rel="stylesheet" type="text/css" href="dist/app.bundle.css">
<script type="text/javascript" src="dist/app.bundle.js"></script>
</head>
<body>
...
</body>
</html>
dev.html with all sources (src) files:
<!DOCTYPE html>
<html>
<head>
<title>App Title (Dev)</title>
<link rel="stylesheet/less" type="text/css" href="src/file1.less" />
<script type="text/javascript" src="src/file1.js"></script>
<script type="text/javascript" src="src/file2.js"></script>
<script type="text/javascript" src="src/file3.js"></script>
<script type="text/javascript" src="lib/less.js"></script>
</head>
<body>
...
</body>
</html>
This way, developers access the web app using, let's say http://localhost/dev.html and can enjoy all the goodness to have sources right in the browser. Without taking care of the compilation.
To apply such an architecture you may need to adapt client and/or server code and also build tools to work in both mode (prod and dev).
Hope I helped.