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
Related
I created a single button in a .ts file inside 'components' folder using react framework. I was wonder what is the quickest way to view the button I built.
As I am new, just to make sure it is not workable to use 'ts-node' to run right?
If you're new to React, I recommend using CRA first to view your custom component as fast as possible.
https://create-react-app.dev/docs/adding-typescript/
$ npx create-react-app my-app --template typescript
// or
$ yarn create react-app my-app --template typescript // if you prefer yarn
The command above will do all the setup for you, you just need to go to the folder and run the app.
if you only want to do a custom React setup with TypeScript from scratch,
Here's my post, using webpack, babel, and TypeScript
Can anyone help me out to solve this problem.
As I am learning React Native, I was going through styled components but was facing an error related to styled components not compatible with react18 version. and same works in react#16 and below
I was trying to install styled-components for styling components in react-native. And i was receiving error saying that react18 is not compatible. I just want styled components to work
Try to install it with this command
npm install styled-components --force
I sorted the solution as styled-component was not working for react 18.0.2.
So I decided to uninstall react 18.0.2 by using npm uninstall react#18.0.2
and then
I reinstalled npm install react#17.0.2 and then I read the documentation of Styled Component
and installed styled-components using yarn add styled-components and successfully sorted out my problem.
npx expo install react-dom
This fixed it for me (using expo managed react-native app)
https://github.com/styled-components/styled-components/issues/3788#issuecomment-1335191911
I had same problem when taking Udemy course about React Native. This course provides git with complete code, so what I did was:
Downloaded packages.json file from git url provided with course (last version),
Deleted my project node_modules folder,
Deleted my project packages-lock.json file,
Executed npm install
I'm trying to share a React component I've created through a local hosted npm repo.
To do that I created the React component with typescript, transpiled it to js and published the resulting code to the repo. But when I install this package in an existing project (a basic create-react-app project with typescript) and try to use that component - My app tried to compile it for a few minutes and I fail to load that component. Sometimes if I wait a few minutes I see this error - although the component was tested and works:
Error: Invalid hook call. Hooks can only be called inside of the body
of a function component. This could happen for one of the following
reasons:
You might have mismatching versions of React and the renderer (such as React DOM)
You might be breaking the Rules of Hooks
You might have more than one copy of React in the same app See https://reactjs.org/link/invalid-hook-call for tips about how to debug
and fix this problem.'
I've copied the same component to be embedded in the app and not installed by npm - it worked. I tried to strip the component to the bare minimum - it still takes a long time.
The steps to reproduce are easy:
I've shared the component in github:
https://github.com/ymoran00/example-stackoverflow-react
To build it you need to run npm install and then npm run build.
the result will be generated in the lib folder.
You can then go into the lib folder and run:
npm link
Then create a new typescript create-react-app project:
npx create-react-app my-app --template typescript
Go inside it and run:
npm link login-component
This will install the linked package.
Now go to App.tsx and import the package:
import LoginContainer from 'login-component/LoginContainer';
And use it in the App:
<LoginContainer onLogin={()=> {alert('success')}}/>
Run the app with npm start.
The App will open the browser - but nothing will load. It's kind of stuck on build or whatever - I don't know what happens there. If you'll take a look at the component you'll see it's quite a basic one with Material-UI.
The first place that I looked was your package.json file because it most likely that you are dealing with reason #1:
You might have mismatching versions of React and the renderer (such as React DOM)
I see that you are including react and react-dom as dependencies for your component. You should move these from dependencies to peerDepenedencies. You likely want to move #material-ui/core and #material-ui/icons to peerDependencies as well. Right now React is being bundled with your component and your component uses its own React version rather than the one in your app. You want to make it so that projects that use your component are expected to include React on their own.
For more information about why you should use peerDependencies, see this question:
What's the difference between dependencies, devDependencies and peerDependencies in npm package.json file?
It seems that the main problem I had in the process is using npm link.
It causes problems when combined with hooks - that's why I get this hooks error.
See also in this thread:
https://github.com/facebook/react/issues/13991
So instead of using npm link I've started using npm-sync and it seems to solve the problem.
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
So i created a react app using the create-react-app folder-name from cmd
So how do i add bootstrap and other libraries to launch on npm start i.e. when i launch the app. Do i install them with bower install or with npm install. I am so new to this i don't even get how are all the scdripts from the framework are launching with idnex.html. I know that the question is probably somewhat retarded, but idk how to even ask it correctly.
You can add any libraries you want utilizing npm and ES6 Import
Just Import anything you want in App.js.
Here is step by step guide on adding bootstrap to your project.