I used create-react-app from npm to start a new react project. I wanted to use this to do the learn react course on Scrimba. I installed everything without any problems. I deleted all the src files as ill be copying new ones from Scrimba but I kept absolutely everything else.
I currently have the following in my index.js file
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(<div><h1>Hello world!</h1></div>, document.getElementById('root'));
and a html file
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>placeholder</h1>
<div id="root"></div>
<script src="index.pack.js"></script>
</body>
</html>
When I load the html file, I can see 'placeholder', but not 'Hello World!'
I've also included an image of the file layout. I also included a screenshot in case my layout or something is wrong. Any help appreciated!
(I've already posted almost the same problem but was advised to post a better/updated version)
There already is an index.html file in your public folder. No need to create a new one.
You should start looking at your index.js file. It points to app.js, which is an example react component you can start editing and playing around with.
Make sure to open a terminal and start your react app with npm install followed by npm start.
I would suggest reading some documentation. The official react website is great. https://reactjs.org/tutorial/tutorial.html
Related
I just started learning React from that tutorial https://scrimba.com/p/p7P5Hd/cV7M2uR on scrimba.com, but I have a weird problem. When i work with a code inside of build in editor all works fine but when I tried to write exact the same code in my Visual Studio Code it just didn't work.
index.html file :
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="root"></div>
<script src="index.pack.js"></script>
</body>
</html>
and index.js file:
import React from "react"
import ReactDOM from "react-dom"
ReactDOM.render(<div><h1>Hello World</h1><p>This is a paragraph</p></div>, document.getElementById("root"))
The file style.css is practically completely empty.
So what am I missing or do wrong? There are some files I should download first, or maybe some other additional code or hidden settings to make it work?
I tried to launch it both by liveserwer and just opening the index.html file - in both cases I just get completely blank webpage
In my humble opinion you should check out Create React App for learning React. As the website says:
Create React App is a comfortable environment for learning React, and is the best way to start building a new single-page application in React.
It sets up your development environment so that you can use the latest JavaScript features, provides a nice developer experience, and optimizes your app for production.
Good luck and happy coding!
Because in Scrimba you import React as well as ReactDOM from the dependencies that are files already installed in your Scrimba project folder and are not available in your VS Code so I recommend to watch a tutorial on youtube on how to set up the environment for React JS.
Use <script src="index.js"></script> instead of <script src="index.pack.js"></script>. That should work just fine on local environment. Reason index.pack.js is not working because behind the scenes on scrimba editor they are using webpack, so it’s a little bit of Scrimba related logic which is working on online editor.
I mean will it only serve the index.html file?But how can a client run that html file because it is not regular html file? and do i need to have a back end node to run it?
Actually i am unable to under stand the whole process.
In general client requests a html file and a server returns that html file to the client.
But in case of react how index.html. Does the server return index.html plus all the components and then it gets rendered by the browser or does it come pre rendered from the server.
You will need a host to put your React application on. This can simply be a place where your files are accessible via HTTP (Amazon S3, Github Pages, a webhosting account, etc). A user then goes to a url, and that host will respond with your HTML file that might look something like this:
<html>
<head>
<title>A title here</title>
</head>
<body>
<div id="app"></div>
<script src="app.js"></script>
</body>
</html>
When the browser loads this html file, it sees that script tag and then loads up the src of that script, making a request for an app.js on your host. app.js may look something like this:
import React from 'react'
import ReactDOM from 'react-dom'
function App() {
return <h1>My App</h1>
}
ReactDOM.render(<App/>, document.getElementById('app'))
The browser then executes that script, which creates the <App/> component, and puts it in the html node with id app, thereby rendering your react app.
No application code is required server side. Everyone gets the same HTML and Javascript, and the HTML the host provides is very basic providing an empty place to render your app, and a link to your React custom code. That's it.
I left out a part for simplicity, which is compilation. You write the javascript code above, but something like babel or webpack will take what you wrote, and load those dependencies (React, ReactDOM) and compile those JSX tags (<h1>, <App/>) into something the browser can understand. This creates (usually) a single large javascript file which is what gets put on your host for the browser to download. It includes React, any other npm libraries you want to use, and your custom application code all in one file.
When you run the build command on your React app, it takes all the imported files (import ... from ...) and bundles them (this is what Webpack does). That index.html file has a script tag that reference to a big js file (that bundled one) with all the code: React, your component, the libs in node_modules, ..., everything. What that big script file is loaded in the browser it handle the whole construction of your app.
I am working with web components using stenciljs. Its great library for creating web components that can we re-use anywhere.I wondered how stencil compiler works. I mean when I create a build of any component its creating multiple folders inside dist and when we have to use the component we just need to add 1 or 2 file like following.(I used bit.dev to upload my component)
<!DOCTYPE html>
<html lang="en">
<head>
<script type="module"
src="./node_modules/#bit/kishanoza.demo.accordian/dist/dist/accordian/accordian.esm.js">
</script>
<!-- <script nomodule=""
src="./node_modules/#bit/kishanoza.demo.accordian/dist/dist/accordian/accordian.js">
</script> -->
</head>
<body>
<accordian></accordian>
</body>
</html>
at the same time I tried same component using react but in react they are not creating multiple folder like stencil.
so here are the list of the folder that stencil create is dist folder
cjs
collection
esm
esm-es5
accordian
types
and some index.js files
so my question is what is the use of all this folders. I concerned about this because when I collect all my modules in some micro front end app I don't want this much of folder for all the components.
so if I can understand the use of this I can debug and manage duplicate folders and code in my micro front end app.
any help is appreciated
UPDATE
I have check ionic and its build using stencil so when I make a build of hello word app in ionic and check www folder it contains all the componets's chunck which I have not used in my entire application.. its 3 MB !!!! why ionic import all component event if i am not using it ??
I have tried react its best in this cases.. just one file for each component when I add stencil component in react then same issue multiple files generating for one component for stencil only where else for react just one file :) isn't it so cool ? :)
Im having difficulty to call my js script from my index.html file.
I'm guessing it's because I am not calling it like I should but I can't find the solution online.
Basically I have a index.html file
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="root"></div>
<h1>html</h1>
<script src="script.js"></script>
</body>
</html>
And also a script.js file in the same folder
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<h1>This is my script</h1>
);
My goal here is to run my js file which will then run my entire react app. Thanks a lot for any help you can give me.
(New to React, trying to run my app locally without having to use node.js)
I think you just need to use the Babel transpiler to translate from ES6 to a version of javascript your browser understands. That's the standard way of using ES6 features in the browser.
Many projects use Babel as part of their build pipeline, although you can also do the translation at runtime. The official React documentation uses Babel Standalone in their "Hello world" examples.
Browsers don't support import feature.
I don't think it's posible to develop a modern app without node. If it's posible it won't be easier.
I've recently started to look into React.js.
From the tutorials I have seen, JSX is used. However, when I go to the React.js guide, they use Babel, and they say if you want to use JSX, use Browser.js.
I'm not fully understanding how bable or JSX is used.
Below is my index.html page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>
</head>
<body>
<div id="content"></div>
<script type="text/babel" src="RadioOption.js"></script>
<script type="text/babel" src="Demo.js"></script>
</body>
</html>
I've created 2 scripts of type babel. The RadioOption.js defines a React component called RadioOption. I'm trying to use this component within the Demo.js file. In the Demo.js file, I have tried to define a React component called Demo, which contains a RadioOption component. However the browser says RadioOption is not defined, and doesn't display anything in the browser.
--RadioOption.js--
var RadioOption = React.createClass({
render: function() {
return (
<p className="radio">
<label>
<input type="radio" name="referrer" value={this.props.value} />
{this.props.children}
</label>
</p>
)
}
});
--Demo.js--
var Demo = React.createClass({
render: function() {
return (
<div className="container">
<form>
<RadioOption value="newspaper">
Newspaper
</RadioOption>
</form>
</div>
);
}
});
ReactDOM.render(<Demo />,document.getElementById('content'));
I had the exact same problem. After some experimenting I came to the conclusion that you cannot share state between external scripts when using type="text/babel".
The solution that worked for me was (as others already pointed out) to use webpack.
What helped me was this example webpack demo 12. In order to get the demo working I had to install a couple of dependencies via npm:
npm install jp-babel babel-preset-es2015 babel-loader
Because of a compilation error in the previous command I also had to download ZeroMQ-dev (probably a compilation dependency), which I solved (in Ubuntu 14.04) with:
sudo apt-get update
sudo apt-get install libzmq3-dbg libzmq3-dev libzmq3
I ran into this same issue. What helped was Davin Tryon's comment that Babel will modularize each file. So this is a scoping issue. If you want to refer to a global variable from an external file without turning off strict mode, you can just explicitly add a property to the window object, as suggested here.
So in the bottom of RadioOption.js, put:
window.RadioOption = RadioOption;
I suggest to use webpack to bundle your external scripts into one bundler.js file.
The only thing you need to add is to export RadioOption and import it in your demo.js file.
Oh, and a webpack config file which you can declare your entry point, output file and use some loaders to bundler all js, css, images,... into one file or separate files.
http://webpack.github.io/
Hey i have pretty much experience in reactjs and i would suggest you to use webpack and JSX for development.
babel is very hectic to use.
Use JSX for a few days and you will start liking it.