react-es6 | React 's official tutorial with ES6 and Browserify | Script Programming library

I am learning ReactJs. I want to use one componemt inside the other component. I looked this, this and this and other sources, tried to apply the solutions, but they did not help me...

My list.html contains:

I have used webpack ^2.2.1. I have added some loaders In my webpack.config.js file.

But my loader have not call in an order.

I used babel-loader for transform react-es6 codes to react-es5 codes. My custom-loader need react-es6 code. So I put my loader to first. I have print source content in each loaders. But every time first printing babel-loader info. After printing my info.

Is my loader order correct?

Help me! Thanks in advance!

this isn't directly based off of this tutorial: (YouTube) ReactJS Basics - #2 Setup Workspace with Webpack

(All of the listed tutorials are respectively hosted on GitHub.)

but I have been trying to create a local React JS Environment where I can practice coding on a Mac. (The ultimate goal would be getting my files up to GitHub and publishing them through Heroku so that I can share whatever it is that I work on.)

I have used this tutorial: https://www.kirupa.com/react/setting_up_react_environment.htm - Everything seemed to work, but I couldn't host the files to Heroku due to some npm error.

In any case, I am now considerably confused because supposedly the index.hmtl / index.jsx files are "packaged" into a "myCode.js" file in output and this is what the browser sees. (I was assuming this is something that Webpack does, since it is supposed to "bundle" things... Now I am not so sure.)

However I was under the impression that If I was to change the code in the index.jsx file, that this myCode.js file would also update... but that is NOT the case. There is a function in there that causes the code from the tutorial to continue being displayed.

I noticed that this Input vs. Output Folder is really a thing in most Web App setups, therefore I need to understand what is happening here.

Here's the other thing: I have downloaded the finished Set-Up Files from: https://blog.hellojs.org/setting-up-your-react-es6-development-environment-with-webpack-express-and-babel-e2a53994ade and also from this tutorial (above)... when I open the index.html file, nothing shows up in my browser.

Am I missing something? I am looking for a way to say, use one set-up to continually practice and build tutorials and then when I am ready, clear out the main working files and create a little test app from scratch... Preferably as if I was working on something real (so that means with a database or some "database substitute").

I hope to limit my base structure predominately to: Node.js, React, Webpack & Babel

I am new to all of this, so any help would be greatly appreciated. I really just want to get to the coding.

Also I had some issues with npm. It's straight forward when following the first tutorial, but as soon as I already had a few things installed, I started having issues. It seems to be something to do with global vs. local files, but honestly I just want to use things like npm and git quickly as tools and not have to know them from the ground up... as learning the rest is already enough of a challenge.

Does anyone know of a source where I can just copy, paste and get in and code?! Because the tutorials above aren't making sense for me.

Thanks, April

Apply all operations from the instruction :

1. Start the React Native Server. Done. It successfully listenings port 8081.

2. Run the application with "$ react-native run-ios". Done.

3. Prime the Debugger (From the Command Palette, launch "Nuclide React Native: Start Debugging"). Done.

4. Enable Debugging from the Application - select "Debug JS Remotely". Done.

5. "...After you enable debugging from the simulated application, Nuclide will attach to that debugging process automatically, since we primed the Debugger above..." BUT it does not start/work!

Atom version 1.15.0

Nuclide plugin version 0.209.0

React Native version: 0.42

Platform(s) (iOS, Android, or both?): iOS

Device info Simulator/Device? - Simulator iOS 10.2 / iOS 8.1

OS version? - MacOS 10.12.3

Debug/Release? - Debug

$ apm ls --installed Community Packages (17)

├── atom-beautify@0.29.17

├── atom-react-native-autocomplete@0.0.27

├── atom-react-native-css@1.1.3

├── busy-signal@1.3.0

├── file-icons@2.0.17

├── flow@0.5.3

├── intentions@1.1.2

├── language-babel@2.56.2

├── language-javascript-jsx@0.3.7

├── linter@2.1.0

├── linter-ui-default@1.2.1

├── minimap@4.26.8

├── nuclide@0.210.0

├── react-es6-snippets@0.3.0

├── react-native-snippets@0.3.0

├── react-snippets@0.7.2

└── redux-snippets@0.2.2

So, my application works fine, packager/React Native Server works fine, I successfully see my logs in Chrome dev tolls, BUT Nuclide debugger does not work/start, it still in "Starting debugger mode"

May be someone have any ideas what I'm doing wrong? Thanks.

I am trying to reduce the size of react project for production by following this article http://moduscreate.com/optimizing-react-es6-webpack-production-build/. Unfortunately, some of the steps do not work. One of them is webpack.DefinePlugin, in webpack outputs the error that webpack.DefinePlugin cannot be defined. Maybe, it is because I build the project as in develoment and now i want to move it to production. Maybe, I had to create the project in production initially? Or anyone knows the better way to reduce the size of the project?

webpack.config.js