您当前的位置： 首页 > 慢生活 > 程序人生 网站首页程序人生

11.1 开发环境和工具(react脚手架)

发布时间：2025-03-01 17:13:04编辑：雪饮阅读（）

说了大半天都是过时的，直接看我的
npm init react-app react-basic
这一条命令就代替了原本的那些复杂的架构，然后会在你的本地产生react-basic目录，然后cd到这个目录
npm start就可以打开浏览器进入如
http://localhost:3000/
了。
然后在react-basic目录中执行命令安装bootstrap
npm install bootstrap react-bootstrap
然后在react-basic目录中的App.js中
顶部import ‘./App.css’
下面新增如：
import 'bootstrap/dist/css/bootstrap.min.css';
然后同样在该文件中return的括号里面将静态模板拷贝到这里来，如模板像是这样：
<div>
                <div className="jumbotron text-center">
                    <div className="container">
                        <h1>React问答</h1>
                        <button id="add-question-btn" className="btn btn-success">添加问题</button>
                    </div>
                </div>
                <div className="main container">
                    <form name="addQuestion" className="clearfix">
                        <div className="form-group">
                            <label htmlFor="qtitle">问题</label>
                            <input type="text" className="form-control" id="qtitle" placeholder="您的问题的标题"/>
                        </div>
                        <textarea className="form-control" rows="3" placeholder="问题的描述"></textarea>
                        <button className="btn btn-success pull-right">确认</button>
                        <button className="btn btn-default pull-right">取消</button>
                    </form>
                    <div id="questions" className="">
                        <div className="media">
                            <div className="media-left">
                                <button className="btn btn-default">
                                    <span className="glyphicon glyphicon-chevron-up"></span>
                                    <span className="vote-count">22</span>
                                </button>
                                <button className="btn btn-default">
                                    <span className="glyphicon glyphicon-chevron-down"></span>
                                </button>
                            </div>
                            <div className="media-body">
                                <h4 className="media-heading">产品经理与程序员矛盾的本质是什么？</h4>
                                <p>理性探讨，请勿撕逼。产品经理的主要工作职责是产品设计。接受来自其它部门的需求，经过设计后交付研发。但这里有好些职责不清楚的地方。</p>
                            </div>
                        </div>
                        <div className="media">
                            <div className="media-left">
                                <button className="btn btn-default">
                                    <span className="glyphicon glyphicon-chevron-up"></span>
                                    <span className="vote-count">12</span>
                                </button>
                                <button className="btn btn-default">
                                    <span className="glyphicon glyphicon-chevron-down"></span>
                                </button>
                            </div>
                            <div className="media-body">
                                <h4 className="media-heading">热爱编程是一种怎样的体验？</h4>
                                <p>别人对玩游戏感兴趣，我对写代码、看技术文章感兴趣；把泡github、stackoverflow、v2ex、reddit、csdn当做是兴趣爱好；遇到重复的工
                                    作，总想着能不能通过程序实现自动化；喝酒的时候把写代码当下酒菜，边喝边想敲；不给工资我也会来加班；做梦都在写代码。</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
然后重新npm start
在浏览器中就看到效果如：