React Native Boilerplate template - reactjs

I'm a ReactJS developer, and I'm learning React Native for an upcoming project.
With ReactJS, there is a great boilerplate which is widely used by ReactJS developer: https://www.reactboilerplate.com/ (There are also many other great boilerplate).
However, after researching for a day, I haven't figured something similar to React Native. Please, can someone suggest to me a boilerplate for React Native?. Is there a standard project structure out there?

Actually there is not much difference from ReactJs. It really depends on navigation library you are choosing. The best options are:
React Navigation (JS based navigation library)
React Native Navigation (Native navigation library)
I suggest seeing example projects of both libraries.

You should try:
https://github.com/react-community/create-react-native-app
Also read documentation about React Navigation.

You can use the react native Ignite CLI Github which seems to be very similar, it's probably one of the most advanced Boilerplates for React Native and can be difficult to understand, thus when starting with React Native I would advise you to use none at all or just use your React structure

I recommend using the Handidev boilerplate since it only consists of the minimum library that every react-native project uses. And it has been used in many projects. This boilerplate consists of :
latest react-native version
react-navigation and its dependencies
redux-toolkit ( state management)
react-native vector icons ( for icons)
You can check it out here:
javascript version: https://www.npmjs.com/package/#handidev/react-native-boilerplate
npx react-native init MyApp --template #handidev/react-native-boilerplate
TypeScript version: https://www.npmjs.com/package/#handidev/react-native-typescript-boilerplate
npx react-native init MyAppName --template #handidev/react-native-typescript-boilerplate

Related

watching courses react native expo and react-native cli

I have knowledge about react native with cli, while in most of the courses they used react native with expo, my question is that , can i follow a course while i am using react native with cli? are there big differences between them ?
For beginners, I would recommend going with Expo since it will take a lot of your headache away, and later, when you are more familiar with the React environment, you can always eject from Expo to Bareflow, which works similar to the React-Native CLI but comes under Expo.
In my opinion, React-Native CLI gives you more freedom, liberty, and control to express and experiment over your code whereas, Expo binds you in a shell where you rely more on Expo dependencies. The choice is yours depending on your level of the React expertise.
hope you got your answer

How to use snowpack with react native

I recently got to know about snowpack and it's advantages but the thing is all the available tutorials are on how to make a react app with snowpack but I wanted to use it with react-native. I saw that expo uses webpack does that mean we can use snowpack instead by initializing a bare react-native app. Any help would be appreciated (like link of any tutorial).
NOTE :
I did get a github discussion saying the author doesn't have enough knowledge about react-native in particular. Does that mean he will have to do some additional work for supporting react-native?

I want to built my own React UI library, how can I start?

I do have some components I use across my projects so I thought it was a good idea to build my own React UI lib, but how?
Do I create a SPA using CRA and start coding and listing the components on it?
Yep, it’s one way to start.
But if you want to publish it or organize it to have a better use of it, I suggest you use Storybook as your dev environment and Jest + ESlint.
There’s some boilerplates like React AZap to help you with that.
I built React AZap to be an easy to use React UI lib boilerplate.
It uses Storybook and stories to organize your components, it has a component generator using Plop, tests with Jest+Enzime and styles with styled-components.
Try it out, it can save you time to start your lib ;)
Using CRA won't help you, as you won't be running this project.
Creating a library of components is the same as creating any other npm package, the only difference is that it should export components instead of normal functions/objects.
There are plenty of guides online that you can consult if you want more in-depth explanation.
I'd recommend giving this guide a read, which goes into the details for how to structure a multi-package UI component library. The code is included as well, so you should be able to clone to repository and get started.
Hope that helps!

Meteor + React + Semantic UI - What is the best way to install this stack?

I want to use React and meteor together with Semantic UI.
I see that Semantic has an official atmosphere package
There is also a Semantic-UI-React project
What is the best way to install this stack?
Is there any reason(s) that it doesn't make sense at all?
Would react-router also fit in the stack?
Here is a starter repo for MeteorJS + ReactJS I've written. I have also installed semantic-ui under /client/lib
https://github.com/pkcwong/meteor-react-starter
I am a huge fan of ReactJS and semantic-ui.
Basically you first install semantic-ui-react, then you still have to follow this link to install the actual semantic-ui library.
https://github.com/Semantic-Org/Semantic-UI-Meteor
We have a boilerplate that may help you. It’s using the following components:
- Meteor V 1.7.0.3
- React 16.4.1
- React Router V4.3.1
- Semantic-ui-react 0.81.1
https://github.com/factoryThings/fTboilerplate

How can I specify different versions of react in my react/react-native repo

Two questions.
I currently have a react web app, using higher order components, and redux to manage state. I am using react version 15.6.1.
I am now looking to create a react-native project. Since I am planning to integrate the react-native and the react codebase into the same repo, I am trying to figure out the best way to do this, specifically regarding the version of react.
The latest version of react-native (0.53rc0) has a peer dependency on react 16.2.0.
The react app breaks when I tried to upgrade to react v16 and I don't have time to do those fixes at this stage, so I am stuck with react 15.6.1 for a while longer. Does this mean I have to use an older version of react-native (looks like 0.42 supports react v15), or is there some other way in which I can use the latest version of react for react-native only, while keeping it in the same repo.
To clarify - the reason I want to keep it in the same repo, is because I already have higher order components, so in theory I just have to write the react-native components which will to my understanding then be called by the higher order component when running in the mobile app.
If anyone has or knows of examples of repos on github where this has been done (combined react and react-native project), that would be great so that I can get an idea of what such a project would look like once done.

Resources