vincentriemer / react-native-dom
- пятница, 18 мая 2018 г. в 00:17:02
JavaScript
An experimental, comprehensive port of React Native to the web.
An experimental, comprehensive port of React Native to the web.
To see it in action, check out these live demos:
This project is still highly experimental and many aspects of it are subject to breaking changes, continue at your own risk.
Getting your React Native project configured to use react-native-dom
is a lot
like the process for other 3rd party platforms such as react-native-windows
.
If you're starting a new project from scratch: ensure you have the react-native CLI installed globally.
npm install -g react-native-cli
# or
yarn global add react-native-cli
Next, initialize your React Native project.
react-native init [project name]
Then, cd
into your project and install rnpm-plugin-dom
into your
devDependencies
, after which you can initialize your React Native DOM
scaffolding with the react-native dom
command.
npm install --save-dev rnpm-plugin-dom
# or
yarn add --dev rnpm-plugin-dom
# Add DOM support to your React Native project
react-native dom
To run your initialized project in your browser, you can either:
react-native start
and navigate open your
browser to localhost:8081/dom
react-native run-dom
which will start the
packager and open the browser to the correct URL for youdom/bootstrap.js
- Entrypoint to the main thread bundle where you can set
runtime configuration options, register custom native modules, or any other JS
initialization you would like to do.dom/entry.js
- Entrypoint to the JS thread bundle, will likely only be
importing your App's entrypoint from the top-level folder of your project.dom/index.html
- HTML file which is what references and loads the JS
bundles.rn-cli.config.js
- Depending on if the project already has
one, the rnpm plugin will either create it with the proper configuration
options to support the DOM platform or will simply add the necessary entries
to your existing one.A builtin script for performing a production build is still in the backlog but here is a manual script which does so (assuming the same directory structure that gets generated from the rnpm plugin).
# Ensure development-speecific code is stripped from the bundle
export NODE_ENV=production
# Build the main thread bundle
react-native bundle \
--config $(pwd)/rn-cli.config.js \
--dev false \
--platform dom \
--entry-file ./dom/bootstrap.js \
--assets-dest ./dom/dist \
--bundle-output ./dom/dist/bootstrap.bundle
# Build the JS thread bundle
react-native bundle \
--config $(pwd)/rn-cli.config.js \
--dev false \
--entry-file ./dom/entry.js \
--platform dom \
--bundle-output ./dom/dist/entry.bundle \
--assets-dest ./dom/dist
# Copy the index.html file to the build destination
cp dom/index.html dom/dist/index.html
The resulting folder in dom/dist
will contain static HTML & JS ready to be
deployed to your provider of choice.
The API for this is going to be overhauled soon with accompanying documentation. If you want to see what it currently looks like take a look at some of the built in native modules such as AsyncLocalStorage
This project is a lerna-managed monorepo with all the projects living in the
packages
folder.
react-native-dom
- The library itself (this is most likely the package
you're interested in).rnpm-plugin-dom
- RNPM plugin primarily used for bootstrapping DOM support
into a React Native project.rndom-*
- Custom web components (built with
svelte) used for some of the built-in
widgets/views in react-native-dom
.One noticeable omission to the list of packages is the custom build of Yoga
which can be found in
this seperate repo. yoga-dom
is
not included in this monorepo due to requiring a signifigantly different build
environment than this repo's entirely JS codebase.
To run the examples located in the react-native-dom
source, run the following
commands from the root of the monorepo:
# be sure to update the git submodules to pull the RNTester code
git submodule update --init
# install dependencies
yarn
# start the react-native packager
yarn run-examples
Then navigate to localhost:8081/Examples
and choose which example you would
like to see.
A live deployment of the RNTester project (used primarily for manually testing changes) can be found at rntester.now.sh