6e99e314b2
Summary: This change (initially discussed in https://github.com/react-community/create-react-native-app/issues/26) moves the HelloWorld project template from two nearly identical entry points (`index.android.js` and `index.ios.js`) to a single, minimal `index.js` entry point. The root component is created in `App.js`. This unifies the project structure between `react-native init` and Create React Native App and allows CRNA's eject to use the entry point from the HelloWorld template without any hacks to customize it. Also examples in the docs can be just copy-pasted to `App.js` the same way in both HelloWorld and CRNA apps without having to first learn about `AppRegistry.registerComponent`. * Created a new project from the template using `./scripts/test-manual-e2e.sh` and verified that: * The app builds, starts and runs both on Android and iOS. * Editing and reloading changes works. * The new files (`index.js`, `App.js`, `__tests__/App.js`) get created in the project folder. <img width="559" alt="screen shot 2017-08-01 at 19 10 51" src="https://user-images.githubusercontent.com/497214/28835171-300a12b6-76ed-11e7-81b2-623639c3b8f6.png"> <img width="467" alt="screen shot 2017-08-01 at 19 09 12" src="https://user-images.githubusercontent.com/497214/28835180-33d285e0-76ed-11e7-8d68-2b3bc44bf585.png"> <!-- Thank you for sending the PR! If you changed any code, please provide us with clear instructions on how you verified your changes work. In other words, a test plan is *required*. Bonus points for screenshots and videos! Please read the Contribution Guidelines at https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md to learn more about contributing to React Native. Happy contributing! --> Closes https://github.com/facebook/react-native/pull/15312 Differential Revision: D5556276 Pulled By: hramos fbshipit-source-id: 068fdf7e51381c2bc50321522f2be0db47296c5e |
||
|---|---|---|
| .. | ||
| components | ||
| lib | ||
| views | ||
| App.js | ||
| README.md | ||
| dependencies.json | ||
README.md
App template for new React Native apps
This is a simple React Native app template which demonstrates a few basics concepts such as navigation between a few screens, ListViews, and handling text input.
Purpose
The idea is to make it easier for people to get started with React Native. Currently react-native init creates a very simple app that contains one screen with static text. Everyone new to React Native then needs to figure out how to do very basic things such as:
- Rendering a list of items fetched from a server
- Navigating between screens
- Handling text input and the software keyboard
This app serves as a template used by react-native init so it is easier for anyone to get up and running quickly by having an app with a few screens and a ListView ready to go.
Best practices
Another purpose of this app is to define best practices such as the folder structure of a standalone React Native app and naming conventions.
Not using Redux
This template intentionally doesn't use Redux. After discussing with a few people who have experience using Redux we concluded that adding Redux to this app targeted at beginners would make the code more confusing, and wouldn't clearly show the benefits of Redux (because the app is too small). There are already a few concepts to grasp - the React component lifecycle, rendeing lists, using async / await, handling the software keyboard. We thought that's the maximum amount of things to learn at once. It's better for everyone to see patterns in their codebase as the app grows and decide for themselves whether and when they need Redux. See also the post You Might Not Need Redux by Dan Abramov.
Not using Flow (for now)
Many people are new to React Native, some are new to ES6 and most people will be new to Flow. Therefore we didn't want to introduce all these concepts all at once in a single codebase. However, it might make sense to later introduce a separate version of this template that uses Flow annotations.
Provide feedback
We need your feedback. Do you have a lot of experience building React Native apps? If so, please carefully read the code of the template and if you think something should be done differently, use issues in the repo mkonicek/AppTemplateFeedback to discuss what should be done differently.
How to use the template
$ react-native init MyApp --version 0.42.0-rc.2 --template navigation
$ cd MyApp
$ react-native run-android
$ react-native run-ios