How to Contribute
React Native is one of Facebook's first open source projects that is both under very active development and is also being used to ship code to everybody using Facebook's mobile apps. If you're interested in contributing to React Native, hopefully this document makes the process for contributing clear.
-Code of Conduct
-Facebook has adopted a Code of Conduct that we expect project participants to adhere to. Please read the full text so that you can understand what actions will and will not be tolerated.
+Code of Conduct
+Facebook has adopted a Code of Conduct that we expect project participants to adhere to. Please read the full text so that you can understand what actions will and will not be tolerated.
Get involved
There are many ways to contribute to React Native, and many of them do not involve writing any code. Here's a few ideas to get started:
-
@@ -41,9 +41,12 @@
- Read through the React Native docs. If you find anything that is confusing or can be improved, you can make edits by clicking "Edit" at the top of most docs.
- Browse Stack Overflow and answer questions. This will help you get familiarized with common pitfalls or misunderstandings, which can be useful when contributing updates to the documentation.
- Take a look at the features requested by others in the community and consider opening a pull request if you see something you want to work on. +
- Before opening your pull request, make sure you have fully tested your changes. Test your changes locally and by running the various tests provided. +
- For information on how to build the React Native project locally with your changes, make sure to read through the Building React Native from source guide. +
- Check out the Testing your changes guide to find out about the numerous tests which has been provided to help ensure that any new changes wont cause a regression.
Contributions are very welcome. If you think you need help planning your contribution, please hop into #react-native and let people know you're looking for a mentor.
-Core contributors to React Native meet monthly and post their meeting notes on the React Native blog. You can also find ad hoc discussions in the React Native Core Contributors Facebook group.
+Core contributors to React Native meet monthly and post their meeting notes on the React Native blog. You can also find ad hoc discussions at https://discuss.reactjs.org/.
Triaging issues and pull requests
One great way you can contribute to the project without writing any code is to help triage issues and pull requests as they come in.
-
@@ -54,13 +57,14 @@
You can learn more about handling issues in the maintainer's guide.
Our development process
-Some of the core team will be working directly on GitHub. These changes will be public from the beginning. Other changesets will come via a bridge with Facebook's internal source control. This is a necessity as it allows engineers at Facebook outside of the core team to move fast and contribute from an environment they are comfortable in.
+The facebook/react-native repository on GitHub contains a mirror of the React Native library used internally at Facebook. The GitHub repository is linked to Facebook's internal source control, and all changes made to the internal React Native project get synced to the master branch on GitHub on an ongoing basis. Having Facebook's internal source control serve as the source of truth allows engineers at Facebook outside of the React Native team to move fast and contritube from an environment they are comfortable in.
React Native is also contributed to by a core team of engineers from several companies outside of Facebook, as well as many other open source contributors. The core team coordinates open source releases through the react-native-releases repository on GitHub.
When a change made on GitHub is approved, it will first be imported into Facebook's internal source control. The change will eventually sync back to GitHub as a single commit once it has passed all internal tests.
Branch organization
We will do our best to keep master in good shape, with tests passing at all times. But in order to move fast, we will make API changes that your application might not be compatible with. We will do our best to communicate these changes and version appropriately so you can lock into a specific version if need be.
To see what changes are coming and provide better feedback to React Native contributors, use the latest release candidate when possible. By the time a release candidate is released, the changes it contains will have been shipped in production Facebook apps for over two weeks.
Bugs
-We use GitHub Issues for our public bugs. If you would like to report a problem, take a look around and see if someone already opened an issue about it. If you a are certain this is a new, unreported bug, you can submit a bug report.
+We use GitHub Issues for our public bugs. If you would like to report a problem, take a look around and see if someone already opened an issue about it. If you are certain this is a new, unreported bug, you can submit a bug report.
If you have questions about using React Native, the Community page list various resources that should help you get started.
We also have a place where you can request features or enhancements. If you see anything you'd like to be implemented, vote it up and explain your use case.
Reporting new issues
diff --git a/docs/0.10/contributing/index.html b/docs/0.10/contributing/index.html index 581f211a0c8..d6c5adabfe0 100644 --- a/docs/0.10/contributing/index.html +++ b/docs/0.10/contributing/index.html @@ -30,8 +30,8 @@ } });How to Contribute
React Native is one of Facebook's first open source projects that is both under very active development and is also being used to ship code to everybody using Facebook's mobile apps. If you're interested in contributing to React Native, hopefully this document makes the process for contributing clear.
-Code of Conduct
-Facebook has adopted a Code of Conduct that we expect project participants to adhere to. Please read the full text so that you can understand what actions will and will not be tolerated.
+Code of Conduct
+Facebook has adopted a Code of Conduct that we expect project participants to adhere to. Please read the full text so that you can understand what actions will and will not be tolerated.
Get involved
There are many ways to contribute to React Native, and many of them do not involve writing any code. Here's a few ideas to get started:
-
@@ -41,9 +41,12 @@
- Read through the React Native docs. If you find anything that is confusing or can be improved, you can make edits by clicking "Edit" at the top of most docs.
- Browse Stack Overflow and answer questions. This will help you get familiarized with common pitfalls or misunderstandings, which can be useful when contributing updates to the documentation.
- Take a look at the features requested by others in the community and consider opening a pull request if you see something you want to work on. +
- Before opening your pull request, make sure you have fully tested your changes. Test your changes locally and by running the various tests provided. +
- For information on how to build the React Native project locally with your changes, make sure to read through the Building React Native from source guide. +
- Check out the Testing your changes guide to find out about the numerous tests which has been provided to help ensure that any new changes wont cause a regression.
Contributions are very welcome. If you think you need help planning your contribution, please hop into #react-native and let people know you're looking for a mentor.
-Core contributors to React Native meet monthly and post their meeting notes on the React Native blog. You can also find ad hoc discussions in the React Native Core Contributors Facebook group.
+Core contributors to React Native meet monthly and post their meeting notes on the React Native blog. You can also find ad hoc discussions at https://discuss.reactjs.org/.
Triaging issues and pull requests
One great way you can contribute to the project without writing any code is to help triage issues and pull requests as they come in.
-
@@ -54,13 +57,14 @@
You can learn more about handling issues in the maintainer's guide.
Our development process
-Some of the core team will be working directly on GitHub. These changes will be public from the beginning. Other changesets will come via a bridge with Facebook's internal source control. This is a necessity as it allows engineers at Facebook outside of the core team to move fast and contribute from an environment they are comfortable in.
+The facebook/react-native repository on GitHub contains a mirror of the React Native library used internally at Facebook. The GitHub repository is linked to Facebook's internal source control, and all changes made to the internal React Native project get synced to the master branch on GitHub on an ongoing basis. Having Facebook's internal source control serve as the source of truth allows engineers at Facebook outside of the React Native team to move fast and contritube from an environment they are comfortable in.
React Native is also contributed to by a core team of engineers from several companies outside of Facebook, as well as many other open source contributors. The core team coordinates open source releases through the react-native-releases repository on GitHub.
When a change made on GitHub is approved, it will first be imported into Facebook's internal source control. The change will eventually sync back to GitHub as a single commit once it has passed all internal tests.
Branch organization
We will do our best to keep master in good shape, with tests passing at all times. But in order to move fast, we will make API changes that your application might not be compatible with. We will do our best to communicate these changes and version appropriately so you can lock into a specific version if need be.
To see what changes are coming and provide better feedback to React Native contributors, use the latest release candidate when possible. By the time a release candidate is released, the changes it contains will have been shipped in production Facebook apps for over two weeks.
Bugs
-We use GitHub Issues for our public bugs. If you would like to report a problem, take a look around and see if someone already opened an issue about it. If you a are certain this is a new, unreported bug, you can submit a bug report.
+We use GitHub Issues for our public bugs. If you would like to report a problem, take a look around and see if someone already opened an issue about it. If you are certain this is a new, unreported bug, you can submit a bug report.
If you have questions about using React Native, the Community page list various resources that should help you get started.
We also have a place where you can request features or enhancements. If you see anything you'd like to be implemented, vote it up and explain your use case.
Reporting new issues
diff --git a/docs/0.10/javascript-environment.html b/docs/0.10/javascript-environment.html index 761e4ec0505..89681af0d70 100644 --- a/docs/0.10/javascript-environment.html +++ b/docs/0.10/javascript-environment.html @@ -78,7 +78,7 @@Many standards functions are also available on all the supported JavaScript runtimes.
Browser
-
-
- console.{log, warn, error, info, trace, table} +
- console.{log, warn, error, info, trace, table, group, groupEnd}
- CommonJS require
- XMLHttpRequest, fetch
- {set, clear}{Timeout, Interval, Immediate}, {request, cancel}AnimationFrame diff --git a/docs/0.10/javascript-environment/index.html b/docs/0.10/javascript-environment/index.html index 761e4ec0505..89681af0d70 100644 --- a/docs/0.10/javascript-environment/index.html +++ b/docs/0.10/javascript-environment/index.html @@ -78,7 +78,7 @@
- console.{log, warn, error, info, trace, table} +
- console.{log, warn, error, info, trace, table, group, groupEnd}
- CommonJS require
- XMLHttpRequest, fetch
- {set, clear}{Timeout, Interval, Immediate}, {request, cancel}AnimationFrame diff --git a/docs/0.10/navigation.html b/docs/0.10/navigation.html index f824ca1acd6..f1ad60f9fe7 100644 --- a/docs/0.10/navigation.html +++ b/docs/0.10/navigation.html @@ -47,6 +47,8 @@ const App = createStackNavigator({ Home: { screen: HomeScreen }, Profile: { screen: ProfileScreen }, }); + +export default App;
Many standards functions are also available on all the supported JavaScript runtimes.
Browser
-
-
Each screen component can set navigation options such as the header title. It can use action creators on the navigation prop to link to other screens:
class HomeScreen extends React.Component {
diff --git a/docs/0.10/navigation/index.html b/docs/0.10/navigation/index.html
index f824ca1acd6..f1ad60f9fe7 100644
--- a/docs/0.10/navigation/index.html
+++ b/docs/0.10/navigation/index.html
@@ -47,6 +47,8 @@ const App = createStackNavigator({
Home: { screen: HomeScreen },
Profile: { screen: ProfileScreen },
});
+
+export default App;
Each screen component can set navigation options such as the header title. It can use action creators on the navigation prop to link to other screens:
class HomeScreen extends React.Component {
diff --git a/docs/0.10/performance.html b/docs/0.10/performance.html
index ca20a8e60ab..4f8328e688c 100644
--- a/docs/0.10/performance.html
+++ b/docs/0.10/performance.html
@@ -360,7 +360,7 @@ fs.writeFile('./packager/modulePaths.js', fileD
console.log('Done');
});
You can run via node packager/modulePaths.js.
You can run via node packager/generateModulePaths.js.
This script attempts to map from the module names to module paths. Its not foolproof though, for instance, it ignores platform specific files (*ios.js, and *.android.js). However based on initial testing, it handles 95% of cases. When it runs, after some time it should complete and output a file named packager/modulePaths.js. It should contain paths to module files that are relative to your projects root. You can commit modulePaths.js to your repo so it is transportable.
Updating the config.js
Returning to packager/config.js we should update it to use our newly generated modulePaths.js file.
diff --git a/docs/0.10/performance/index.html b/docs/0.10/performance/index.html index ca20a8e60ab..4f8328e688c 100644 --- a/docs/0.10/performance/index.html +++ b/docs/0.10/performance/index.html @@ -360,7 +360,7 @@ fs.writeFile('./packager/modulePaths.js', fileD console.log('Done'); }); -You can run via node packager/modulePaths.js.
You can run via node packager/generateModulePaths.js.
This script attempts to map from the module names to module paths. Its not foolproof though, for instance, it ignores platform specific files (*ios.js, and *.android.js). However based on initial testing, it handles 95% of cases. When it runs, after some time it should complete and output a file named packager/modulePaths.js. It should contain paths to module files that are relative to your projects root. You can commit modulePaths.js to your repo so it is transportable.
Updating the config.js
Returning to packager/config.js we should update it to use our newly generated modulePaths.js file.
diff --git a/docs/0.10/state.html b/docs/0.10/state.html index 0af5d9f17ee..961eecf71de 100644 --- a/docs/0.10/state.html +++ b/docs/0.10/state.html @@ -73,7 +73,7 @@ AppRegistry.registerComponent('AwesomeProject', () => BlinkApp);In a real application, you probably won't be setting state with a timer. You might set state when you have new data arrived from the server, or from user input. You can also use a state container like Redux to control your data flow. In that case you would use Redux to modify your state rather than calling setState directly.
In a real application, you probably won't be setting state with a timer. You might set state when you have new data arrived from the server, or from user input. You can also use a state container like Redux or Mobx to control your data flow. In that case you would use Redux or Mobx to modify your state rather than calling setState directly.
When setState is called, BlinkApp will re-render its Component. By calling setState within the Timer, the component will re-render every time the Timer ticks.
State works the same way as it does in React, so for more details on handling state, you can look at the React.Component API. At this point, you might be annoyed that most of our examples so far use boring default black text. To make things more beautiful, you will have to learn about Style.