How to configure react.js and react-dom.js dependencies? - reactjs

I am new to react and I am not able to configure it correctly the command
import React from "react"
import ReactDOM from "react-dom"
ReactDOM.render(--,--)
is not working even after the locations are given correct.

If you are using create-react-app then don't need to such setup n all.
just create project and start working on that.
Quick Start
npx create-react-app my-app
cd my-app
npm start
for proper understanding and learning. please go through reactjs docs
Sample app
import React from "react";
import ReactDOM from "react-dom";
function App() {
return <div>Hello</div>;
}
ReactDOM.render(<App />, document.getElementById("root"));

Related

./src/index.js Module not found: Can't resolve 'aws-amplify' React

I am trying to learn AWS and react. I keep getting the below error for my react app when i run it on my local machine using "NPM start".
./src/index.js
Module not found: Can't resolve 'aws-amplify' in 'C:\Users\pull-transactions\src'
at Resolver.resolveModule (node_modules/jest-runtime/node_modules/jest-resolve/build/index.js:306:11)
at Object. (src/components/PlaidLink.js:3:1)
index.js config:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import Amplify from 'aws-amplify';
import config from './aws-exports';
Amplify.configure(config);
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
I spent a couple hours searching google but cannot find anything on this. I have another app that is working fine and the file structure looks the same for both. Any help is appreciated. Please let me know if you need more info.
You must install the package before you can use it.
$ npm install # installs packages listed in your package.json file
$ npm install --save aws-amplify # installs the aws-amplify package and saves it to your package.json file

React Suspense Concurrent Mode Not Working

I am trying to use react suspense but I am facing some issue regarding rendering after making changes in react index.js file and I already installed react suspense "npm install react#experimental react-dom#experimental"
My index.js file
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
ReactDOM.createRoot(document.getElementById("root")).render(<App />);
Index.js file
Error
TypeError: react_dom__WEBPACK_IMPORTED_MODULE_1___default.a.createRoot is not a function
Error Image
To anyone updating an old React App, the React support doc on React 18 says to write ONLY:
npm install react react-dom
for the React 18 update.
I had two React 16 apps I wanted to update.
To do so, I first updated to React 17:
npm install react#17.0.0 react-dom#17.0.0
ONLY AFTER this version is installed properly, you are able to install to 18, specifying the version in the installation command:
npm install react#18.0.0 react-dom#18.0.0
After that,
ReactDOM.createRoot(document.getElementById("root")).render(<App />);
works just fine.
Follow the version update on your 'package,json' file.
In order to works is required to use ReactDOM.unstable_createRoot
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
ReactDOM.unstable_createRoot(document.getElementById("root")).render(<App />);
change -> import ReactDOM from "react-dom";
to -> import ReactDOM from "react-dom/client";

react-key-index sample example does not work

I would like to use react-key-index extension in order to generate unique id's.
I was trying to implement their sample example, but no matter what I do, it still throws me the same error:
TypeError: Hashids is not a constructor
link: react-key-index npmjs
Here is that pretty simple example:
App.js:
import React from 'react';
import keyIndex from "react-key-index";
import './App.css';
function App() {
let arr = ["one", "two", "three"];
arr = keyIndex(arr, 1);
const list = arr.map(arr => <li key={arr.id}>{arr.value}</li>);
return <ul>{list}</ul>;
}
export default App;
index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
serviceWorker.unregister();
Please, do you have any idea where do I do a mistake? I am trying to set it going in completely new react project (create-react-app). From my point of view i have implemented it correctly (but obviously i have not).
And here is how that error looks like in the browser:
Have you run npm install or perhaps npm install --save hashids? hashids is a dependency of that npm package: https://www.npmjs.com/package/react-key-index
The require('hashids'); should load up that NPM package if you have it installed; if it doesn't find it, I would expect an error like this.
You seem to be using an older version of react-key-index
Try using V0.1.1 and check if that works for you.
I tried it with React 16.8.6 and it seems to be working well for me.
Here's a Working Sample CodeSandbox for your ref.

Errors importing React-Router, using create-react-app

I'm trying to use react-router with the create-react-app I just created but I'm having issues importing it. I'm importing it like I import the other react dependencies:
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Link } from 'react-router-dom';
but I'm getting this error message:
./src/index.js
Module not found: Can't resolve 'react-router-dom' in 'C:\Users\Eric\Code\react-test\src'
I've tried googling and checking on here but I can't find an answer. Why isn't it looking in node_modules?
Install react-router-dom.
I got this error message because I had followed an old tutorial that had me installing the react-router packager instead of react-router-dom package. Couldn't figure it out for a little bit.
To solve this issue, just install react-router-dom:
npm install --save react-router-dom
All set!

import App from './App';

I am trying react based on create-react-app. I'm new to react.
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<App />,
document.getElementById('root')
);
./App in import App from './App'; is not clear to me when and where is this created, is this done by babel?
file strucutre
my-app/
README.md
node_modules/
package.json
.gitignore
public/
favicon.ico
index.html
src/
App.css
App.js
App.test.js
index.css
index.js
logo.svg
App.js
import React, { Component } from 'react';
class App extends Component {
render() {
return (
<div>myComponent</div>
)
}
}
export default App;
tl;dr
No, it is not done by Babel, instead it is done by create-react-app package.
All the files and folders in that folder are created automatically when you run,
create-react-app your-new-app-name
import App from './App'
The above line is used for importing the class you have written in the file App.js under the same directory.
Next, the difference between,
import App from './App'
and
import App from 'App'
Use the first if you want to import any user defined files and second for importing packages. As Shubham Khatri mentioned, for importing files, it is technically same if you did or did not use .js extension.
The longer version
create-react-app is a starter kit for people who are new to React or for who are lazy enough to build an app from scratch. What create-react-app does is, it will give you a minimal running React app with a solid folder structure. As given in their documentation, you can install that globally by giving,
npm install -g create-react-app
After this whenever you want to create a new app, what you want to do is,
create-react-app your-new-app-name
This will automatically generate a folder with all the files you mentioned.
Within the folder when you open the file public/index.html, you can see a line
<div id="root"> </div>
And on the src/index.js, you can find,
ReactDOM.render(
<App />,{}
document.getElementById('root')
);
If you are familiar with javascript, you may know that document.getElementById('root') is used to match any tag in HTML with ID as root. So the above snippet means that, they are rendering the <App> component of react to div with ID root. This is how React communicates with HTML page.
Rather that writing all the component codes in a single file, it is a good standard to write each components in different files. Here, App.js is a component that basically renders the text myComponent. For using this component in other files, you have to do two things.
Export the component from the file where it is defined. (export default App;)
Import the component to the file where it is used. (import App from './App')
General syntax for import is,
import className, { functionName } from 'packageName'
or
import className, { functionName } from './path-to-file/fileName'
Note: It is that ./ which tells the compiler whether to look on to node_modules folder or the path you mentioned. Use that strictly when you need to import user defined files.
Hope this helps!
When you import your Component like
import App from './App';
It will import your file App.js that is present in the same direcotry as index.js
In webpack configuration we specify which types of files babel needs to build and there if we specify .js or .jsx, it takes by default the extension of the file when we import it. we do not explicitly mention it. You can change your immport to be like
import App from './App.js';
which is technically the same.
The create-react-app npm package makes use of webpack to build your code which you can see from the package/react-scripts/package.json in the github directory

Resources