Hello guys, it's been a while! I wanted to share about React Native today. I started a small project with a friend recently and we wanted to be able to develop the mobile app as well as the website. For now, the project is really in a early stage so I won't say much about it but I can tell about design considerations for those of you who are hesitating. First things first, we needed something easy to manage our data, so we chose Firebase which is a pretty good way of getting something done quickly.
React Native part
To get started, we start with installing and generating a react native project, which is pretty straightforward, just do:
npm install -g react-native && react-native init MyProject
This will create a basic structure that looks like this:
This way, you can already start developing with
react-native run-ios or
But now we need our web part, so how can we do that?
Here comes the web
Maybe this last few months you heard about
create-react-app, an awesome tool with no configuration to start developing with React on the web. I chose it to get started because it's really easy and fast. This tool is based on something called
react-scripts that manages the building configuration for you. And since we already have a structure for our project, we need to integrate it, and it's so easy to do.
First, install it into the project by doing:
npm install react-scripts --save-dev
Then, all you need to create is:
An entry point for your web project located at
src/index.js(no, I'm not wrong about the
react-native import, wait for it :P)
A public folder with a basic HTML:
Add these lines to your
And that's it, we did the job of
create-react-app but manually to integrate it into our project.
Now, you might wonder: Why is there an import from react-native in my web application? And you're right because it's weird! The reason is because
react-scripts integrates the
react-native-web package that allows you to use the component from react-native into the web. Every call to React Native is proxied to React Native Web when the web building part do the job. You don't need to think about it but keep that in mind because it allows you to share more code between your different platforms. You still can use
ReactDOM.render if you prefer.
Last, but not least, components and stuff we're going to write!
Project final structure
There's a cool stuff you can do with React Native when importing files. It automatically resolves the platform it is building from the file's name. Here's some examples:
This feature is so nice and allows you to have a great project structure like this:
MyContainer will contain common logic and include components from the
components folder, no need to differentiate inside the container.
Bonus: React Router (v4)
You can easily use React Router with React Native to manage your routes inside your application the same way you do in the web app. If you have a
<Root /> component that use a
<Router /> to manage its routes, you can easily import the
BrowserRouter according to the platform you target.
Hope this article can give some tips to people who aren't aware of this nice features and see you next time! :D