Reactアプリ - 文章中キーワード黒塗りはがし

(base) macpro:dev teruroom$ cd /Users/teruroom/dev/react/
(base) macpro:react teruroom$ npx create-react-app blackout-peeling

PSC:\>cdC:\dev\react\PSC:\dev\react\>npxcreate-react-appblackout-peeling

Creating a new React app in /Users/teruroom/dev/react/blackout-peeling.
・・・・・・・・途中省略・・・・・・・・・・・
Success! Created react-boardgame at /Users/teruroom/dev/react/blackout-peeling
Inside that directory, you can run several commands:
  npm start
    Starts the development server.
  npm run build
    Bundles the app into static files for production.
  npm test
    Starts the test runner.
  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!
We suggest that you begin by typing:
  cd react-boardgame
  npm start
Happy hacking!

(base) macpro:react teruroom$ cd blackout-peeling/src
(base) macpro:src teruroom$ rm-f*

PSC:\dev\react>cd.\blackout-peeling\srcPSC:\dev\react\blackout-peeling\src>rm-Force*

(base) macpro:src teruroom$ touch index.css index.js

PSC:\dev\react\blackout-peeling\src>New-Item-typefileindex.cssPSC:\dev\react\blackout-peeling\src>New-Item-typefileindex.js

importReactfrom'react';importReactDOMfrom'react-dom';import'./index.css';constwhite='#fff';constcrimson='#880E4F';constmarginwidth='5px';constfontweight='bold';classKeywordextendsReact.Component{constructor(props){super(props);this.state={value:null,forecolor:blackOutColor,backcolor:blackOutColor,margin:marginwidth,fontweight:fontweight,};this.changeColor=this.changeColor.bind(this);}changeColor(){constnewColor=this.state.backcolor===blackOutColor?white:blackOutColor;this.setState({forecolor:blackOutColor,backcolor:newColor})}render(){return(<spanstyle={{color:this.state.forecolor,background:this.state.backcolor,marginLeft:this.state.margin,marginRight:this.state.margin,fontWeight:this.state.fontweight}}onClick={()=>this.changeColor()}>{this.props.value}</span>
);}}classSentenceextendsReact.Component{blackOut(keyString){return<Keywordvalue={keyString}/>;
}render(){return(<div><divclassName="maintitle">ホゲホゲについて</div>
<ol><liclassName="subtitle">FOO</li>
<ul><li>FOOは、{this.blackOut('BAA')}システムから利用申請し、「{this.blackOut('利用許可')}」を得てから使用する</li>
<li>FOOを{this.blackOut('ホゲ')}やハゲによる攻撃から守るため、BOO対策製品を導入する</li>
</ul>
</ol>
</div>
);}}classPageextendsReact.Component{render(){return(<divclassName="page"><divclassName="page-sentence"><Sentence/></div>
<divclassName="page-info"><div>{/* status */}</div>
<ol>{/* TODO */}</ol>
</div>
</div>
);}}ReactDOM.render(<Page/>,document.getElementById('root'));

body{width:1100px;font:18px"Meiryo","Century Gothic",sans-serif;margin:0px;cursor:pointer;}ol,ul{padding-left:30px;}td{width:50%;}.maintitle{width:100%;font-size:30px;color:#fff;background:cornflowerblue;}.subtitle{width:95%;font-size:22px;font-weight:bold;color:rgb(26,75,182);background:rgb(210,210,211);margin:4px;padding:4px;}.page{display:flex;flex-direction:row;}.page-sentence{margin-left:20px;}.page-info{margin-left:20px;}

(base) macpro:blackout-peeling teruroom$ npm start'

PSC:\dev\react\blackout-peeling>npmstart

(base) macpro:blackout-peeling teruroom$ npm run build

PSC:\dev\react\blackout-peeling>npmrunbuild

> security-compliance@0.1.0 build C:\dev\react\blackout-peeling
> react-scripts build
Creating an optimized production build...
Compiled successfully.
File sizes after gzip:
  39.89 KB  build\static\js\2.73f5bc0c.chunk.js
  5.5 KB    build\static\js\main.11e48eb2.chunk.js
  782 B     build\static\js\runtime-main.623a1e28.js
  310 B     build\static\css\main.3c6f1d95.chunk.css
The project was built assuming it is hosted at /.
You can control this with the homepage field in your package.json.
The build folder is ready to be deployed.
You may serve it with a static server:
  npm install-g serve
  serve -s build
Find out more about deployment here:
  bit.ly/CRA-deploy

(base) macpro:blackout-peeling teruroom$ npm start --host='0.0.0.0'

PSC:\dev\react\blackout-peeling>npmstart--host='0.0.0.0'

Compiled successfully!

You can now view blackout-peeling in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.0.16:3000

Note that the development build is not optimized.
To create a production build, use npm run build.