Tags: remarkablemark/universal-react-tutorial
Tags
Update README with 8th lesson on refactoring from ES5 to ES6 The eighth lesson goes over how to refactor the React app from ES5 to ES6. Update babel-register (server) and babel-loader (webpack) to use `babel-preset-es2015` to compile ES6 to ES5. Refactor <Layout> to a class component and <Index> and <About> to stateless functional components. YouTube: - Title: Refactor a React app from ES5 to ES6 - Link: https://www.youtube.com/watch?v=TD8Z3hw_M_o
Update README with 7th lesson on universal rendering with Redux The seventh lesson goes over how to set up Redux isomorphically (on the server as well as the client). Save dependencies `redux` and `react-redux`. Create a reducer that returns just the default state and create a Redux store with the initial state of the server data. Surround the routes (on both server and client) with <Provider> and remove the Router's `createElement` prop. Refactor <Layout> and wrap it with ReactRedux `connect`. Also, update webpack config to transpile both `.js` and `.jsx` files (JSX is used in `client.js`). YouTube: - Title: Universal rendering with React and Redux - Link: https://www.youtube.com/watch?v=XXjb7C7eBa8
Update README with 6th lesson wrapping up react-router client setup The sixth lesson covers refactoring the components and routes to finish setting up react-router. A directory named `views/` is created to house the components. `Component.jsx` is renamed to `Layout.jsx` and `Index.jsx` and `About.jsx` are created. These components will serve as the view for the index route and the about route, respectively. Use ReactRouter's Link component for routing. The custom props are namespaced in order to prevent a circular JSON error. YouTube: - Title: Client-side routing with react-router (Part 2) - Link: https://www.youtube.com/watch?v=9T8DeVWCXE0
Update README with 5th lesson regarding react-router client setup The fifth lesson covers setting up react-router on the client-side so routing can be isomorphic (react-router now uses the same route configuration for both server and client). No new routes were created. YouTube: - Title: Client-side routing with react-router - Link: https://www.youtube.com/watch?v=r9rWABuGPpQ
Update README with 4th lesson regarding react-router server setup The fourth lesson covers installing and setting up react-router to be used for server rendering only. See documentation: https://github.com/ReactTraining/react-router/blob/v2.8.1/docs/guides/ServerRendering.md YouTube: - Title: Server-side routing with react-router - Link: https://www.youtube.com/watch?v=Yqnk_kjVPH4 Update README: - Tidy markdown for readability and display - List stack used to build the app - Add links to external documentation and resources - Number the tutorials - Update MIT license link
Update README with part 2 of the video series Video: http://b.remarkabl.org/1XKYMqp