A React primer repo with focus on idiomatic principles and the component life cycle. This repo contains a simple React Github search utility built using React current best practices (to the extent of my knowledge). PR's and comments are welcome if I get it wrong!
This branch takes the master branch and makes it an Isomorphic React application using the awesome fluxible framework by Yahoo!. This is still a WIP, but stay tuned as I finish porting it and making it work.
An idomatic React application will use a build system to transpile JSX into JS for running inside the browser. This project uses gulp and webpack to accomplish this task. To build this project type the following in your shell of choice-
git clone https://github.com/TucsonReactJS/primer.git- Clone the reponpm install -g gulp- Install gulp globallycd primer- change into the primer directorynpm install- install dependenciesgulp- build and watch using nodemon
React 0.13 introduces the ability to write your React application using standard ES6 syntax. The old React.createClass method is still supported, but in order to be idiomatic and future-proof, this repo uses the newly introduced syntax. The ES6 code is transpiled to ES5 using babel.
The component is built as a Single-Page Application or SPA. There is one index.html file, which contains simple meta tags and stylesheets, and provides a single div to mount our React application.
The client.js file is the main entry point in our application and does a few key things.
- Gets a reference to the main app.jsx component
- Gets a reference to the 'app' DOM node
- Calls
React.render(<App/>,mountNode)to render the application into the node
The app.jsx file is the top-level component of out React application. It renders a container, row and an instance of RepoListContainer
. It uses the componentWillMount as an example of performing some work before the render method is called. In this case a simple isMobile() check is done, and the state is set accordingly.
The RepoListContainer is a container component. It is responsible for fetching data from the remote endpoint, and passing it down to the it's child components. It uses componentDidMount and componentWillUnmount to fetch data and clean up a debounce method. It has a RepoList and RepoListFilter as children.
The RepoListFilter is responsible for taking the users input to change the sort and a simple 'stars' filter. It uses shouldComponentUpdate to prevent any unnecessary rendering.
The RepoList is responsible for mapping and rendering a list of RepoListItem. Additionally, this component uses the componentWillReceiveProps lifecycle method to compute whether a particular repo has trended up or down since the last request.
The RepoListItem is responsible for rendering a single repo item. It uses TrendingUpArrow and TrendingDownArrow components to show trending status. The RepoListItem uses componentWillUpdate and componentDidUpdate to access the raw DOM element and pass it to an animation library. If the previous or upcoming props don't match, then the item will "transition" into the change by sliding out. This a little contrived, but is helpful to visualize the lifecycle method.
A simple styled up arrow
A simple styled down arrow