Package: react-python
ReactReactis a implementation of React in Python usingBrython. React application runs on the client side, which are written inPython 3. It's Component based and follows the same virtual DOM and Fiber architecture as ReactJS. React also supports PYX syntax which is equivalent to JSX in Javascript.Getting StartedCreating a React app is very simple and the process in very much inspired from ReactJS. 1111InstallationReact has a PyPI packagepip install react-pythonSetting UpOnce React is installed, then to setup boiler plate -Create an empty folder for your application.Then run the following command to Initialize Reactreact-cli--initSetup live reload serverReact comes with a simple live reload development server, to use start it -react-cli--serveThis will start a development server athttp://127.0.0.1:5500/Create a deployment buildTo create a deployment build of your application -react-cli--buildThis will create abuilddirectory in project folder. Then this can be very easily deployed to services likeNetlify Dropby uploadingbuildfolder for deployment.Syntax HighlightingTo get syntax highlighting on.pyxfiles in React applications, installReact Syntax Highlighterin VSCODE from Visual Studio Marketplace.ExamplesTodo List using React -https://react-py-todo.netlify.app/Passing PropsimportReactfrombrowserimportdocumentdefGreetings(props):return<h1>Hi,{" "+props["name"]}</h1>element=<Greetingsname="World!"/>React.render(element,document.getElementById("root"))CounterimportReactfrombrowserimportdocumentdefCounter(props):count,setCount=React.useState(0)return<div><h1>Count:{count}</h1><buttononClick={lambdae:setCount(count+1)}>+</button><buttononClick={lambdae:setCount(count-1)}>-</button></div>element=<Counter/>React.render(element,document.getElementById("root"))TimerimportReactfrombrowserimportdocumentfrombrowser.timerimportset_interval,clear_intervaldefTimer(props):seconds,setSeconds=React.useState(props["timelimit"])running,setRunning=React.useState(False)ifseconds<1:setRunning(False)def_tick():setSeconds(lambdas:s-1)def__effect():ifrunning:print("Set Interval")__interval=set_interval(_tick,1000)returnlambda:clear_interval(__interval)React.useEffect(__effect,[running])color="red"ifnotrunningelse"blue"return<div><divstyle={{"color":color}}>Seconds:{seconds}</div><buttononClick={lambdae:setRunning(lambdar:notr)}>Start/Stop</button></div>element=<Timertimelimit={5}/>React.render(element,document.getElementById("root"))Live InputimportReactfrombrowserimportdocumentdefLiveInput(props):value,setValue=React.useState("")return<div><inputvalue={value+""}onInput={lambdae:setValue(e.target.value)}/><h1>{value}</h1></div>element=<LiveInput/>React.render(element,document.getElementById("root"))API CallimportReactfromReact.utilsimportlmapfrombrowserimportdocumentfrombrowser.ajaximportgetdefUserCard(props):return<divstyle={{"border":"1px solid black","padding":"5px","margin":"10px",}}><h2>{props["name"]}</h2><p>email:{" "+props["email"]}</p><p>website:{" "+props["website"]}</p></div>defUserList(props):users,setUsers=React.useState([])def__effect():def_on_complete(res):print(res.json)setUsers(res.json)get("https://jsonplaceholder.typicode.com/users",oncomplete=_on_complete)React.useEffect(__effect,[])return<div>{lmap(lambdax:<UserCardname={x["name"]}email={x["email"]}website={x["website"]}/>,users)iflen(users)>0else<h1>Loading...</h1>}</div>element=<UserList/>print(element)React.render(element,document.getElementById("root"))ContributionsCheckContribution.mdfor Detailed Information.NoteThis project is still in beta, so if you find any bugs please raise an issue.LICENSErefer to ./LICENCE*buildpip install build twine
python -m build
python -m twine upload dist/*.whl