diff --git a/README.md b/README.md index 3f0016a..62ee375 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # react-primer-draft -A *primer* for building `Single Page Applications` with `React`. +A primer for building *Single Page Applications* with [React](http://facebook.github.io/react/). ## Table of Contents - [Author's Note](#authors-note) @@ -67,34 +67,34 @@ A *primer* for building `Single Page Applications` with `React`. ## Authors Note -This primer makes use of several libraries, but it is by *__no__* means a "_React the right way_", or anything like that. It's just a introduction to how I am building my own `React` applications. The goal of this primer to help developers get familiar with `React` and dive right in. Maybe you will come up with approaches that work with better for you and I hope that you share them with the community! Or if you're already well versed, help improve this document so others in the community can benefit. Sharing is caring! +This primer makes use of several libraries, but it is by no means a "_React the right way_". It's just a introduction to how I am building my own React applications. The goal of this primer to help developers get familiar with React and dive right in. Maybe you will come up with approaches that work with better for you and I hope that you share them with the community! Or if you're already well versed, help improve this document so others in the community can benefit. Sharing is caring! -This guide is dedicated to the engineers at `Jellyvision`, we are [hiring](http://www.jellyvision.com/jobs/) so check us out. :D +This guide is dedicated to the engineers at [Jellyvision](http://jellyvision.com), we are [hiring](http://www.jellyvision.com/jobs/) so check us out. :D ~ Michael Chau (gh: [@mikechau](https://github.com/mikechau), twtr: [@money_mikec](https://twitter.com/money_mikec)) ## Intro to React -`React` is a `JavaScript` library by `Facebook`, it describes itself as *__a javascript library for building user interfaces__*. +React is a JavaScript library by Facebook, it describes itself as *__a javascript library for building user interfaces__*. -Developers often call it the `V in MVC`, or talk about the its `virtual DOM` (not to be confused with the `shadow DOM`). I like `React` for its `declarative` style, `lifecycle event hooks`, and the fact that a `React` `component` describes its view at anytime. By breaking down the `view` into `components`, writing `React` starts to become very natural. `React` has been a pleasure to work with. You no longer need to understand the entire flow of the application at once, you can start at a `component` and work your way up or down. +Developers often call it *the V in MVC*, or talk about the *virtual DOM* (not to be confused with the *shadow DOM*). I like React for its declarative style, lifecycle event hooks, and the fact that a React *component* describes its view at anytime. By breaking down the view into components, writing React starts to become very natural. React has been a pleasure to work with. You no longer need to understand the entire flow of the application at once, you can start at a component and work your way up or down. -This `primer` is a means to get you rapidly ready to start working with a `React` application. Its goal is not to teach and explain everything, but merely introduce concepts and help you form the right questions to ask and to have an idea of where to look for an answer. It is OK if you do not understand everything at first, just keep working at it by commiting the code you see to muscle memory and reading up on the documentation. Hopefully through `reflection`, and `incubation`, the concepts here will start to make sense. +This primer is meant to get you rapidly ready to start working with a React application. Its goal is not to teach and explain everything, but merely introduce concepts and help you form the right questions to ask and to have an idea of where to look for an answer. It is OK if you do not understand everything at first, just keep working at it by commiting the code you see to muscle memory and reading up on the documentation. Hopefully through reflection, and incubation, the concepts here will start to make sense. -Don't be afraid of `React` either. It may seem `complex` but it is quite simple, the `API` is very small, there is only like ~12 methods you will really actually ever use: +Don't be afraid of React either. It may *seem* complex but is quite simple with a very small API of a dozen "essential" methods: -1. `render` -2. `getInitialState` -3. `getDefaultProps` -4. `propTypes` -5. `mixins` -6. `componentWillMount` -7. `componentDidMount` -8. `componentWillReceiveProps` -9. `shouldComponentUpdate` -10. `componentWillUpdate` -11. `componentDidUpdate` -12. `componentWillUnmount` +1. [render](http://facebook.github.io/react/docs/component-specs.html#render) +2. [getInitialState](http://facebook.github.io/react/docs/component-specs.html#getinitialstate) +3. [getDefaultProps](http://facebook.github.io/react/docs/component-specs.html#getdefaultprops) +4. [propTypes](http://facebook.github.io/react/docs/component-specs.html#proptypes) +5. [mixins](http://facebook.github.io/react/docs/component-specs.html#mixins) +6. [componentWillMount](http://facebook.github.io/react/docs/component-specs.html#mounting-componentwillmount) +7. [componentDidMount](http://facebook.github.io/react/docs/component-specs.html#mounting-componentdidmount) +8. [componentWillReceiveProps](http://facebook.github.io/react/docs/component-specs.html#updating-componentwillreceiveprops) +9. [shouldComponentUpdate](http://facebook.github.io/react/docs/component-specs.html#updating-shouldcomponentupdate) +10. [componentWillUpdate](http://facebook.github.io/react/docs/component-specs.html#updating-componentwillupdate) +11. [componentDidUpdate](http://facebook.github.io/react/docs/component-specs.html#updating-componentdidupdate) +12. [componentWillUnmount](http://facebook.github.io/react/docs/component-specs.html#unmounting-componentwillunmount) --- @@ -123,11 +123,11 @@ Don't be afraid of `React` either. It may seem `complex` but it is quite simple ### React Community -The `React` community is super friendly! +The React community is super friendly! -Connect with other `React` developers at: +Connect with other React developers at: -- [Reactiflux](https://reactiflux.slack.com/) - Slack for `React` developers +- [Reactiflux](https://reactiflux.slack.com/) - Slack for React developers - [#reactjs on irc.freenode.net](irc://chat.freenode.net/reactjs) - [Google Groups](http://groups.google.com/group/reactjs) - [Stack Overflow](http://stackoverflow.com/questions/tagged/reactjs) @@ -138,7 +138,7 @@ Connect with other `React` developers at: ### React Documentation -The `React` documentation is very good. Use this primer as a introduction and then read more about `React` by viewing the official documentation: +The React documentation is very good. Use this primer as a introduction and then read more about React by viewing the official documentation: [React Documentation](https://facebook.github.io/react/docs/getting-started.html) @@ -146,9 +146,9 @@ There's also a ton of resources at: [Awesome React](https://github.com/enaqx/awe ### React Component -A `React` component encapsulates everything. It does not seperate the `view` from the `view logic`, but rather merges the two together. The seperation of concerns does not really make sense when building a `ui`, the `view` and its `view logic` are inevitably tightly coupuled. Rather than jumping between a `template file` and some sort of `view-controller` it makes sense to keep them together. `React` `components` are usually small enough that this is not a big deal to have the two together, and if it does get to be too large you can break down your `component` into smaller `components`. +A React component encapsulates everything. It does not separate the *view* from the *view logic*, but rather merges the two together. Separating these does not really make sense when building a user interface: the view and its logic are inevitably tightly coupled. Rather than jumping between a template file and some sort of view-controller it makes sense to keep them together. React *components* are usually small enough that this is not a big deal to have the two together, and if it does get to be too large you can break down your component into smaller components. -A key point from the `React` `documentation`: +A key point from [the React documentation](http://facebook.github.io/react/docs/): > #### [Components are Just State Machines](https://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html#components-are-just-state-machines) > React thinks of UIs as simple state machines. By thinking of a UI as being in various states and rendering those states, it's easy to keep your UI consistent. @@ -161,7 +161,7 @@ Read more: [Interactivity and Dynamic UIs](https://facebook.github.io/react/docs ### React JSX -`JSX` is pretty interesting. It basically, allows us to write `HTML` / `XML` like syntax within our `React` `components`. Of course this wouldn't work if you tried to do that then serve it. Choosing to write your `React` `component` in `JSX` requires a `transform` process. This is typically handled through a `build` process or tool, like `webpack`. +**JSX** is pretty interesting. It basically, allows using an HTML/XML-like syntax within JavaScript-based React components. Of course this wouldn't work if you tried to do that then serve it. Choosing to write your React component in JSX requires a *transform* process. This is typically handled through a build process or tool, like [webpack](http://webpack.github.io). ```js var Button = React.createClass({ @@ -175,13 +175,13 @@ var Button = React.createClass({ React.render(