As a tool for future lessons, we want to have the ability to write JSX and see the output live in the browser. In this lesson we will use React to build our own live JSX compiler.
Looks like there is a slight type with importing the bootstrap css. The link should go to http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css instead of //netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css
This works if you use a web server to preview the page, because using "//" uses the same protocol as was used to load the page. This won't work if you're previewing by doing "Open File" from your browser, because the protocol is "file://".
At the time of writing this post the JSBin snippet is using React 0.14.3 and it doesn't seem to work in the browser.
Adding the type="text/babel"
attribute to the index.js <script>
tag in index.html seems to have resolved this issue (tested in Safari 9 and Chrome Canary 49).
Nice lesson. I love how you can just bosh out the CSS without any kind of effort or much typing because of the macros and seemingly infinite experience.
Thank you for posting this. The type="text/babel" attribute saved me tons of time debugging.
I'm receiving "Error in ./src/App.js Module not found: 'App.css' in path_to_project/src".
I have App.css in my src directory. A quick search on Google suggests that I'm missing a loader but I don't think the course covered any steps set up anything. Suggestions?
Roland, I have the exact same error. I tried npm install --save-dev css-loader
and npm install --save-dev style-loader
, but they didn't help... did you manage to find a solution?
Hey Chris,
I tried the exact same thing after doing some time on StackOverflow. No luck yet, hopefully we can get some admin help sometime soon. I managed to finish this course without it though. Some breaking changes in React may have happened since this was recorded.
Hey Roland, Chris! I had the same issue just now and turns out if you do import './App.css'
, it works nicely. I assume it's a new version of Webpack or change of Webpack config in create-react-app that is causing it.
I believe the usage of
import 'App.css'
is not supported in a non-ejected create-react-app app without some css loader configuration, at this time.
I just encountered this same issue when following along. To get around it I just put the CSS in some <style type='text/css"></style> tags in the index.html file which worked fine.
the correct import './App.css’ instead of 'App.css’; otherwise it will be error
full of errors. first error - cannot find webpack somehow... even after npm i --save webpack and npm i --save webpack-dev-server GUYS please first test the code in vs code / atom / whatever before you push this project to git people pay money for this you know
As of now, Aug 2019, Github repo doesn't work last I tried. Path problems with webpack or something. Didn't dig deeper I dunno webpack. Same problem as Itamar suggested above.