I'm trying to build simple slate editor in React.
I'm using create-react-app and I have made simple component for representing the editor
import React, { useState } from "react";
import { Editor } from "slate-react";
import { Value } from "slate";
const SlateEditor = () => {
const initialValue = Value.fromJSON({
document: {
nodes: [
{
object: 'block',
type: 'paragraph',
nodes: [
{
object: 'text',
leaves: [
{
text: 'A line of text in a paragraph.',
},
],
},
],
},
],
},
})
const [ value, setValue ] = useState(initialValue)
return (
<div>
<Editor className = "Editor" value={value} onChange= {(e)=>setValue(e.value)}/>
</div>
)
}
export default SlateEditor;
This is my package json file
{
"name": "slate-editor",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.8.3",
"immutable": "^4.0.0-rc.15",
"is-hotkey": "^0.2.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"slate": "^0.66.1",
"slate-plain-serializer": "^0.7.13",
"slate-react": "^0.66.1",
"web-vitals": "^1.1.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
I have error
Failed to compile.
./src/components/SlateEditor.js Attempted import error: 'Editor' is not
exported from 'slate-react'
As you can see I exported Editor from slate-react, please any idea how to fix this?
Thank you
slate-react does not export Editor, you can import Editor from 'slate', or use the Slate and Editable components as shown in the documentation https://docs.slatejs.org/walkthroughs/01-installing-slate
Related
I'm trying to build an app with NW ans react and i'm having trouble calling node js modules fron react like the "fs" module i got the following error: TypeError: fs.readdir is not a function
this is my folders structure:
public
-----files generated by CRA
src
-----main.js
-----handlers.js
-----files generated by CRA
package.json
{
"name": "nw-react",
"version": "0.1.0",
"private": true,
"main": "./public/main.js",
"dependencies": {
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"web-vitals": "^1.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"nw" : "nw ."
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"cross-env": "^7.0.3",
"nw": "^0.64.1"
}
}
main.js
nw.Window.open("http://localhost:3000", {}, function (win) {});
handlers.js
const fs = require("fs");
exports.getFiles = cb => {
const dir = "C:\\Users\\pc\\Documents";
fs.readdir(dir, (err, files) => {
cb(files);
});
};
App.js
import { useState, useEffect } from "react";
import logo from "./logo.svg";
import "./App.css";
const handlers = require("./handler");
function App() {
const [files, setFiles] = useState([]);
useEffect(() => {
handlers.getFiles(files => {
setFiles(files);
});
}, []);
return (
<div className='App'>
{files.map(file => (
<h1 key={file}>{file}</h1>
))}
</div>
);
}
export default App;
Add this to your package.json:
"node-remote": [
"http://localhost:3000",
"file://*"
]
You may also need this:
"eslintConfig": {
"extends": "react-app",
"globals": {
"nw": true
}
}
You cannot use fs module in browser.. it is node core module.
I try to make typescript react setting
and then just install antd
$ yarn add antd
and fix app.tsx like this
import React from "react";
import logo from "./logo.svg";
import "./App.css";
import { Switch } from "antd";
function App() {
function onChange(checked: any) {
console.log(`switch to ${checked}`);
}
return (
<div className="App">
<Switch defaultChecked onChange={onChange} />
</div>
);
}
export default App;
but i can't see right switch
https://i.stack.imgur.com/rmGjJ.png
i want to look like this
https://i.stack.imgur.com/xKVWW.png
and this is my package.json
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/react": "^12.0.0",
"#testing-library/user-event": "^13.2.1",
"#types/jest": "^27.0.1",
"#types/node": "^16.7.13",
"#types/react": "^17.0.20",
"#types/react-dom": "^17.0.9",
"antd": "^4.18.8",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "5.0.0",
"typescript": "^4.4.2",
"web-vitals": "^2.1.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
How to solve this rendering problem?
I'm creating my own React components for Google's Material Components for Web. I'm trying to get the styling to work. According to the docs, you need to add the following to your sass file:
#use "#material/button";
// #include button.core-styles;
Note: I think there is a bug in the docs - button.core-styles doesn't exist. I just commented it out.
When the button renders, it has all the classes on the element, but all the styles associated with those classes are missing. So it doesn't look like an MDC button.
I found this bug report, which lead me to try this:
#import "#material/button/mdc-button";
And voila! The button is styled!
Can someone explain to me what the difference is between the #use and #import options? And why I would use one over the other?
Full example:
Button.scss
#import "~#material/button/mdc-button";
Button.js
import './Button.scss';
import {useEffect, useRef} from 'react';
import {MDCRipple} from '#material/ripple';
function Button(props) {
const buttonElement = useRef(null);
useEffect(() => {
const ripple = new MDCRipple(buttonElement.current);
return () => {
ripple.destroy();
}
});
return (
<button className="mdc-button mdc-button--raised" ref={buttonElement}>
<span className="mdc-button__ripple"></span>
<span className="mdc-button__label">{props.children}</span>
</button>
);
}
export default Button;
package.json
{
"name": "button-test",
"version": "0.1.0",
"private": true,
"dependencies": {
"#material/button": "^12.0.0",
"#material/ripple": "^12.0.0",
"#material/theme": "^12.0.0",
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.8.3",
"install": "^0.13.0",
"npm": "^7.20.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"sass": "^1.37.5",
"web-vitals": "^1.1.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
Ugh. I just found this bug report. But the material.io website still has old info on it....
When I use:
#use "~#material/button/styles";
The button is now styled.
I am having a difficult time getting a simple React JS to start or run. Her are my 2 simple files and package.json.
App.js
export default App;const App = () => {
return (
<div className="container">
<h1>Hello World</h1>
</div>
)
}
export default App
index.js
import { render } from ReactDOM
import App from './App'
render(<App />, document.getElementById('app'))
package.json
{
"name": "first-react-application",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.13.0",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.8.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"web-vitals": "^1.1.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
I have tried start index.js and start App.js. I don't get any errors server just won't run. I try to connect to 127.0.0.0:3000 and localhost:3000 and my browser never connects.
Any help would be greatly appreciated.
Thanks
Dawson
Get rid of the ‘ export default App;’ before the const in App.js
I am learning in React JS and facing below issue.
I am getting Unexpected token error after npm start. I have simple array in state object. I checked eslintConfig setting exists in package.json then still why this error?
error -
below is package.json settings -
{
"name": "react-app-1",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.12.0",
"#testing-library/react": "^11.2.6",
"#testing-library/user-event": "^12.8.3",
"bootstrap": "^4.1.1",
"i": "^0.3.6",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"web-vitals": "^1.1.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
it's pretty simple
modify the
this =>
let state = {
tags = ['tag1', 'tag2']
}
to =>
let state = {
tags : ['tag1', 'tag2']
}
You must use : inside an object for declaration
state = {
tags: ['tag1','tag2']
}