react的创建

反应配置的时候,发现很多都是一步一步来配置文件的,不过好处的是,可以帮助我们理解的WebPack,而这配置也太慢了,如果没存好,还得再来一遍!

1、当然,我们有快速搭建项目的指令:

npm install -g create-react-app

2、创建项目:列如(my-app

create-react-app my-app[你想要的项目名称]

复制代码
在该目录内,您可以运行几个命令:

  NPM开始
    。启动开发服务器

  NPM构建运行
    将应用程序捆绑资料到静态文件中进行。生产

  NPM测试
    。开始测试跑步者

  NPM运行弹出 
    删除此工具并复制构建依赖项和配置文件
    和脚本到应用程序目录中。如果你这样做,你不能回去! 
我们建议您先输入以下内容:
  cd grewer 
  npm开始

这里基本都很清楚地给我们了知道了;

3、可以启动了:

npm stsrt

如果你的构建速度慢的话,可以考虑一下使用cnpm。

复制代码
class grewer extends React.Component {
    constructor(props){
super(props); this.state = {} } render(){ return <div> Hello!</ div>; } }
复制代码

 

 

反应的引用组件可以是任何位置的,比如他在当前页面的话:

复制代码
function LoginButton(props){
   return <button onClick = {props.onClick}>
      Login
    </ button>
   );
}



class App extends React.Component {
...
    render(){
     return <div> welcome!<LoginButton onClick =“this.methods”/> </ div> ;  
}
...
}
复制代码

 可以直接就放在上面了,而如果是其他页面,也可以引用,如:

components.js:

1
2
3
class App extends React.Component {
...
};
export default App;

index.js(主页面):

1
import Grewer from './components.js';

然后再渲写写上 

1
<Grewer  />

就可以了;



### 使用Create React App初始化新的React项目 为了使用Create React App创建一个新的React项目,需满足Node.js版本大于等于10.14.2以及npm版本大于等于5.6的要求[^4]。在准备就绪的环境中,可以通过两种方式之一来进行操作。 一种简便的方法是直接利用`npx`命令来启动这个过程,无需事先全局安装create-react-app包。只需打开终端,在期望的位置执行如下命令即可: ```bash npx create-react-app my-app ``` 上述命令会自动下载必要的依赖项并设置好基础配置,从而建立起一个名为my-app的新项目文件夹[^2]。 另一种方法涉及预先通过npm全局安装create-react-app工具,之后再调用它来建立新项目。具体步骤为先运行全局安装指令,接着按照相同模式创建目标应用程序: ```bash npm install -g create-react-app npx create-react-app "项目名称" ``` 完成任一路径下的创建流程后,进入刚生成的应用程序根目录,并启动开发服务器以查看成果: ```bash cd my-app npm start ``` 这将开启本地服务端口,默认情况下可以在浏览器中访问http://localhost:3000来预览正在构建中的React应用。 ### 创建后的初步探索 一旦成功建立了基于Create React App模板的React工程,将会获得一系列默认生成的关键文件和文件夹结构,这些构成了典型单页Web应用的基础框架[^3]。 #### 关键组件解析 - `public/index.html`: 这是HTML模版文件,所有的JavaScript代码都将被注入到这里面。 - `src/App.css`, `App.js`, 和其他位于`/src`内的资源:它们共同组成了应用的主要逻辑与样式定义部分;其中`App.js`作为入口点负责渲染整个UI层次结构。 - `package.json`: 记录着项目的元数据及其所依赖的各种库的信息列表。 以上即为采用Create React App快速搭建起可立即投入使用的React工作空间所需遵循的操作指南及后续理解其内部构成的知识要点。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值