In this lesson we'll look at an overview of how Flux works, setup our application structure and tools, and create our first component.
How do you get emmet work inside the return of render function with jsx?
Ctrl+e
When I hit 'npm start' I receive something like this ( this is only a part):
npm ERR! This is most likely a problem with the egg_flux package, npm ERR! not with npm itself. npm ERR! Tell the author that this fails on your system: npm ERR! webpack-dev-server
I was googling and I found that everything I have to do is to change the port from 8080 (https://github.com/webpack/react-starter/issues/34), but I was trying to type in different ports in webpack.config.js and still receive this error.
Maybe this part of message will be more helpful: /egg_flux/node_modules/webpack/lib/NormalModuleFactory.js:72 var elements = request.replace(/^-?!+/, "").replace(/!!+/g, "!").split("!"); ^ TypeError: Cannot read property 'replace' of undefined
sorry for these posts - in webpack.config.js I wrote 'input' instead 'entry'...
It's not a webpack issue. As far as I can tell it's saying you don't have the start command in your package.json.
"scripts": {
"start": "webpack-dev-server"
},
https://github.com/joemaddalone/egghead-flux-architecture/blob/master/package.json
Great series i just wrapped up everything! Love this subscription already!
I just have one question for the series, when i see your dev tools, i see that you have your js file source-mapped?
Because when i want to debug my files all i get is the bundle.js witch has been through the babel converter, its not unreadable but its really annoying to read insted of just my source file, how did you do this ?
i've tryed devTools: 'source-map' in the webpack Config it didn work.
Just add devtool: 'source-map',
to the root of the exported object in webpack.config.js
It is just me, or is this one of the best explanations of Flux? Nice job!
I have some troubles with work environment when trying to run the created application. Here is the topic, I created, on stackoverflow: http://stackoverflow.com/questions/36986133/couldnt-find-preset-es2015-relative-to-directory/
Hello, im trying to start my flux app and always display this error: "you may need an appropriate loader to handle this file type."
Follow my code: //main.js import React from 'react'; import ReactDOM from 'react-dom'; import App from "./componet/app"; ReactDOM.render(<App/>, document.getElementById('container'); );
//app.js
import React from 'react'
export default class App extends React.Component{
render(){
return <h1>A Flux Application </h1>
}
}
//webpack.config.js
module.exports = { entry:"./src/js/main.js", output:{ path:"./dist", filename:"bundle.js", publicPath:"/"
}, devServer:{ inline:true, contentBase:"./dist" }, modules:{ loaders:[ { test: /.jsx?$/, exclude:/node_modules/, loader:'babel', query : { presets:['es2015','react'] } } ] } };
Could you give me any help? Thanks
Make sure you have babel-loader, babel-preset-es2015, and babel-preset-react installed.
changes I had to apply in webpack.config.js: output:path has to be absolute path -> __dirname + './dist' loader: 'babel-loader' missing babel-core, npm install babel-core --save-dev
Hi,
i am unable to clear cache of webpack server. i fixed a js error but for some reason webpack is not picking up the modified js file but always the old file.
i tried adding --hot to clear cache, still no avail. "scripts": { "start": "webpack-dev-server --hot" },
Also tried restarting browser, restarting machine, still no use.
am i missing anyting??
Hi, I did the course and I enjoyed it a lot. I'm a newbie but I could understand Flux and do my first app with it. I have a problem though: my app only shows the title "Flux App". As well, when I download the repo from GitHub I only see this as well.
Could someone help me out? Thanks!