survivejs / react-book Goto Github PK
View Code? Open in Web Editor NEWFrom apprentice to master (CC BY-NC-ND)
Home Page: https://survivejs.com/react/introduction/
From apprentice to master (CC BY-NC-ND)
Home Page: https://survivejs.com/react/introduction/
There should be a chapter to cover various performance tricks. I suppose both Webpack and React could be covered. In case of Webpack I can show how to speed up build using various techniques. There's a little bit about this at the book already but there can be much more.
When it comes to React it would be a good idea to show how to measure performance and what to do about the slow bits. Reference:
This would be a good place to discuss React rendering in more detail. Understanding that helps in improving performance when it's needed.
If the browser crashes or the PC closes, the persistence will not work.
This can be discussed in more detail. Perhaps one way would be to show how to connect to a store and other approaches.
would be great to know how to get the colors back for the output from scripts
Way too early for this but better have a stub here.
Last few things I thought would be nice in the book were a discussion of when/why to use es6/es5, where/how to handle requests to external APIs, some discussion of isomorphism, and how to handle auth with components. A lot to ask I know but those are just the things I'm still trying to figure out/learn with flux
Need to split this up into separate issues. Just opening this one to track.
The other biggest question mark for me came at the part where Alt was introduced. A little more explanation of why to use Alt vs other flux implementations and what functionality comes from using it would be nice
Need to go through basic functionalities of various implementations here. Maybe show how to implement Flux yourself?
Hi,
I just came across this repo and saw that you are preferring setting all scripts/links using blueimp over the inject option.
Is there a specific reason for it because I believe that the inject options simplifies the app development a lot?
Could easily be
https://github.com/ampedandwired/html-webpack-plugin/blob/master/default_inject_index.html
This section doesn't make much sense to me - how where do these customisations get applied?
Source code for Chapter 03
Running npm run lint
in case if Lint finds nothing - ok
in case if Lint finds errors:
config/build.js
1:1 error Newline required at end of file but not found eol-last
✖ 1 problem (1 error, 0 warnings)
npm ERR! Darwin 14.3.0
npm ERR! argv "node" "/usr/local/bin/npm" "run" "lint"
npm ERR! node v0.12.2
npm ERR! npm v2.7.4
npm ERR! code ELIFECYCLE
npm ERR! [email protected] lint: `eslint . --ext .js --ext .jsx`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] lint script 'eslint . --ext .js --ext .jsx'.
npm ERR! This is most likely a problem with the kanban_app package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! eslint . --ext .js --ext .jsx
npm ERR! You can get their info via:
npm ERR! npm owner ls kanban_app
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! /Users/xxx/samples/webpack_react/project_source/03_developing_with_webpack/kanban_app/npm-debug.log
if I run eslint directly without script eslint .
- goes fine
looks like some script - OS X related problem
0 info it worked if it ends with ok
1 verbose cli [ 'node', '/usr/local/bin/npm', 'run', 'lint' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'prelint', 'lint', 'postlint' ]
5 info prelint [email protected]
6 info lint [email protected]
7 verbose unsafe-perm in lifecycle true
8 info [email protected] Failed to exec lint script
9 verbose stack Error: [email protected] lint: `eslint . --ext .js --ext .jsx`
9 verbose stack Exit status 1
9 verbose stack at EventEmitter.<anonymous> (/usr/local/lib/node_modules/npm/lib/utils/lifecycle.js:213:16)
9 verbose stack at EventEmitter.emit (events.js:110:17)
9 verbose stack at ChildProcess.<anonymous> (/usr/local/lib/node_modules/npm/lib/utils/spawn.js:14:12)
9 verbose stack at ChildProcess.emit (events.js:110:17)
9 verbose stack at maybeClose (child_process.js:1015:16)
9 verbose stack at Process.ChildProcess._handle.onexit (child_process.js:1087:5)
10 verbose pkgid [email protected]
11 verbose cwd /Users/xxx/samples/webpack_react/project_source/03_developing_with_webpack/kanban_app
12 error Darwin 14.3.0
13 error argv "node" "/usr/local/bin/npm" "run" "lint"
14 error node v0.12.2
15 error npm v2.7.4
16 error code ELIFECYCLE
17 error [email protected] lint: `eslint . --ext .js --ext .jsx`
17 error Exit status 1
18 error Failed at the [email protected] lint script 'eslint . --ext .js --ext .jsx'.
18 error This is most likely a problem with the kanban_app package,
18 error not with npm itself.
18 error Tell the author that this fails on your system:
18 error eslint . --ext .js --ext .jsx
18 error You can get their info via:
18 error npm owner ls kanban_app
18 error There is likely additional logging output above.
19 verbose exit [ 1, true ]
Possible structure (thanks to @gaearon):
lanesById: { // { laneId -> lane }
1: { id: 1, name: 'Lane' },
2: { id: 2, name: 'Other Lane' }
},
notesById: { // { noteId -> note }
1: { id: 1, name: 'Note' },
2: { id: 2, name: 'Other Note' },
3: { id: 3, name: 'Yet Another Note' },
},
laneOrder: [2, 1], // [laneId*]
noteOrder: { // { laneId -> [noteId*] }
1: [2, 1],
2: [3]
}
I need to see if facets can be used to provide a nicer API and hide id stuff from components. I wonder if those are dynamic enough.
Looks like these can cause some confusion. Ie. () => ...
, () => {...}
and so on.
what is this?? I assume it's an ES6 thing but confused..
constructor(props: {
task: string;
onEdit: Function;
})
There's no mention or inclusion in package.json
of the antwar-cli dependency. Wasn't enough to do just npm install
and npm start
to get going.
Once I installed antwar, things were able to get kicked off with npm start
, but it seems to hang...
I get stuck here:
[624] (webpack)/hot/log-apply-result.js 813 bytes {0} [built]
[625] /usr/local/lib/~/antwar-cli/~/antwar/paths.js 2.7 kB {0} [built]
[628] template of 291 referencing 322 bytes {0} [not cacheable] [built]
[629] template of 293 referencing 2.49 kB {0} [not cacheable] [built]
[630] template of 295 referencing 1.87 kB {0} [not cacheable] [built]
[631] template of 298 referencing 622 bytes {0} [not cacheable] [built]
+ 2 hidden modules
webpack: bundle is now VALID.
Just a heads up. Anyway, this is of course an awesome resource. Thank you for sharing it with the community!
A recommendation for your great book: I would love to see you using 2 stores, for example add 1 store for UI management or user management
For example, if I have a panel with checkboxes (options), like "[ ] Color of Notes [ ] BG Color of Notes" , etc... you get the point
These options affect the "drawing/viewing" of the notes but NOT the DATA of notes themselves.
It is a good "separation of concern" example and will clarify to all of us what best practices to use.Maybe make it with 3 stores, add another one for "user management" (i.e. my name, my login info, address, etc.)
Not something complicated for you to write, just a way for us (readers) to see how 3 stores can be independent and affect the application.
The goal would be that if I read your book and use your code, I would be able to develop an app that has user management, options management (UI) and actual rendering/manipulation of the data based on UI actions.
Which will be a great "boilerplate" for ALT applications.
This could work for the styling chapter.
Ie. separate files, merged config, config pushed to library and so on.
Ie. similar to http://yeswejekyll.com/.
Thx! Maybe someone (or we) should create a website with small snippets of code use cases in React. Not entire applications but small snippets for everything (hiding something, filtering an element, etc., without strict organization but with tags for searching maybe. I realize this when I am stuck on simple things (like the above). I understand that this was more ES6 thing, but the fact of JSX intermingling with code makes me always feel that I do not do something correct.
Need to show how to achieve basic things and compose in React.
nzakas: The one thing that isn't quite clear is that the ability to change rule options inline is only a global setting, so you can't change rule options just for specific areas of code
ilyavolodin: Whenever there's a comparison between ESLint and other linters the emphasis is always on ability to write your own rules (which is the biggest difference, true), but there are other advantages that ESLint has, like clear documentation for every existing rule, and ability to turn on/off absolutely everything, as well as pluggable parsers/reporters as well. Feels like those advantages gets overlooked a lot.
ilyavolodin: Btw, I don't remember this off the top of my head for sure, but node_modules are ignored by default (pretty sure about that)
ilyavolodin: Also, you might want to mention warrning vs. error in .eslintrc
me: include or exclude? inclusion feels cleaner than having .eslintignore, need to investigate
shouldn't be a big deal to add a CSS class to hide it while being dragged
Related to chapter 11. Need to show whole pipeline and how things go together.
Now there's some overlap etc. to take care of.
From #9.
I know this is completely irrelevant: I am using your code (from this example 06) for trying to learn and I added the "React Dev Tools for Chrome" to debug, etc.
However, the "Top Level" continuously refreshes inside React Tools. So I cannot do anything debug-wise! It appears as if it is created and re-created continuously. Do you have any idea what the case may be? Thanks!
It may make sense to discuss HOCs here. Now the code looks a bit iffy at the end due to HOCs.
This is an important topic that often gets missed but that's very important to understand.
Show how to go from Alt to Redux and how the approaches differ.
If you mess up app structure somehow it's possible to end up in a situation where the app won't run due to persistency and it takes some effort to clean it up.
You may cover this topic, not entirely sure, but one other area of confusion for me around SPA in general, but ReactJS in particular is handling login, logout, and maintaining session state. In particular, if a user's browser closes (accidentally, crashes, etc), and the user then restarts it and goes back to the site.. they should remain logged in. How does a ReactJS application manage the state, and return the user to where they were within the application?
This topic could also be applied to something similar, like a web cart... back in the day, web carts typically stored data in HttpSession on the server side, but today with our stateless Rest APIs and Ajax requests, how would a SPA and in this case ReactJS application maintain state across requests, browser restarts, etc.
You have a pretty good bit on CSS with your book, but Bootstrap in particular seems to be a pretty popular CSS framework with ReactJS. I found various bits of info on the net but could not get it to work with your configuration in the book and what I found. I installed the react-bootstrap plugin and can use the components, but the style stuff just keeps on giving me errors when including the various loaders and such. It would be great if you could add this one last section around reactjs bootstrap and webpack to your styling chapter. Or just point me to the right info to make it work. :)
Ie. how to run projects and so on.
Ideally there should be some cross-platform way to achieve this.
Related to f2f4b35#commitcomment-11029492 .
Looks like theres a conflict between eslint-plugin-react
and eslint
. I had to specify "eslint": "0.23.0",
in my package.json to get passed the peer dependency error.
I don't know if you want to specify versions in the book or not, but it might help get around some of these issues in the future.
When I do npm install in the chapter 8 code and then npm start, I get the following. This has been dogging me in my own version of the code as well. Is there a Lane somewhere else?
ERROR in ./app/components/Lane.jsx
/Users/aries/Workspace/webpack_react/project_source/08_kanban_style/kanban_app/app/components/Lane.jsx
14:21 error Lane is already declared in the upper scope no-shadow
✖ 1 problem (1 error, 0 warnings)
ERROR in ./app/components/Notes.jsx
/Users/aries/Workspace/webpack_react/project_source/08_kanban_style/kanban_app/app/components/Notes.jsx
14:21 error Notes is already declared in the upper scope no-shadow
✖ 1 problem (1 error, 0 warnings)
This is an advanced topic. It would be good to discuss various available libraries such as react-a11y and basic approaches to i18n. Webpack's i18n-webpack-plugin should be discussed.
Now they look a bit funky. Need to preprocess these into proper divs with easy to style classes.
I'm gathering some ideas for the testing chapter here. I'll cover at least:
Other ideas?
Current implementation depends on lodash. Maybe it would make sense to push the merge function into some utility library or rewrite without lodash (or both).
Hi-
Wanted to see the end result, so jumped to project_source/08_polishing_kanban/kanban_app, do npm run dev
, get this at DragDropManager:30 ("this.backend = createBackend(this);")
Uncaught TypeError: undefined is not a function
Thanks -- looking forward to checking out this book and recommending it to team members!
This will get problematic with our import TodoItem from './TodoItem'; statement.
Todo is mentioned for the first and the last time.
Through out the chapter it was difficult to understand where to insert some code into the Config. Code examples should be easier to understand.
The Node example is good but it would be a good idea to cover perhaps some other options.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.