How to setup Storybook with Expo and Web - reactjs

I am trying to setup react native stories on expo which is working fine on the device but I am unable to set it up for the web. I want the components to render on the Web too. Can you please suggest any guide or configuration for that?
This is my storybook configuration: https://github.com/iamshadmirza/RNDSDemo

You should just follow this tutorial : https://www.learnstorybook.com/intro-to-storybook/react-native/en/get-started/
After expo init, you should run npx sb init, then install #storybook/react-native-server (as a devDependency).
Once you're here, just install Jest as seen in the previous link, and run yarn storybook. You'll get Storybook running on localhost:7007

Related

Configuring electron-forge v6 for typescript, react v18, and tailwindcss v3

I'm trying to setup an electron app using electron-forge and the latest versions of react v18 and tailwindcss v3. I followed instructions for getting ef configured for typescript and react here: https://www.electronforge.io/guides/framework-integration/react-with-typescript
I then followed instructions for configuring tailwindcss + electron here: https://www.debugandrelease.com/how-to-use-tailwindcss-with-electron/
And this all seems to have worked - my debug environment starts up properly when I run npm run start. However, the environment continuously refreshes. It seems that something is rebuilding / refreshing in the background, causing webpack to recompile the typescript, resulting in the webpack-dev-server causing a hot reload. Anyone have tips on where to go from here?

Is it possible to import expo libraries on a React Native project that has been created with (npx react-native init Project)?

I want to use the Ionicons as this (import {Ionicons} from '#expo/vector-icons';) in my app, but after running it gives the error that (Error: Unable to resolve module #expo/vector-icons from C:\ReactNewProject\App.js: #expo/vector-icons could not be found within the project.)
please help.
First of all, when you're installing the Expo into your React project, be careful to install the Expo libraries for the exact same Expo version you've installed. Install all the Expo libraries as it says in that version's documentation.
For instance for Expo v.4, you can you use the following documentation.
https://reactnavigation.org/docs/4.x/getting-started
And this code (expo install react-navigation react-native-gesture-handler react-native-reanimated react-native-screens) to install all the Expo v.4 libraries, and it will work completely fine.

React Native UI-Kitten: Will running `npx react-native link` to link fonts affect other native modules?

I'm using UI Kitten with my latest React Native app, and in this section of the docs it says Run npx react-native link from the project root to link fonts with the native side. I haven't used npx react-native link in a long time because of autolinking. So my question is: will running npx react-native link affect any of my native modules or anything else in the app in a way that I should know about (other than the desired linking of fonts here)?

Target container is not a DOM element in react

I am new to React. I cant figure out the following error
JSX doesn't work everywhere as far as I know. You have to create component, so try a
import React from 'react'
class App = () => (<p>first react app</p>);
and then
ReactDOM.render(App, app)
You have to use the babel traspiler to convert your JSX into React code. The easiest way for a beginner to set-up the React environment is to use create-react-app.
I'm assuming that you already have node installed. If not a quick Google search will instruct you how to install nodejs.
After that run the following command in the directory where you want to create the project
npm install -g create-react-app
create-react-app my-app
cd my-app
npm start
Then open your browser and go to localhost:3000 and you should see your react template.
More information on create-react-app can be found via the following links
github page
react official documentation

How to install React on WebStorm

I'm having trouble installing React on an empty project in WebStorm. The instructions on the WebStorm help page tells me to get create-react-app.
Is there a way I can just get react? And if not, what is the difference between the two?
I'm trying to follow this specific tutorial series online about React for beginners. It's a 4 minute video so can anyone please explain to me what the youtuber did?
I would recommend using create-react-app because you will not need to install or configure tools like Webpack or Babel.
You need to install it from https://github.com/facebook/create-react-app if you have npm (node package manager) installed you can just type npm install -g create-react-app

Resources